ブログとSNSを連携する - Tumblrで共有

「Tumblrで共有」ボタン、ウェブサイト運営者向けに提供開始という記事を見かけたので早速ブログにTumblrの共有ボタン（Share on Tumblr）を設置してみました。

Tumblr共有ボタンの設置方法にあるコードを貼り付けるだけです。

Advancedを選択するとTumblrに共有される形式をリンク、引用、写真、ビデオの中から選択することができるようです。

先ずは基本のBasicを選択します。

BloggerにTumblrで共有ボタンを設置する

Tumblr共有ボタンのステップ１にあるJavaScriptを/headの前にコピーします。

<script type="text/javascript" src="http://platform.tumblr.com/v1/share.js"></script>

1. Bloggerの『デザイン → HTMLの編集』 からウィジェットのテンプレートを展開をチェック
2. テンプレートから /head を検索
3. /headの下にコードを張付ける

続いてShare button codeにあるコードを貼り付けてみましたが、Tumblrで共有ボタンが表示されません。

ボタン画像のURLが正しく解釈されていないのではと思い、コードをみると画像のURLがアポストロフィで囲まれていましたので、これをクォートに変更してみると『Tumblr共有ボタン』は表示されましたが、表示位置が変です。

再びコードを眺めると<a>タグで「Share on Tumblr」という文字列にリンクをさせているのですが、表示上にこの文字列はありません。text-indent:-9999px という記載があるので、おそらくこれがあり得ない場所に文字列を飛ばしているのではないかと考え、「Share on Tumblr」とtext-indent:-9999pxを外してみました。

するとTumblr共有ボタンが正しく表示されました。（自分の感に万歳！）

下記の【After】がBlogger用に変更した『Tumblrで共有ボタン』のコードです。

【Before】

<a href="http://www.tumblr.com/share" title="Share on Tumblr" style="display:inline-block; text-indent:-9999px; overflow:hidden; width:81px; height:20px; background:url('http://platform.tumblr.com/v1/share_1.png') top left no-repeat transparent;">Share on Tumblr</a>

【After】

<a href="http://www.tumblr.com/share" title="Share on Tumblr" style="display:inline-block; overflow:hidden; width:81px; height:20px; background:url("http://platform.tumblr.com/v1/share_1.png") top left no-repeat transparent;"></a>

このコードをテンプレートに埋め込みます。

1. Bloggerの『デザイン → HTMLの編集』 からウィジェットのテンプレートを展開をチェック
2. テンプレートから <div class="post-header-line-1">を検索。
3. <div class="post-header-line-1">の下にコードを張付ける。

Tumblr共有ボタンを試す

Tumblr共有ボタンを押すとShare on Tumblrの画面が表示されます。Basicを選択しているとLinkがデフォルトになるようです。左下の『Create post』でTumblrに投稿されます。

BloggerへのTumblr共有ボタンの設置はこれで終了です。

今日の一曲（２曲セットで）

ザ・ベスト・オブ・セックス・ピストルズ

charaのMy Wayを紹介したときにセックス・ピストルズに触れましたが、パンクというジャンルを知らなかった自分が、初めて Anarchy in the U.K. を聴いたときは、頭の回路がショートし、My Wayが脳内で反芻していました。そしてその後のニナ・ハーゲン、戸川純という、自分の趣向に新しいパターンを生み出すきっかけとなったのです。ザ・ベスト・オブ・セックス・ピストルズには、勿論この２曲も収録されています。音量を上げて空気の振動を感じながら聴いてください。

Anarchy in the U.K. - The Sex Pistols
My Way - The Sex Pistols