※「こうやったらできた」という話で、細かいことは理解してない。(∀｀*ゞ)ﾃﾍｯ
1. Facebook アプリを作成
「(ﾟДﾟ)ﾊｧ?」という感じがするかもだが、コメント設置のためにグッとこらえて新規アプリを作成する。
まずは Facebook の開発者向けページに行き、以下のボタンをクリック。
次の画面でアプリ名を入力。
今回はブログ名そのまま（Fascinating）にした。
Namespace は空のままにして「続行」をクリック。
セキュリティチェックに答えて「送信」。
以下の画面が出てくるので…
- App ID をメモる（このページにくればいつでも確認できる）
- 「アプリのドメイン」として blogspot.com を指定（独自ドメインではない場合）
- コメントを設置するサイトの URL を記述
2. コメントコードを準備
以下のページに行き…
「ブログの URL」「表示幅」を指定する。
「Color Scheme」には、設置ブログの色の系統（明るい or 暗い）を指定する。
本ブログは黒背景なので、「dark」を選択。
最後に「Get Code」をクリック。
「HTML5」で大丈夫なのだが、このコードがそのまま使えるというかというと、ちょっと修正が必要。
- 個別記事にコメント欄が表示されるよう、条件設定を追記
- コード中の「"」「&」「'」を、それぞれ「"」「&」「'」に置き換える
- 記事毎に別々のコメント欄になるように「expr:」記述を追記
<b:if cond='data:blog.pageType == "item"'>
<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 = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=0123456789";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</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 を設定する。
これにより、コメント欄が「モデレータビュー」となり、右上に「設定」が表示されるようになる。
ネタ元：
