1. Top
  2. » スポンサー広告
  3. » ネット関係
  4. » TumblrをカスタマイズしてFacebookのいいね!(Like)を設置

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

TumblrをカスタマイズしてFacebookのいいね!(Like)を設置

毎日飽きもせずに似たような事ばかり。今日はブログ的に使っているTumblrにFacebookのLikeを設置したメモ。
参考はこのあたり。誰も見ていないページなのでただの自己満足。

■<head></head>内にOGPを記載
以下の内容を記載。前も書いたがPermalinkPage以外には記載不要。

{block:PermalinkPage}
<meta property="og:title" content="{block:PostSummary}{PostSummary} - {/block:PostSummary}{Title}" />
<meta property="og:type" content="article" />
<meta property="og:description" content="{MetaDescription}" />
<meta property="og:url" content="{Permalink}" />
<meta property="og:image" content="{block:Posts}{block:Photoset}{PortraitURL-128}{/block:Photoset}{block:Photo}{PhotoURL-100}{/block:Photo}{/block:Posts}" />
<meta property="og:site_name" content="{Title}" />
{/block:PermalinkPage}

Post内容がPhotoの場合はimageをPhotoの内容にする。他は(自分の場合は)Photosetくらいしか使わないが、Photosetの場合はどうも画像が取れないようなのでプロフィールの画像とした。これなんとかならないんだろうかと思うが、前述のtumblrの変数一覧ページを見る限り、どうも無理っぽい気がする。

■{block:Photo}{/block:Photo}や{block:Photoset}{/block:Photoset}内に以下を記載
<iframe src="http://www.facebook.com/plugins/like.php?href={Permalink}&layout=button_count" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:100px; height:20px"></iframe>
もう1つ外側の{block:Posts}{/block:Posts}に記載する方法もあるが、Notes表示の際に表示されないっぽかったので、内側にそれぞれ記載。

ちなみに{Permalink}ではなく{URLEncodedPermalink}を使用すると、Likeする事は出来るのだがFacebook上のニュースフィードには反映されない=機能しない…ような気がした。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。