フェイスブックのコメントと「いいね」をワードプレスにつける

フェイスブックのコメントと「いいね」をワードプレスにプラグインを使わないで付けてみましたので紹介します。普通、フェイスブックのコメントや「いいね」のコードを取得すると、 fb:like や fb:comments のタグ部分が、XHTML1.0ではW3Cでエラーになります。このエラーを回避しました。

フェイスブックのコメントと「いいね」の設置方法

フェイスブック楽天のコメントと「いいね」ボタン(likeボタン)はフェイスブックのページだけでなく、普通のウェブページやブログにも付けることができます。

WordPressは自分で設置できるブログなので元々コメント蘭がありますが、フェイスブックの「いいね」を付ける手間でコメントも付けられるので、両方共付けてみました。

普通はプラグインを使ってコメントや「いいね」を表示させるのですが、プラグインを使いたくなかったので、スクリプトを直接テーマのPHPファイルに記述しました。

コメントや「いいね」情報をニュースフィードに表示させます(app_id)

app_id か admins 情報が無いと「いいね」等をニュースフィードに表示させることはできません。ニュースフィードに表示させるかどうかは、とても重要なことです。

フェイスブックのニュースフィードにコメント等を表示させるには、ウエブサイトの所有者のフェイスブックアカウント情報等が必要です。このアカウント情報を使ってウェブサイトのID情報(app_id)を取得します。これはフェイスブックアカウント情報(admins)とウェブサイトのID情報(app_id)を紐付けすることです。

app_idを取得する方法

まず、フェイスブックのデベロッパーズサイトのアプリ作成画面にアクセスします。この画面で、サイト名とURLを入力します。セキュリティチェックが済んだら、「Create an App」のアプリIDの作成完了画面が表示されます。このアプリID(app_id)をメモしておきます。

フェイスブックのコメント等のW3Cエラーをできるだけ回避して作成

フェイスブックのプラグイン作成画面で、普通の方法でフェイスブックのコメントや「いいね」のコードを取得すると、 fb:like や fb:comments のタグ部分が、XHTML1.0ではW3C Markup Validation Service のチェックでエラーになります。

このエラーを回避するには、Javascriptでこれらのタグを他のタグ(div等)に置き換えをしてやります。フェイスブックのコメントと「いいね」ボタンのワードプレスでのコード例は次のようになりました。スクリプトは一部にPHPを使っています。jqueryも使っています。

実際のスクリプト例

<meta property="og:title" content="<?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?>" />
<meta property="og:image" content="http://hogehoge.jp/image.jpg" />
<meta property="fb:app_id" content="123456789012345" />
<meta property="fb:admins" content="123451234567890" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script type="text/javascript"><!--
jQuery(document).ready(function($){
  var fbtag = document.createElement('fb:like');
    fbtag.setAttribute("href","<?php the_permalink(); ?>");
    fbtag.setAttribute("width", "650");
    document.getElementById("facebook-like").appendChild(fbtag);
  var fbtag = document.createElement('fb:comments');
    fbtag.setAttribute("href","<?php the_permalink(); ?>");
    fbtag.setAttribute("width", "650");
    document.getElementById("facebook-comments").appendChild(fbtag);
});
--></script>

上記のメタタグの所でW3Cエラーになりますが、少なくとも画像とアプリケーションIDのメタタグは必要でしょう。他のメタタグも必要なら追加してください。fb:admins 情報は無くてもかまいません。

ワードプレスではURL部分をパーマリンク「<?php the_permalink(); ?>」にしています。そうすれば、すべての記事で同じコードを使えます。上記のコードをヘッドタグ内に設置します。ワードプレスのテーマの classic では header.php 内に記述します。

「いいね」のlayout:standard とshow_faces:true とsend:true はデフォルト設定なので無くてもかまいません。

ボディタグ内のコメントと「いいね」ボタンの設置場所には次のコードを設置します。ワードプレスのテーマの classic では、index.php 内に記述します。記事を表示したすぐ後の辺りです。

<?php $fb_count++; ?>
<?php if ($fb_count==1) {
print <<<EOD
<div class="np">
<script type="text/javascript" src="http://connect.facebook.net/ja_JP/all.js#xfbml=1"></script>
<div id="facebook-like"></div>
<div id="facebook-comments"></div>
</div>
EOD;
} ?>

コメントと「いいね」の表示部に使う div タグ内の id はページ内で一度しか使えないので、記事部分がページ内にいくつも表示される場合は、最初の記事の後のみに表示されるようにしました。記事が１つだけの単独ページでも問題ありません。

class="np" は印刷で表示しないようにする為のものです。また、コメントと「いいね」を英語表示にする場合は、ja_JP の所を en_US とします。

OGPをhtmlタグで指定します

OGP(Open Graph Protocol)をhtmlタグで指定します。htmlタグに次の記述を追加します。ワードプレスでは、header.php の中に記述します。「xmlns:og="http://ogp.me/ns#" xmlns:fb="http://ogp.me/ns/fb#"」XHTMLでは次のようになります。

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://ogp.me/ns/fb#" xml:lang="ja" lang="ja">

うまく設定されているかどうかの確認

フェイスブックが用意しているデバッガーを使ってうまく設定されているかどうか確認しましょう。デバッガーの使い方は、URLをフォームに記入して「デバッグ」をクリックします。

この方法でコメントと「いいね」をフェイスブックのニュースフィードにうまく表示させることができました。また、W3C Markup Validation Serviceのチェックでエラーを最小限にして表示させることができました。