復興ログ

未来の被災地にいるアナタと数十年後のキミたちへ。すべての記録を残します。

TumblrにFacebookのいいね!ボタンを設置する方法

『そめけん!』日記 — tumblr.にFacebookの「いいね!」を設置を参照しました。

パーマリンクのページからOpenGraph protocolに乗せてFacebookへフィードさせたかったので、以下のように書き換えてみました。
上記リンク先の方法を踏まえて、ついでにツイートボタンも設置してみました。

customizeのThemeでHTMLをカスタマイズ

{/block:Posts}の上にソーシャルプラグインを記述
<!-- ソーシャルプラグイン -->

<div style="margin-top:13px">

{block:IndexPage}
<!-- 一覧ページの場合 -->
<iframe src="http://www.facebook.com/plugins/like.php?href={URLEncodedPermalink}&amp;layout=standard&amp;show_faces=false&amp;width=220&amp;action=like&amp;colorscheme=light&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:220px; height:35px;" allowTransparency="true"></iframe>
{/block:IndexPage}

{block:PermalinkPage}
<!-- パーマリンクページの場合 -->
<iframe src="http://www.facebook.com/plugins/like.php?href={URLEncodedPermalink}&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe>
{/block:PermalinkPage}

<!-- ツイートボタン -->
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="あなたのツイッターアカウント" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

</div>

<!-- / ソーシャルプラグイン -->

一覧ページとパーマリンクページで、いいね!ボタンの出し分けをしています。
いいね!ボタンは横長のプラグインなので、ページのレイアウトによってサイズを変更しています。
パーマリンクの場合には横長に、一覧ページの場合には短めに設定しています。
ページ下部のソーシャルプラグインはこんな感じです。

Open Graph protocolを記述
<meta property="og:title" content="{Title}{block:PostSummary} ({PostSummary}){/block:PostSummary}">
<meta property="og:site_name" content="Tumblr">
{block:PermalinkPage}{block:Posts}<meta property="og:image" content="{PhotoURL-250}">{/block:Posts}{/block:PermalinkPage}

og:site_nameあたりはお好みでいいと思います。
パーマリンクの時にはog:imageが表示されることになります。画像コンテンツの場合には、サムネイルのURLを指定しています。ですが、サムネイルのサイズがOGPの推奨サイズを越えたサイズになると拾ってくれません。
そこそこのサイズならOGPで飛ばせると思います。