ワードプレスにフェイスブックの「いいね」を付けました 美川の山里暮らし

app_idを取得してから、「いいね」ボタンのコードを作成します

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

フェイスブックの「いいね」ボタンの生成ページからコードを作成することができます。やり方はフェイスブックの「いいね」ボタンの設置の仕方を参照してください。iframe版を作成してください。

この時、設置するウェブページのURLを入力する と、次のようなアプリID(app_id)が入ったコードが生成されます。これをウェブページの表示させたい位置にコピーと貼付けするだけです。

<iframe src="//www.facebook.com/plugins/like.php?app_id=123456789012345&amp;href=http//example.jp/&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>

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

フェイスブックの「いいね」ボタンの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&amp;href=<?php the_permalink(); ?>&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;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&amp;」を追加します。