2012年3月31日土曜日

BloggerのブログにFacebookボタンを入れるには?(JPリダイレクト対応版)

Bloggerのテンプレートを新しいのにしたらFacebookのいいねボタンが消えちゃったのでもう一度入れることに。

またハマっちゃったので、JPリダイレクト問題の対処も含めてφ(..)メモメモ

まずここでボタンのソースを作る。

Like Button - Facebook開発者

ソースがこのようだったとする。

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

これを、このように書き換える。

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

イマイチわかりにくいのでポイントをまとめると

  1. 「src」の前に「expr:」を書き加える
  2. 「src=」の後の「"」(ダブルクオーテーション)を「'&quot;」に書き換える
  3. 「href=」の後の自ブログのURLを「&quot; + data:post.canonicalUrl + &quot;」に書き換える
  4. 「height=21」の後の「"」(ダブルクオーテーション)を「&quot;'」に書き換える

「&」と「変なアンド」になっているところは「普通のアンド」で表示されるべきですが、コピペするとちゃんと「普通のアンド」になるようです。

あぁ、HTMLでHTMLのコードを表現するのはしんどい。

そんな感じ。