フェイスブックのコメントをWebページにつける(XFBML,OGPを使用)

フェイスブックの「コメント」と「いいね」を私の管理しているWebの全ページに付けてみました。W3C Markup Validation Service のエラーをJavascriptを使って回避しました。その後、フェイスブックの「コメント」は、ページの表示スピードと管理上の問題があるので使用していません。

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

フェイスブックのコメントと「いいね」ボタン(likeボタン)はフェイスブック楽天のページだけでなく、普通のウェブページ(ホームページ)にも付けることができます。ウェブページの情報発信やアクセスアップに良さそうなので、早速ウェブページに付けてみました。

全ページに付けるとなると、何百ページにもなります。それらの「コメント」や「いいね」をページ毎に管理してくれるようです。どのようなシステムになっているのでしょうか。フェイスブックの会員は実名なので、コメント荒らしのような人は少ないと思われます。効果があると良いのですが、どうでしょうか。

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

フェイスブックのニュースフィードに「コメント」等を表示させるには、ウエブサイトの所有者のフェイスブックアカウント情報等が必要です。このアカウント情報を使ってウェブサイトの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 のチェックでエラーになります。

エラー回避前のタグやスクリプト

ヘッドタグ内に記述するメタタグの例は次の通りです。

<meta property="og:image" content="https://example.com/hoge.jpg" />
<meta property="fb:app_id" content="123456789012345" />

ボディタグ内に記述するフェイスブックの「コメント」や「いいね」のコードの例です。

<script src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.6"></script>
<fb:like href="https://example.com/" layout="standard" show_faces="true" send="true" width="450"></fb:like>

<script src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.6"></script>
<fb:comments href="https://example.com/" width="500"></fb:comments>

エラーをできるだけ回避したタグやスクリプト

このエラーを回避するには、 fb:like や fb:comments のタグ部分をJavascriptで置き換えをしてやります。フェイスブックのコメントと「いいね」ボタンのスクリプトの例は次のようになりました。スクリプトは一部にPHPを使っています。jqueryも使っています。

<meta property="og:title" content="タイトルタグと同様な内容" />
<meta property="og:image" content="https://hogehoge.jp/image.jpg" />
<meta property="fb:app_id" content="123456789012345" />

<?php $rq_uri = preg_replace('/\?.*/', '', $_SERVER['REQUEST_URI']); ?>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1");</script>
<script type="text/javascript"><!--
jQuery(document).ready(function($){
var fbtag = document.createElement('fb:like');
fbtag.setAttribute("href","<?php echo "https://".$_SERVER['SERVER_NAME'].$rq_uri; ?>");
fbtag.setAttribute("width", "650");
document.getElementById("facebook-like").appendChild(fbtag);
var fbtag = document.createElement('fb:comments');
fbtag.setAttribute("href","<?php echo "https://".$_SERVER['SERVER_NAME'].$rq_uri; ?>");
fbtag.setAttribute("width", "650");
document.getElementById("facebook-comments").appendChild(fbtag);
});
--></script>

上記のメタタグの所でW3Cエラーになりますが、最低でもイメージ画像とapp_idのメタタグは必要でしょう。他のメタタグも必要なら追加してください。fb:admins 情報は必須ではありませんが追加してもかまいません。

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

「いいね」のlayout:standard とshow_faces:true とsend:true はデフォルト設定なら無くてもよいみたいです。

ボディタグ内の「コメント」と「いいね」ボタンの設置場所には次のコードを設置します。

<script type="text/javascript" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.6"></script>
<div id="facebook-like"></div>
<div id="facebook-comments"></div>

英語表示にする場合は、ja_JP の所を en_US とします。

パラメータ付きURLの場合は別ページと判断される問題

$_SERVER['REQUEST_URI']部分はURL部の後半(/***/example.php等)を表しています。この為、パラメータ付きURLの場合は別ページと判断される問題が起こります。つまり、パラメータ無しのページでは、コメントが付いていても、同じページのパラメータ付きの場合では、コメントの表示が無くなってしまったりします。

そこで、この部分を変更し正規表現を使って、次のように「?」以降のパラメータを取り除いたものを使います。

<?php $rq_uri = preg_replace('/\?.*/', '', $_SERVER['REQUEST_URI']); ?>
fbtag.setAttribute("href","<?php echo "https://".$_SERVER['SERVER_NAME'].$rq_uri; ?>");

OGPをhtmlタグで指定します

OGP(Open Graph Protocol)をhtmlタグで指定します。htmlタグに次の記述を追加します。「xmlns:og="https://ogp.me/ns#" xmlns:fb="https://ogp.me/ns/fb#"」XHTMLでは次のようになります。

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

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

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

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

JavaScript SDK を all.js からsdk.js に変更

JavaScript SDK の内容が all.js からsdk.js に変更になったようです。また、バージョン情報も追加しました。2015年4月末までに変更が必要です。

js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";

これを次のように変更しました。

js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.6";