投稿日：2014年11月16日｜最終更新日: 2015年7月13日

WordPressにfacebookコメントを設置

facebook 制作

wordpressは、もともとコメント機能を持っています。
しかし、通常のコメント機能ではなく、facebookのコメントを、ホームページに設置することもできます。

完成イメージ

準備
Facebookコメントを使うメリット
手順

準備

まだ開発者登録していない場合は、先にデベロッパー登録する必要があります。
→Facebookデベロッパーに登録する

Facebookコメントを使うメリット

コメントをfacebookにすると、以下のようなメリットがあります。

実名なので荒らされにくい
コメントした人のウォールに流れれば、アクセスアップが狙える
読者との交流が図りやすい
手軽にコメントできる雰囲気のデザイン

手順

①デベロッパーページを表示します。　
→Facebook開発者ページ

②トップのナビゲーションにある「Docs」をクリックして開きます。
左サイドにある「sharing」→「ソーシャルプランニング」→「Comments」の順に開きます。

③必要な項目を入力して「GetCode」ボタンをクリックします。

URL to comment on：ホームページのURL。
Width：facebookコメントの横幅。
Number of Posts：表示するコメントの数。

④プラグインコードが表示されます。
HTML5をクリックして、上下2つのコードをコピーします。

⑤上部の１つ目のコードを、bodyタグのすぐ近くに設置します。
ファイルは、index.phpまたはheader.phpです。

<body <?php body_class(); ?>>
<div id="fb-root"></div>
<script>(function(d, s, id) {

～中略～

}(document, 'script', 'facebook-jssdk'));</script>

⑥下部の2つ目のコードを、WordPress用に修正します。
そのままコピペすると「http://example.com」に対してのコメントになってしまいます。
hrefへ、記事のURLを指定しましょう。
WordPressで記事のURLを指定するには<?php the_permalink(); ?>を使います。

変更前

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

変更後

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

⑦下部の2つ目のコードを、コメントを表示した居場所に記述します。
<?php comments_template( ”, true ); ?>というコードデフォルトのコメント欄を表示しています。
これを、先ほどの⑥のコードに置き換えます。

変更前

<?php comments_template( '', true ); ?>

変更後

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

⑧ホームページに以下のように表示されれば完成です。

トラックバック用のURL

プロフィール

名前：イワサキ　ユウタ職業：システムエンジニア、ウェブマスター、フロントエンドエンジニア誕生：1986年生まれ出身：静岡県特技：ウッドベース略歴 20