Tumblrにfacebookのlikeボタンやらtwitterボタンやらはてブボタンをつける方法

SPONSORED LINK

Pocket

ドットインストールの公式ブログ(Wordcampで発表したのにTumblr・・・)にいろいろボタンをつけたのでそのやり方をシェアしておきます。

Tum 1

↑ こんな感じね。

ざざっと。

■ facebookのlikeボタン

一番面倒ですな。まずはHTML宣言をこちらに差し替えます。

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="https://www.facebook.com/2008/fbml" xmlns:og="http://ogp.me/ns#" xml:lang="en" lang="en">

次にheadタグ内にOGP関連のタグをごそっと。

<!-- START For Facebook Open Graph -->
{block:PostSummary}
<meta property="og:title" content="{PostSummary} - {Name}" />
{/block:PostSummary}
<meta property="og:url" content="{Permalink}" />
<meta property="og:type" content="article" />
{block:Posts}
{block:Photo}<meta property="og:image" content="{PhotoURL-250}" />    {/block:Photo}
{block:Text}<meta property="og:image" content="{PortraitURL-128}" /> {/block:Text}
{block:Photoset}<meta property="og:image" content="{PortraitURL-128}" /> {/block:Photoset}
{block:Quote}<meta property="og:image" content="{PortraitURL-128}" /> {/block:Quote}
{block:Link}<meta property="og:image" content="{PortraitURL-128}" /> {/block:Link}
{block:Chat}<meta property="og:image" content="{PortraitURL-128}" /> {/block:Chat}
{block:Audio}<meta property="og:image" content="{PortraitURL-128}" /> {/block:Audio}
{block:Video}<meta property="og:image" content="{PortraitURL-128}" /> {/block:Video}
{block:Answer}<meta property="og:image" content="{PortraitURL-128}" /> {/block:Answer}
{/block:Posts}
<meta property="og:description" content="{MetaDescription}" />
<!-- For Facebook Open Graph END -->

そして最後に文末ぽいところに以下のタグを入れます。スタイリングはお好みで。

<iframe src="http://www.facebook.com/plugins/like.php?href={Permalink}&amp;layout=standard&amp;show_faces=true&amp;width=300&amp;action=like&amp;font&amp;colorscheme=light&amp;height=30" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:400px; height:30px;" allowTransparency="true"></iframe>

なお、このやり方はこちらで教えてもらいました。

» How to add facebook like-button in tumblr posts with opengraph protocol | Eyedea Lab

■ Twitterボタン

次、Twitter。まずは以下のサイトでボタンのコードをゲットします。

» Twitter / ツイートボタン

そのコードのaタグ内でdata-url、date-textを次のように指定します。

<a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="dotinstall" data-lang="ja" data-url="{permalink}" data-text="{Title}">ツイート</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>

あとはそれをお好みの場所に貼り付けるだけです。

なお、出典はこちらね。

» Add a Twitter Button to your Tumblr Blog

■ はてブボタン

おもむろに次のコードを貼り付けましょう。

<a href="http://b.hatena.ne.jp/entry/{Permalink}" class="hatena-bookmark-button" data-hatena-bookmark-title="{Title} - {block:PostTitle}{PostTitle}{/block:PostTitle}" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

以下のサイトで教えていただきました。感謝!

» not Haruki – Tumblr(タンブラー)にはてなブックマークボタンを導入する方法

以上ですかね。Tumblrを公式ブログなんかにしている人も多いかと思いますのでよろしければご参考までに。

» 「ドットインストール」公式ブログ

ツイッターもやっています!

SPONSORED LINK

  • Trackback are closed
  • Comments (0)
  1. No comments yet.