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

還暦を過ぎ、岡山県南西部の山間地で文明の利器を活用しながら田舎生活を満喫したいと思っています エジソン君の絵

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

Filed under: WordPress — タグ: , — daii @ 9:48 PM
2011年10月10日

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;」を追加します。

スポンサーリンク

コメントはまだありません

No comments yet.

RSS feed for comments on this post.

Sorry, the comment form is closed at this time.

Powered by WordPress