フェイスブックの「いいね」をWebページにつける(W3Cエラーを回避)
フェイスブックの「いいね」ボタンをWebページに付けてみました。しかし、HTML4やXHTMLなどではW3C Markup Validation Service のチェックで文法エラーとなるので、Javascriptを使って回避しました。HTML5ではエラーにはなりません。
フェイスブックの「いいね」ボタンの設置方法
フェイスブックの「いいね」ボタン(likeボタン)はフェイスブックのページだけでなく、普通の ウェブページ楽天 (ホームページ)にも付けることができます。
ウェブページの情報発信やアクセスアップに良さそうなので、早速ウェブページに付けてみました。ただ表示させるだけなら、やり方は簡単です。
フェイスブックの「いいね」ボタンの生成ページからコードを作成することができます。iframe版を作成してください。
ボディタグ内の「いいね」ボタンを表示したい位置に次のようなタグを貼り付けます。
<iframe src="//www.facebook.com/plugins/like.php?href=http//example.jp/&send=false&layout=standard&width=450&show_faces=true&action=like&colorscheme=light&font&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>
この方法だと、「いいね」をクリックしてもそのページとクリックした人のウォールページに表示されるだけで、フェイスブックのニュースフィードのページには表示されません。
何故ならこのタグ内には、そのページの情報以外のフェイスブックアカウントやその他の情報が何も無いからです。
「いいね」情報をニュースフィードに表示させる方法(app_idを取得)
ニュースフィードに表示させるには、ウエブサイトの所有者のフェイスブックアカウント情報などが必要です。このアカウント情報を使ってウェブサイトのID情報(app_id)を取得します。
これはフェイスブックアカウント情報とウェブサイトのID情報(app_id)を紐付けすることです。
app_idを取得してから、「いいね」ボタンのコードを作成します
フェイスブックの デベロッパーズサイトのアプリ作成画面にアクセスします。この画面で、サイト名とURLを入力します。セキュリティチェックが済んだら、「Create an App」のアプリIDの作成完了画面が表示されます。このアプリID(app_id)を念の為メモしておきます。
再び前記のフェイスブックの「いいね」ボタンの設置方法に戻って、「いいね」ボタンを作成します。この時、設置するウェブページのURLを入力すると、次のようなアプリID(app_id)が入ったコードが生成されます。これをウェブページの表示させたい位置にコピーと貼付けするだけです。
<iframe src="//www.facebook.com/plugins/like.php?app_id=123456789012345&href=http//example.jp/&send=false&layout=standard&width=450&show_faces=true&action=like&colorscheme=light&font&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>
このようにして作成した「いいね」はコメントも書けるようになっています。これは「いいね」をした人とその友達のニュースフィードに表示されます。
URL部分をPHPコマンドで汎用表示にします(PHPが使えるサイトのみ)
ワードプレスではURL部分をパーマリンク「<?php the_permalink(); ?>」にすれば、すべての記事で同じコードを使えますが、普通のウェブページではURLを個々に変更しなければなりません。
PHPが使えるサイトなら、URL部分をPHPコマンドで汎用表示にしてやればパーマリンクと同じように同一のコードが使えます。URL部分を次のようにしてやります。
<?php echo "http://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI']; ?>
$_SERVER['SERVER_NAME']部分はドメイン(www.example.jp等)を表しています。$_SERVER['REQUEST_URI']部分はそれより後のURL部(/***/example.php等)です。
フェイスブックの「いいね」ボタンのW3Cエラーを回避する方法
上記の方法では、allowTransparency="true" の部分で、XHTML1.0ではW3C Markup Validation Service のチェックでエラーになります。
このエラーを回避するには、allowTransparency="true" の部分を削除してやります。この部分はIE用で透過させるかどうかの設定です。これを削除すると、IEでは背景が白くなります。
そこで、フェイスブックの「いいね」ボタンのコード(タグ)は次のようになりました。
<iframe src="//www.facebook.com/plugins/like.php?app_id=123456789012345&href=<?php echo "http://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI']; ?>&send=false&layout=standard&width=450&show_faces=true&action=like&colorscheme=light&font&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" title="Like button">Like button</iframe>
上記以外に変更したところは、「title="Like button"」を追加したのと、インラインフレームタグ間に「Like button」を追加したことです。これはHTML文法に忠実にする為です。もし、英語ページ等で「いいね」の表示を強制的に英語の「Like」にするには、「like.php?」の後に「locale=en_US&」を追加します。
XHTMLでは最終的に「フェイスブックのコメントをWebページにつける」の記事のコメント部分を取り除いたものを使用しました。HTML5では下記のようにしました。
HTML5の場合(エラー無し)
HTML5用のスクリプトをHTML5で使用した場合はエラーとはなりません。この場合はそのままベージに貼りつけるだけです。ヘッドタグの中には次のように記述しました。app_idはメタタグで記述したので、下記のコードからは削除してあります。
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.6";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
ボディタグのいいねボタンを表示させる部分には、次のように記述しました。設置するページはPHPで取得しました。また、不要なコードは削除してあります。
<?php $rq_uri = preg_replace('/\?.*/','',$_SERVER['REQUEST_URI']); ?>
<div class="fb-like" data-href="<?php echo "http://".$_SERVER['SERVER_NAME'].$rq_uri; ?>" data-width="320"></div>
この上の行はパラメータ付きURLの場合、別ページと判断される問題を回避する為に必要です。つまり、パラメータ付のページで「いいね」されてもパラメータ無しの本来のページには「いいね」が付きません。そこで、正規表現を使って「?」以降のパラメータを取り除いています。
うまく設定されているかどうかの確認
フェイスブックが用意している デバッガーを使ってうまく設定されているかどうか確認しましょう。
デバッガーの使い方は、URLをフォームに記入して「デバッグ」をクリックします。簡単な警告は出ますが、問題無いはずです。何故なら正式なOGP(Open Graph Protocol)を設定していないのですから。
この方法で「いいね」情報をフェイスブックのニュースフィードにうまく表示させることができました。また、W3C Markup Validation Serviceのチェックでエラー無く表示させることができました。
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";