2013.02.10
facebook

コメント欄をフェイスブックのコメントにする WP

ワードプレスのプラグインを使うのではなく、Facebook開発者ページで用意されたタグを挿入する方法です。
簡単にコメント欄を設置できます。
こんな感じです↓

設置方法

こちら(Facebook開発者ページ)をクリックすると、下の画面が出てきます。(少し下へスクロールするか画面の下のほうです。)

  • 後で変更するので①にはとりあえず適当なURLを入れる。
  • ②はコメントフォームの幅を設定できます。ピクセルです。
  • ③は何件のコメントを表示するかです。
  • ④は表示のデザイン(色)を選べます。lightかDark。
  • ①~④が問題なくできたら⑤でコードを取得する

するとポップアップウィンドウが出てきます。

HTML5を選択すると、上の画像のように2種類のコードが表示されます。

まず上のコードは下記のようになっています。

<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=あなたのアプリID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

6行目のあなたのアプリIDの部分にはすでの数字が入っていますので変更する必要ありません。
このコードをコメント欄を表示したいテンプレートのbodyタグの直後にコピペします。
各記事にコメント欄を表示する場合は、single.phpのbodyタグの直後です。

次に2つ目のコード

<div class="fb-comments" data-href="http://example.com" data-width="470" data-num-posts="10"></div>

http://example.comは先ほど適当に入力したままだったので

<?php the_permalink(); ?>

に変更します。

すると変更後のコードは下記のように。

<div class="fb-comments" data-href="<?php the_permalink(); ?>" data-width="470" data-num-posts="10"></div>

このコードをテンプレートのコメント欄を表示したい部分にコピペします。
各記事にコメント欄を表示したい場合は、single.phpの表示したい部分にですね。

Attention!!

両方のコードを同じテンプレートに記述しないと表示されないので注意してくださいね!
各記事にコメント欄を表示したいのなら両方のコードをsingle.phpの該当部分にコピペです。

あまりに簡単に設置できたので、ちょっと前までは当ブログにもこのFacebookのコメントフォームを設置していました。
このコメントフォームは本当に簡単に設置できてしまうので良いと思います。

関連する記事

コメント & トラックバック

コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP