LikeボタンをBloggerの個別ページに設置する

次に、LikeボタンをBloggerの個別ページ(個別ポスト)に設置する方法。

Google傘下のBloggerが、今やGoogle最大の競合の一つ(もう一つはApple)であるFacebookにトラフィックを流すワケもないから純正Widgetなんかないだろうなぁと思って探したら、実はありました。

Blogger Pluginで事細かに説明され、サンプルコード(といっても修正不要でそのまま使える)まで紹介されていました。

JavaScriptを使って個別ページのURLを取得するので、「Facebook開発者」ページでコードを取得する必要すらありません。

手順は以下の通り。

1. Bloggerサイトにログインする

2. 「レイアウト」→「HTMLを編集」を選び、”ウィジェットのテンプレートを展開する”をチェックする

3. data.post.body という文字列を検索する(一箇所しかないはず)

4. その行の直後に、以下のコードを挿入する

5. テンプレートを保存する

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugin
s/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standar
d&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=ar
ial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' st
yle='border:none; overflow:hidden; width:450px; height:40px;'/>

</b:if>



これだけです。
これで個別ポスト毎(パーマリンク毎)にLikeボタンが表示されます。

赤色の部分は、トップページから見た場合にLikeボタンの表示を抑制するためのもので、赤字部分を除けば”常に”ポストの最後にLikeボタンが表示されます。

この辺りの扱い、iframeの幅や各種設定は例によって好みに応じてカスタマイズしてください。
このエントリーをはてなブックマークに追加