フェイスブックの「いいね」をWebページにつける(W3Cエラーを回避)
フェイスブックの「いいね」ボタンをWebページに付けてみました。しかし、W3C Markup Validation Service のチェックでエラーとなってしまいます。これを回避しましたので紹介します。
フェイスブックの「いいね」ボタンの設置方法
フェイスブックの「いいね」ボタン(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="http://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>
上記以外に変更したところは、「//www.facebook.com」の前に「http:」を追加しました。また、「title="Like button"」を追加したのと、インラインフレームタグ間に「Like button」を追加したことです。これはHTML文法に忠実にする為です。もし、英語ページ等で「いいね」の表示を強制的に英語の「Like」にするには、「like.php?」の後に「locale=en_US&」を追加します。
うまく設定されているかどうかの確認
フェイスブックが用意している デバッガーを使ってうまく設定されているかどうか確認しましょう。
デバッガーの使い方は、URLをフォームに記入して「デバッグ」をクリックします。簡単な警告は出ますが、問題無いはずです。何故なら正式なOGP(Open Graph Protocol)を設定していないのですから。
この方法で「いいね」情報をフェイスブックのニュースフィードにうまく表示させることができました。また、W3C Markup Validation Serviceのチェックでエラー無く表示させることができました。
