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

スポンサーリンク

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になっていますしね。
自分のブログのデザインに合うよう適宜いじってみるといいと思います。

「Facebook」新着記事

Facebookアプリで3D写真投稿機能をONにするには? 試してみたら本当にできた件

Avatar for ホシナ カズキ

ホシナ カズキ

Facebookの「Send Button」を独自ボタンで実装する方法

Avatar for ホシナ カズキ

ホシナ カズキ

知ってた? Facebookを操作するキーボードショートカットまとめ

Avatar for ホシナ カズキ

ホシナ カズキ

Facebookのソーシャルプラグインを表示するJavaScript SDKを書き換えよう

Avatar for ホシナ カズキ

ホシナ カズキ

大幅に変更されたFacebookページの新デザインが徐々に開放されてきましたね

Avatar for ホシナ カズキ

ホシナ カズキ

もっと見る

モバデビモバイルウェブのネタ、ニュースMaciPhoneなどのApple関連、WordPressのことなど、いろいろ書く雑食系ブログメディア。
ためになるかもしれないし、ならないかもしれない。そこそこ更新してますそこそこ。

このブログについてもっと詳しく