Facebookのウォールをブログに

2011/03/10(木)

自分にはどうやらTwitterよりFacebookの方が相性がいいようです。ということでTwitterのウィジェットに代えて、Facebookのウォールをブログに表示するように変えてみました。

Twitterのウィジェットは設定＞プロフィールでコードを作成できますが、Facebookのアカウント設定では見当たりません。探して探してドイツのサイトでfb.wallというJQueryプラグインが配布されているのを見つけました。

これをダウンロードして、中身をサーバーの適当なところ、例えばfbwallというディレクトリ、にアップロードします。

この中にindex.htmlがあるので、これを参考にこの部分を<head>内に入れます。

<link href="jquery.neosmart.fb.wall.css" rel="stylesheet" type="text/css"/>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery.neosmart.fb.wall.js" type="text/javascript"></script>
<script type="text/javascript">
        $(function(){
            $('#DEMO').fbWall({ id:'FACEBOOKのID', max:5, showComments:true, showGuestEntries:true });
        });
</script>

cssとjsファイルへのパスをアップロード先に合わせます。jQueryが既に入っていたら2行目のスクリプトはなくていいと思います。

DEMOは適当な名前に、FACEBOOKのIDの部分を自分のIDに変更します。maxの後の数字は表示件数、showCommentsはコメントの表示非表示です。

<div id="DEMO"></div>を<body>内の表示したい位置に組み込みます。cssを変更できるので、いかようにもデザインをいじれます。

Facebook