Archive for 7月 12th, 2012

12 7月wordpressの各記事にFacebookのコメント欄を設置挿入する覚えがき。

 

yahoonewsをはじめ、最近いろいろなサイトを見ると、記事の下のコメント欄にFacebookのコメント欄を引っ付けているサイトを多く見るようになりました。

↑こんな奴です。

ワードプレスなどのblogシステムにはもともとコメントシステムがありますが、時代の流れは自前のコメントシステムではなくFacebookやTwitterの「ソーシャルプラグイン」と呼ばれるこういったプラグインをつける方向です。

「ソーシャルプラグイン」をつけることにはどんなメリットがあるのでしょうか?

一番に考えられるのは、「広がり」です。
Facebookのソーシャルプラグインのコメント欄にされたコメントは、そのブログの記事内に表示される他、コメントした本人と友達のFacebookのニュースフィードにblog記事のリンクと共に表示されます。

あとはSNSの特徴通り、いいねやシェアを繰り返し記事のリンクが拡散されて行きます。
と言うことで、Facebookのコメント欄をワードプレスの各記事毎に設置する方法です。
まずは下のリンクから「Facebookソーシャルプラグイン」のページに行きます。
http://developers.facebook.com/docs/plugins/

ここで赤枠のコメントをクリック

 

 

 

下の画面が表示されたら「width」でコメント欄の左右のサイズを調整します。


「http://example.com」は後ほどwordpressのタグを挿入するのでそのままでOKです。

 

最後に「Get Code」ボタンをポチッとな!
※初めて「ソーシャルプラグイン」を使う場合はFacebookのアプリケーションIDが必要です。
アプリケーションIDの取得方法は下の「iFrame版 Facebookページ作成方法(最新版 仕様変更対応)」をご覧ください。
ワードプレスに挿入されるコードが表示されました。
プラグインのコードには「HTML5」「XFBML」のどちらかが使用できます。
今回は簡単なHTML5で設置します。

 

※HTML5はIE9以上・googlechrome・Firefoxなど対応ブラウザ出なければ表示されません。

まずは指示通り、上のテキストエリアのソースを<body>タグのすぐ後ろに挿入します。
ワードプレスのテーマの場合、多くのテーマでは「header.php」内を探してください。

次に「プラグインを表示したい場所にプラグインのコードを配置します」のコードをコピペします。

ここでみそですが、図の赤枠部分に記事のURLを取得するコード

<?php the_permalink(); ?>

を挿入します。
後はコメントを埋め込みたい部分にソースをペーストして終了です。

一般的にはindex.phpやpage.phpのワードプレスのデフォルトコメント欄の

<?php comment_form(); ?>

を探して差し替えるのが簡単でしょうか。

これで普通のワードプレスもソーシャルブログに早変わりです。