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}&layout=standard&show_faces=false&width=220&action=like&colorscheme=light&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}&layout=standard&show_faces=false&width=450&action=like&colorscheme=light&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で飛ばせると思います。