Movable TypeやWordPressのメインページ・アーカイブページにFacebookのコメント欄を表示する

Movable TypeやWordPressのメインページ・アーカイブページにFacebookのコメント欄を表示する

Posted at March 28,2011 1:55 AM
Tag:[Comment, Facebook, MovableType, WordPress]

Movable TypeやWordPressのメインページやアーカイブページにFacebookのコメント欄を表示するカスタマイズです。

Movable TypeやWordPressにFacebookのコメント欄を表示する」ではブログ記事ページ・個別記事ページなど、1ページに1記事の場合の設定方法を紹介しましたが、1ページに複数の記事が表示されるトップページやアーカイブページにも記事別に表示することが可能です。

1.概要

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

メインページやアーカイブページなど、Facebookコメントボックスを記事単位に表示します(①)。投稿コメントはFacebookのウォールにも反映され、コメントにはそれぞれの記事タイトルが表示されます(②)。

イメージ

2.サンプル

サンプルは当サイトのトップページです。複数の記事に対しFacebookコメントが表示されます。

サンプル1

それぞれの記事にコメントしたところです。同じ顔ばかりで気持ち悪いのは気にしないでください。

サンプル2

下は、上の画面のそれぞれの投稿コメントがFacebookに表示されたところです。各コメントに異なる記事タイトルが表示されています。

サンプル3

3.カスタマイズ

Movable TypeやWordPressにFacebookのコメント欄を表示する」の3項・4項・5項の作業を行ったあと、各コードを次のように設定してください。例はMovable Typeですが、WordPressも同じです。

まず、head要素に以下の内容を設定します。「xxxxxxxxxxxxxxx」の部分はそのまま設定しないように注意してください。

<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>

Movable Typeでは次のようにMTEntriesタグ内部にfb:commentsタグを設定します。

<mt:Entries>
…中略…
<fb:comments href="<$mt:EntryPermalink$>" num_posts="5" width="470"></fb:comments>
…中略…
<mt:Entries>

WordPress 3.xのTwentytenテーマであれば、loop.phpのwhile文の中にfb:commentsタグを設定します。

<?php while ( have_posts() ) : the_post(); ?>
…中略…
<fb:comments href="<?php the_permalink(); ?>" num_posts="5" width="470"></fb:comments>
…中略…
<?php endwhile; // End the loop. Whew. ?>
関連記事
zenback
人気エントリー
トラックバックURL


コメント

facebookをはじめたばかりなのですが、とてもわかりやすく解説していただきありがとうございます!近々コメント欄に入れてみます^^

[1] Posted by 個別指導塾成績アップゼミ : April 9, 2011 6:17 PM

>個別指導塾成績アップゼミさん
こんばんは。
記事参照&コメントありがとうございました。
色々試してみてください。
ではでは!

[2] Posted by yujiro logo : April 10, 2011 2:18 AM
コメントする
greeting

*必須

*必須(非表示)


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

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

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

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