コピペでOK！簡単ラクラク！Tumblrのソーシャルボタン！

2月 23, 2012 in ソーシャルメディア

Facebook IDを差し替えてペーストするだけで利用できます！

世界一ユーザーの多い投稿に便利なブログサービTuｍｂｌｒには、残念ながらソーシャルボタンは標準機能で備わってません。そこで、Facebookの「いいね！」ボタン、Google+ボタン、Twitterボタンのコードを探したのですが、世の中そんなに甘くはなかった…。

(;´Д`)＜ハァ

なけなら作るか！と、Facebook ID差し替えるだけですむコードを書きました。Google+ボタン、Twitterボタン、Facebook「いいね！」ボタンの3種類だけのシンプルなものです。

以下、コピペでOKなソーシャルボタンの設置方法を解説します。

ソーシャルボタンを設置する上の予備知識

Tumblrにソーシャルボタンを設置する上で必ず覚えておいてほしいのは、パーマーリンクのURLを表示するTUｍｂｌｒの独自タグは{Permalink}であるということです。
これだけ覚えておけば、だいたいのソーシャルボタンは追加できます。
なお、このブログではTumlrの管理画面のスクリーンショットは最低元のものとなってます。
Tumblrのカスタマイズがわかってない方は、昨日書いたは「TumblrにzenbackとOGPを設定してみた！」を先に見ておいてください。

ソーシャルボタンのジェネレーターでコードを取得

以下のリンク先にあるジェネレーターでコードを取得してください。

Google +1 ボタン
http://www.google.com/intl/ja/webmasters/+1/button/index.html
Twitterボタン
https://twitter.com/about/resources/buttons#tweet
Like Button – Facebook Developers
http://developers.facebook.com/docs/reference/plugins/like/

この時、URLの欄に暫定的に「あなたのTUｍｂｌｒブログのURL」を記入しておいてください。テストも兼ねられますし、URLを入れておかないとビギナーの人は後で書換が面倒になります。
コードを取得したら、「あなたのTumblrのURL」ををTumblr独自タグ{Permalink}に差し替えます。
Facebookの左右の幅は120px程度にしておくとよいかと思います。
Facebookのコードは通常はIFRAMEを選んでください。
※表示が速いです。

◇ソーシャルボタン・ウィジェゥット・コード

<span style="color: rgb(255, 102, 0); ">&lt;!-- Social Buttom Widget --&gt;</span>
&lt;div class=&quot;share&quot;&gt;
&lt;div class=&quot;plus_share_button&quot;&gt;
<span style="color: rgb(255, 102, 0); ">&lt;!-- Google+ --&gt;</span>
&lt;g:plusone href=&quot;http://www.dakiny.com&quot;&gt;&lt;/g:plusone&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
window.___gcfg = {lang: &#39;ja&#39;};
(function() {
var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
})();
&lt;/script&gt;
<span style="color: rgb(255, 102, 0); ">&lt;!-- Twitter --&gt;</span>
&lt;a href=&quot;https://twitter.com/share&quot; class=&quot;twitter-share-button&quot; data-url=&quot;http://www.dakiny.com/&quot; data-via=&quot;Dakiny&quot; data-lang=&quot;ja&quot;&gt;ツイート&lt;/a&gt;
&lt;script&gt;!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);&lt;/script&gt;
<span style="color: rgb(255, 102, 0); ">&lt;!-- Facebook --&gt;</span>&lt;iframe src=&quot;//www.facebook.com/plugins/like.php?href={Permalink}&amp;amp;send=false&amp;amp;layout=button_count&amp;amp;width=120&amp;amp;show_faces=true&amp;amp;action=like&amp;amp;colorscheme=light&amp;amp;font&amp;amp;height=21&amp;amp;appId=<span style="color: rgb(255, 102, 0); ">あなたのFacebookID</span>&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; style=&quot;border:none; overflow:hidden; width:120px; height:21px;&quot; allowTransparency=&quot;true&quot;&gt;&lt;/iframe&gt;&lt;/div&gt;&lt;/div&gt;<span style="color: rgb(255, 102, 0); ">&lt;!-- Social Buttom Widget --&gt;</span>

Facebookの[appId=あなたのFacebookID]を書き換えるだけで完了です。
Facebook IDは「what-is-my-user-id」で探せます。

◇CSSサンプルコード

※注意：テーマにより異なるので必ず自分の環境に書き換えること

.share {
padding: 5px 0 0 0;
overflow: hidden;
}

.share .twitter-share-button, .post .share .fb-share-button, .post .share .plus_share_button { float: left; }
.share .fb-share-button { margin: 0 0 0 0px; }

#マジでこのCSS適当ですから必ず書き換えてください^^;;

Tumblrにソーシャルボタンウィジェットのコードを追加

Tumblrにログインして、自身のTumblrサイトを開く
[カスタマイズ]をクリックする
カスタムテーマ[編集HTML]をクリック
表示されるHTMLの下記のコードの位置にソーシャルボタンウィジェットのコードをペースト
ペーストが終わったら[プレビューを更新]をクリックして表示を見る
[デザイン設定]をクリック
[保存]をクリックして保存が終わるのを待つ

例として記事下に貼ります。
{/block:PostNotes} と {/block:Posts}の間に貼ってください。

★全ページに表示したい場合

{/block:PostNotes}

/**この行にソーシャルボタンウィジェットのスクリプトコードをコピペ**/

{/block:Posts}

★記事ページのみに表示したい場合

{/block:PostNotes}

{block:PermalinkPagination}/**テンプレートにはないので追記**/
/**この行にソーシャルボタンウィジェットのスクリプトコードをコピペ**/
{/block:PermalinkPagination}/**テンプレートないので追記**/

{/block:Posts}

いずれもお好みでどうぞ。