facebook の「いいね!」ボタンを Blogger の各記事へ対応させる方法

facebookの「いいね!」ボタンは、faebook DEVELOPERSページから、簡単にコードを取得することが出来ます。勿論、このコードをBloggerで利用することも出来ます。

但し「URL to Like」へブログのトップページURLを指定した場合、ブログ全体で「いいね!」が共有されてしまいます。

各記事に対して「いいね!」を指定させたい場合には、生成されたコードのsrcアトリビュートをexpr:srcへと変更し、その上で、data:post.urlを反映させるように設定します。

例えば、このブログのトップページを指定した「いいね!」ボタンのコードは次のようになります。

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fblogger.tempus.org%2F&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>

ここで、srcをexpr:srcへ変更し、「http%3A%2F%2Fblogger.tempus.org%2F」と記されている箇所をdata:port.urlへと変更します。data:post.urlの前後に位置する元のsrcアトリビュート部は、"で囲みます。それら3つのパートは「+」で結合しましょう。最後にexpr:src全体をシングルクォートで囲みます。

最終的なコードは以下の様になります。

<iframe expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&quot;' scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>

このコードへは、このブログに依存している情報は含まれていませんので、Bloggerを利用しているどのブログでも利用可能です。

tipsでした。