ワードプレス(WP)のコメント欄をスムーズにFacebookコメントに移行する

すでにブログを運営しており、今までの記事では従来のコメントシステム、新しい記事からFacebookコメントを利用する方法をご紹介します。

以前はコメントやトラックバックもSEO的に有利に働いていたのですが、スパムの影響で検索エンジンもそれほど評価をしなくなりました。 先月始まった新サービス「はてなブログ」でも、「ブログはコミュニケーションツール(フロー)よりもストックの役割」と、 トラックバック機能が実装されないのが話題となりました。

それでは、Facebookコメントを導入していきます。

スポンサーリンク

WPのコメント機能をオフにする

まず 「設定→ディスカッション→投稿のデフォルト設定」の3つのチェックを外し、WPのコメント機能をオフにします。

  • この投稿に含まれるすべてのリンクへの通知を試みる
  • 他のブログからの通知 (ピンバック・トラックバック) を受け付ける
  • 新しい投稿へのコメントを許可する

これらは各投稿の設定が優先されるため、過去記事でのコメントシステムは有効のまま、新しい記事からオフになります。テストで新しい記事を作成しプレビューしてみて、コメント欄が表示されないのを確認してみましょう。

Facebookコメントの導入

Facebook Comments for WordPressなどの導入プラグインも見つかったのですが、今までのコメント欄の後ろに表示させたいので、自力で導入します。

Facebook公式 からコードを取得。私はHTML5のコードにしました。 もしFacebookアプリの設定がまだの方は、ワードプレス(WP)に各SNSのブックマークボタンを導入するをご覧ください。

個々の記事ページ毎にコメントを集計するので、URL to comment onには仮のアドレスを入力しておき、後で<?php the_permalink(); ?>に変更します。

HTML5の場合、2ヶ所のテンプレートにコードを追加します。一つ目は<body>のすぐ後にJavaScript SDKを記述します。

テーマによって場所が異なると思いますが、当ブログの場合(Twenty Ten)は、header.phpに<body>があります。

JavaScript SDKを<body>のすぐ後に追加(あなたのappIdに変更してください)
<body <?php body_class(); ?>>
<script type="text/javascript">// <![CDATA[
(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>

次に、FacebookコメントをWP標準のコメント欄のすぐ下に表示させます。過去記事にはWPとFacebookのコメント欄が2つ並び、今後はFacebookだけが表示されます。

先ほど仮に入力したアドレスを<?php the_permalink(); ?>に変更し、私の場合は装飾の為にdiv要素とh3タグも追加しました。

追加したテンプレート loop-single.php loop-page.php
(<?php comments_template( ”, true ); ?>のすぐ後に追加)
<?php comments_template( '', true ); ?>

<div id="respond">
<h3 id="reply-title">Facebookコメント</h3>
<div class="fb-comments" data-href="<?php the_permalink(); ?>" data-num-posts="2" data-width="570"></div>
</div><!-- #respond -->

以上で、Facebookコメントの導入は終了です。もし過去記事のコメントや入力フォームも全て非表示にして、完全にFacebookコメントに切り替えたい場合は、最後のテンプレートの<?php comments_template( ”, true ); ?>を削除すればOKです。

 

 

スポンサーリンク