2012年2月28日火曜日

【Blogger応用編】ブログのコメント欄をFacebookと連携させる方法

ブログを解説したら、コメントをいろいろもらいたいもの。でも、荒らしのコメントはちょっと困ります。また、Facebookでも話題にもして欲しい。そんなときはコメント欄をFacebookにしてしまいましょう。



以下、やり方です。
①Facebookのアプリ開発ページにアクセス
 自動的にダイアログが出てこなければ「新しいアプリケーションを作成」をクリック
 

②自分のブログをアプリとして登録
 表示された入力フォームには、ブログ名などを入力
 

③基本設定のページで設定し、保存
 必要に応じて各項目を入力します。
 このとき、WebサイトのところにはブログのURLを設定しておきます。

④アプリIDを確認
 編集画面の上部にApp IDがあるので、控えておきます。

⑤以下のコードの≪App ID≫部分をアプリIDに書き換え
 表示するコメントの数はnum_posts=の後の数字を、表示幅を調整するにはwidth=の後の数字をそれぞれ調整してください。

                                                          
<div id='fb-root'/>
<script src='http://connect.facebook.net/ja_JP/all.js#appId=≪App ID≫&amp;xfbml=1'/>
<fb:comments expr:href='data:post.url' num_posts='10' width='600'/> 
                                                          

⑥BloggerのHTML編集画面を開き、ウィジェットのテンプレートの展開にチェック

⑦<b:includable id='comments' var='post'>」を検索して、そのすぐ後に⑤で書き換えたコードを貼り付け
※何かあったときのために、ソースコードはバックアップを取っておきましょう。

⑧プレビュー画面で確認し、問題なければ完了


なお、本来はFacebookのコメントシステムのページにアクセスして作成したほうがよいのですが、いまいち設定がうまくいかなかったので他のサイトで利用している例を参考に設定しました。Webコーディングに強い方はコメントシステムを使ったほうがよいのでしょう。



関連URL)