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

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

Posted at March 11,2011 1:55 AM
Tag:[Comment, Facebook, Plugin]

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

1.概要

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

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

イメージ

2.動作例

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

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

コメント欄

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

コメント欄

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

コメント欄

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

コメント欄

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

コメント欄

3.アプリIDの取得

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

Create an App

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

セキュリティコード

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

アプリID

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

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

「Social Plugins」のページ

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

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

「Comments」のページ

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

「Commentsのプラグインコード:」

5.プラグインコードの修正

プラグインコードを次のように変更します。「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>

6.テンプレートの修正

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

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

以上です。

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

facebookとブログの連携 from ところによりエンジニア
ということで先日重い腰を挙げて復活したfacebookのアカウントですが、今のところブログの方が有用性が高いため全然アップデートする気にならないのですが、... [続きを読む]

Tracked on April 28, 2011 5:14 AM
コメント

jp_JPでは動かないようですね。
2011.3.21現在、
/* "jp_JP" is not a valid locale. */
とのことです。

[1] Posted by Hiroky logo : March 21, 2011 5:05 PM

連投済みません、間違えてました。ja_JPですね。そりゃ動かんわ。

[2] Posted by Hiroky logo : March 21, 2011 6:34 PM

>Hirokyさん
こんばんは。
ご連絡の件、解決されたようですね。
ではでは!

[3] Posted by yujiro logo : March 24, 2011 11:26 PM

初めまして
とても参考になり感謝致します

ところでコメントのプラグインですが、黒い背景のブログページに付けるとコメント本文が黒くつぶれて読めなくなってしまいます
style属性を変えることは出来そうにないし、ブログの背景を白っぽいものに変えるしか方法はないでしょうか?

フェイスブックの開発者ディスカッションに日本語で(笑)投稿してみましたが回答の期待はなさそうなのでこちらに書き込みました

プラグインの設定方法などご存じでしたら教えて頂けると幸いです
よろしくお願い致します

[4] Posted by Youcough logo : April 9, 2011 3:43 PM

>Youcoughさん
こんばんは。
ご質問の件について、私が調べた限りでは、今のところ設定方法はないようです。
以下に顛末をエントリーしましたので参考になれば幸いです。

http://www.koikikukan.com/archives/2011/04/10-015555.php

それではよろしくお願い致します。

[5] Posted by yujiro logo : April 10, 2011 2:12 AM

初めまして。こんばんは。
ワードプレス初心者ですが、とてもわかりやすく説明してあるのでフェイスブックのコメントを表示することができました。
どうもありがとうございます。

[6] Posted by larutan : April 15, 2011 7:48 PM

>larutanさん
こんばんは。
コメントありがとうございます。
お役に立てたようでなによりです。
ではでは!

[7] Posted by yujiro logo : April 16, 2011 1:28 AM

このプラグインは使えそうです。ありがとうございます。

[8] Posted by y_yamanouchi logo : July 6, 2011 2:19 PM

はじめまして、こんにちは。
初心者ですみません。
MovebleTypeで<$mt:EntryPermalink$>他MTタグを使うと、『テンプレート「********」の再構築中にエラーが発生しました: テンプレートタグMTIncludeでエラーが発生しました: error in module shere: テンプレートタグMTEntryPermalinkでエラーが発生しました: MTEntryPermalinkをコンテキスト外で利用しようとしています。MTEntriesコンテナタグの外部で使っていませんか? 』とエラーが出ます。
何が原因なのでしょうか?
よろしくお願いいたします。

[9] Posted by hayashi : July 19, 2011 7:09 PM

>hayashiさん
こんばんは。
ご質問の件ですが、エラーメッセージのとおり、MTEntryPermalinkタグが使えない場所でMTEntryPermalinkタグを利用しているのが原因と思われます。
具体的には、インデックステンプレートまたはアーカイブテンプレートで、MTEntriesタグで囲っていない場所でMTEntryPermalinkタグを記述するとエラーになります。
MTIncludeタグを使ってテンプレートを呼び出し、呼び出し先でMTEntryPermalinkを使っている場合は、呼び出し元のテンプレートがMTEntriesタグを使っていない(あるいはMTIncludeタグをMTEntriesたぐで囲っていない)可能性があります。
それではよろしくお願い致します。

[10] Posted by yujiro logo : July 21, 2011 9:59 PM

うまくいきました!ありがとうございましたm(_ _)m

[11] Posted by hayashi : July 22, 2011 5:44 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)