2012-11-26_2310

FacebookコメントをWordPressに設置する際の注意点まとめ。

WordPressにFacebookコメントを設置したのだが、上手く動かなかった。

トラブルの現象は、Facebookのコメントがすべての記事で共有されてしまい、まるでブログ全体にコメントを入力してしまっている状態になった。

当然、その記事にコメントされた内容は、その記事の中で管理したい。

また、少しWordPressの知識がないとFacebookコメントの設置に困ることがあるため、そのあたりも解説していきたい。

 

まず、Facebookコメントの設置方法を確認する。

Facebookコメントの設置手順を確認する。

全体をまとめてくれている、@isloopさんの次の記事が参考になる。

参考記事:MovableTypeとWordpressにFacebookコメントを設置する方法 和洋風KAI

 

手順を要約すると、以下になる。

手順1.Facebookにブログを登録する。

Facebookコメントを設置したいブログをアプリ登録する。
手順2.Facebookコメントのコードを取得する。

手順3.手順2で取得した、コードを修正する。

手順4.WordPressへ組み込む。

手順1、手順2はこの記事では説明しないので、上記の参考記事を確認してほしい。。

僕がトラぶった、手順3と手順4を重点的に説明したい。

 

Facebookコメントのプラグインコードを修正する。

今回のトラブルの原因は、この設定が抜けていたために、Facebookコメントの動作がおかしかった。

Facebookコメントのプラグインコードを取得すると次の画面になる。

 

取得した、Facebookコメントのプラグインコードはそのままでは使えない。

②のコードを次のように変更する。

<変更前> data-href="http://example.com"

<変更後> data-href="<?php the_permalink(); ?>"

 

WordPressで用意されている、関数:the_permalink() は表示されている記事のURLを出力してくれる関数になる。

例えば、この記事ならば、ブラウザで表示されるときは、the_permalink() から http://iaowk.net/201211/facebook_comments.html へ置き換えられて表示される。

これで、ブログの記事ごとにFacebookコメントが表示され、機能するようになる。

 

プラグインコードをWordPressのテンプレートへ組み込む。

WordPressのテンプレートへ組み込むのだが、これも慣れていないと苦労する・・・(^_^;)。

次に、Facebookコードと対応するWordpressのテンプレートを記載しておきます。

僕はWordPressのproSyleというテーマを使っているので、個別記事の出力は、post-single.php で行っている。(デフォルトテーマでは、shingle.phpになる。)

Facebookコメントは記事の一番最後、タグの上に配置したいので、タグを出力している関数 the_tags よりも上に配置している。

次が実際に表示されたときの配置図。

Facebookコメントが表示されたなら、テスト的にコメントに入力してみる。

Facebookの自分のウォール(タイムライン)にコメントが表示されたらOKだ。