Facebookのウォールをブログに表示させるjQueryプラグイン

13年前

Twitterのツイートをブログに表示させる方法というのはいろいろありますが、今回は同じようにFacebookに投稿したウォールの内容をブログに表示させられんかなーと思って調べてみたら、「fb.wall」というjQueryプラグインがあったので、試しに実装してみました。

このjQueryプラグインを導入することで、ブログの任意のところにFacebookのウォールをデザインそのままに表示させることが出来ます。

実際の表示イメージ

導入方法はいたって簡単

導入は至って簡単です。

まずは、ここからファイルをダウンロードし、解凍したフォルダをサーバに設置しましょう。

このとき、フォルダ名とjsファイル、CSSファイルの名称を変更しておくといいかも。かなり長ったらしいので。
変更したところで支障はありませんしね。

次に、ブログのテンプレートを変更します。headタグ内に入れ込んで下さい。

<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(){
       $('#【任意のID名】').fbWall({ id:'【FacebookのユーザーID】', max:【表示したい件数】, showComments:true, showGuestEntries:flase });
    });
</script>
</head>

このコードではファイル名等を変更していない前提になっていますが、変更した場合は変更後のファイル名にしてください。
また、jQueryを導入済みであれば、2行目は必要ありません。

続いてFacebookのウォールを表示したい場所に、以下のコードを入れて下さい。

<div id="【上で設定した任意のID名】"></div>

以上で完了です。

FacebookのユーザーIDは個人だけじゃなく、Facebookページもいけます。(※確認済)

取り敢えず暫定的にうちでは、ブログの記事下に入れ込んでみました。多分すぐに別の場所に配置しなおしますけどね。

導入方法については以上ですが、設置したCSSを書き換えればスタイルは色々と変更出来ます。
Facebookのウォールそのままがいいという人でも、表示するdivの横幅だけでも変更したほうがいいかも。デフォルトだと520pxになっていますしね。
自分のブログのデザインに合うよう適宜いじってみるといいと思います。

実際の表示イメージ

導入方法はいたって簡単

関連記事