Fascinating: Blogger に Facebook のコメント欄を設置する

今度のブログでは Facebook のコメント欄を設置しようと思っていたのだが、そのまま使える情報が少なかったので、最新状況（2012/02/28現在）をメモ。
※「こうやったらできた」という話で、細かいことは理解してない。(∀｀*ゞ)ﾃﾍｯ

1. Facebook アプリを作成
「(ﾟДﾟ)ﾊｧ?」という感じがするかもだが、コメント設置のためにグッとこらえて新規アプリを作成する。

まずは Facebook の開発者向けページに行き、以下のボタンをクリック。

次の画面でアプリ名を入力。

今回はブログ名そのまま（Fascinating）にした。
Namespace は空のままにして「続行」をクリック。

セキュリティチェックに答えて「送信」。
以下の画面が出てくるので…

App ID をメモる（このページにくればいつでも確認できる）
「アプリのドメイン」として blogspot.com を指定（独自ドメインではない場合）
コメントを設置するサイトの URL を記述

これで、アプリ作成が完了。

2. コメントコードを準備
以下のページに行き…

https://developers.facebook.com/docs/reference/plugins/comments/

「ブログの URL」「表示幅」を指定する。
「Color Scheme」には、設置ブログの色の系統（明るい or 暗い）を指定する。
本ブログは黒背景なので、「dark」を選択。
最後に「Get Code」をクリック。

「HTML5」で大丈夫なのだが、このコードがそのまま使えるというかというと、ちょっと修正が必要。

個別記事にコメント欄が表示されるよう、条件設定を追記
コード中の「"」「&」「'」を、それぞれ「"」「&」「'」に置き換える
記事毎に別々のコメント欄になるように「expr:」記述を追記

修正すると、こんな感じになる。

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = &quot;//connect.facebook.net/ja_JP/all.js#xfbml=1&amp;appId=0123456789&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

<div class='fb-comments' data-colorscheme='dark' data-href='http://example.com/' data-num-posts='2' data-width='550' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id' ></div>
</b:if>

※この例でのブログ URL や App ID は適当。

3. デフォルトのコメント欄を無効化
「マイブログ」ページで「コメントの場所」の設定を「非表示」に変更すればＯＫ。

4. Facebook コメント欄を設置
テンプレートを編集して、準備したコードを挿入すれば完了。
ただ、編集の際に下記チェックボックスを選択するのをお忘れなく。

コードの挿入箇所はお好みでＯＫ。
当ブログでは以下にしている。

   <a name='comments'/>

    <!-- ここに準備コードを挿入しました -->

    <b:if cond='data:post.allowComments'>

これで、設置は完了。
コメントを投稿すると Facebook タイムラインにも反映されるはず。

5. 管理者モードの設定を追加
下記のコード内の「{YOUR_FACEBOOK_USER_ID}」と「{YOUR_APPLICATION_ID}」を適切な値に置き換えて、「<head>」の直下に挿入する。

  <meta content='{YOUR_FACEBOOK_USER_ID}' property='fb:admins'/>
  <meta content='{YOUR_APPLICATION_ID}' property='fb:app_id'/>

「{YOUR_APPLICATION_ID}」は１でメモした値。
「{YOUR_FACEBOOK_USER_ID}」は、自身の Facebook ページの URL に含まれる ID を設定する。
これにより、コメント欄が「モデレータビュー」となり、右上に「設定」が表示されるようになる。

ネタ元：

2012年2月29日水曜日

Blogger に Facebook のコメント欄を設置する