WordPressで記事ごとに機能するfacebookコメントプラグインの設置方法

公開日:2013年9月6日 

WordPressで記事ごとに機能するfacebookコメントプラグインの設置方法

facebookプラグインは様々な機能が簡単に載せられて便利なのですが、コメントプラグインについては与えられるコードをそのまま使うと、どの記事のコメントも同じになるというおかしな事になってしまします。そうならないためにphpで現在のURLを取得しましょう。


facebookコメントプラグインを使っているブログをよく見かけますが、たまにどのページでも同じコメントになっているブログを見つけます。

fb-comment-pi1

上記の場合、コメントしている人は、9月5日の記事に対してコメントしているようですが、別の記事でも同じコメントが付いているので、当事者以外の人が見たら「この人トンチンカンな事言ってるわー…」と思ってしまいます。

本記事はそうならないための方法です。

ちなみに本記事のコードは、URLの取得にPHPを使いますので、ウィジェットでは使えません。下記のコードはphpファイルに追加してください。
また、phpもWordPressタグなので、WordPress以外では使えません。

毎度のことですがphpファイルをいじる前には必ずバックアップをとりましょう。今回の場合はファイルをコピーしておくだけです。nantoka.phpを複製してnantoka_copy.phpのようなファイルができますので、何か不具合があったらファイルをリネームして差し替えるだけで元に戻ります。

facebookソーシャルプラグイン

既に「いいねボタン」や「コメントプラグイン」を設置している人はこの作業は不要です。下の「PHPファイルに貼るコード」へ行ってください。

逆に全く初めての方は「開発者登録」と「facebookアプリID発行」を済ませてください。
ただの事務手続きです。難しくないです。

Facebookアプリの開発者登録とアプリ作成手順

このページの説明がわかりやすいですし、コメント欄も有益なのでご確認を。

これらの作業が終わりましたら、Social Pluginsへアクセス。

fb-comment-pi2

デザインがポップになりました

ここのCommentsをクリックするとコードを発行するページにいきます。英語で説明が書いてありますが、何も気にせずに【Get Code】をクリックします。

fb-comment-pi3

「このスクリプトは次のアプリのアプリIDを使用します」で作成したアプリを選択してください。
ここで必要なのは、上の部分だけです。まずこれをお使いのテーマファイルの下図のようにfooter.phpの</body>の直前にでも追加してください。

fb-comment-pi4

これは「Twenty Ten」のfooter.phpへの設置例です

お使いのテーマによりソースコードが違うと思いますが、</body>の直前なら問題ないはずです。

追記:コード発行の際に「Include the JavaScript SDK on your page once, ideally right after the opening tag.」と説明があるように<body>の直後が理想のようです。でも、個人的に「急がないJavaScript」は</body>直前に置きたい派です。

PHPファイルに貼るコード

ここで使うコードはこれだけです。Social Pluginsページの【Get Code】で発行されるコードは不要です。

解説&カスタマイズ

<?php the_permalink(); ?>
これで現在開いているページのURLを取得します。前述の「どのページでも同じコメントになってしまう」現象は、この部分が皆同じURLになってしまっているためです。Social Pluginsページで発行されるコードもそのような仕様になってます。

data-width=”500″
幅です。適宜調整してください。

data-num-posts=”10″
コメントの表示数を設定します。

data-colorscheme=”dark”
上のコードには含まれてませんが、これを追加するとコメント欄が黒くなります。下にダークバージョンのコードを置いときます。

貼り付けるファイルと場所

このコードは、phpファイルならどこに貼り付けてもいいのですが、コメント機能なのでお使いのテーマファイルの「comments.php」でいいと思います。

fb-comment-pi5

これは「Twenty Ten」のcomments.phpへの設置例です

phpの}とか;とか)の間に入れてしまったりするとエラーになりますので、phpに不慣れな方は、<div id=”comments”>の直後でいいと思います。

ノーマルのコメント機能を取ることもできますが、リソースの都合で説明は割愛します。

実装完了

fb-comment-pi6
fb-comment-pi7

このように記事ごとにコメントが付きます。これで「あの人トンチンカンなこと言ってるわー…」という現象は防ぐことができます。facebookコメントプラグインの設置は以上です。

WordPressに関する書籍は何冊か持ってますが、個人的にはこの本が一番お気に入りです。