小粋空間  -  a cheap joke and a play on words site

Movable TypeやWordPressにFacebookのコメント欄を表示する

Movable TypeやWordPressなどのブログにFacebookのコメント欄を表示するカスタマイズを紹介します。コメント欄の表示にはFacebookのソーシャルプラグイン「Comments」を利用します。

１．概要

イメージを下図に示します。

ブログ記事ページに表示したコメント欄からコメントを投稿すれば、即座にブログ記事ページに投稿コメントが反映されます（①）。投稿コメントはFacebookのウォールにも反映されます（②）。Facebookに表示されたブログ記事のコメントに返信すれば、返信がFacebookとブログ記事の両方に反映されます（③）。

２．動作例

実際の動作例を示します。

ブログ記事に次のようなコメント欄を表示することができます。

投稿コメントは次のように表示されます。「返信」をクリックして投稿すればコメントがインデント表示されます。

ブログ記事ページのコメントはFacebookにも反映されます。投稿したブログ記事タイトルも表示されます。

このようにFacebook上で返信することもできます。

Facebook上の返信コメントはブログ記事ページに反映されます。

３．アプリIDの取得

まず、「Create an App」のページにアクセスし、コメント欄を利用するサイト名とURLを入力（http://で開始し、末尾は"/"または"?"で終了すること）します。設定したら「create app」をクリック。

セキュリティコードを入力して「送信」をクリック。

成功したら次のような画面になります。

４．ソーシャルプラグイン「Comments」の設定

「Social Plugins」のページで「Comments」をクリック。

次の画面で以下を設定し、「Get Code」をクリック。設定フォームに入力するとフォーム下にプレビューが表示されます。

• URL to comment on：コメント欄を表示するURL。とりあえずブログのURLを設定して後で変更します。
• Number of posts：デフォルトの表示コメント数
• Width：コメント欄の幅

「Commentsのプラグインコード:」をコピーします。モザイク部分に１項で取得したアプリIDが設定されていることを確認してください。設定されていない場合は取得したアプリIDと置き換えてください。

５．プラグインコードの修正

プラグインコードを次のように変更します。「www.koikikukan.com」の部分は当サイトの例なので、利用するドメインに適宜読み替えてください。

変更前（赤字は変更対象）

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=xxxxxxxxxxxxxxx&amp;xfbml=1"></script>
<fb:comments href="www.koikikukan.com" num_posts="5" width="470"></fb:comments>

変更後（Movable Typeの場合。青字は変更後の値）

<div id="fb-root"></div>
<script src="http://connect.facebook.net/ja_JP/all.js#appId=xxxxxxxxxxxxxxx&amp;xfbml=1"></script>
<fb:comments href="<$mt:EntryPermalink$>" num_posts="5" width="470"></fb:comments>

変更後（WordPressの場合。青字は変更後の値）

<div id="fb-root"></div>
<script src="http://connect.facebook.net/ja_JP/all.js#appId=xxxxxxxxxxxxxxx&amp;xfbml=1"></script>
<fb:comments href="<?php the_permalink(); ?>" num_posts="5" width="470"></fb:comments>

６．テンプレートの修正

４項で修正したプラグインコードをMovable TypeまたはWordPressの記事ページ出力用のテンプレートに埋め込みます。

Movable Typeでスタティックパブリッシング（静的生成）の場合はブログの再構築を行ってください。

以上です。