1. Top
  2. » スポンサー広告
  3. » ネット関係
  4. » FC2ブログに「Tumblrで共有」ボタンを設置

スポンサーサイト

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

FC2ブログに「Tumblrで共有」ボタンを設置

Tumblrから公式の「Tumblrで共有」ボタンリリースされたので、早速設置した。

リンク・引用など幾つかの方法があるが、とりあえずはリンク方式とし、description部に本文の要約を載せる事とする。


手順1
<head>タグ内に以下を記述。

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


手順2
<!--topentry-->~<!--/topentry-->内のtumblrボタン設置場所に以下を記述。

<span id="tumblr_button_<%topentry_no>"></span>


手順3
先ほどの手順2の下あたり(<!--/topentry-->よりは前)に以下を記述。

<script type="text/javascript">
var tumblr_button<%topentry_no> = document.createElement("a");
tumblr_button<%topentry_no>.setAttribute("href", "http://www.tumblr.com/share/link?url=" + encodeURIComponent("<%topentry_link>") + "&name=" + encodeURIComponent("<%topentry_title> - <%blog_name>") + "&description=" + encodeURIComponent("<%topentry_discription>"));
tumblr_button<%topentry_no>.setAttribute("title", "Share on Tumblr");
tumblr_button<%topentry_no>.setAttribute("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;");
document.getElementById("tumblr_button_<%topentry_no>").appendChild(tumblr_button<%topentry_no>);
</script>



これだけ。


留意点
公式のタグは「1HTMLに1ボタン」の前提で生成される為、「1HTMLに複数記事(複数ボタン)」が大前提のブログサービスではそのままでは上手くいかない。この為、安直にブログ記事のユニーク番号をid(および変数)に付与する事にして回避した。

また、Tumblrボタンに限らないがブログ記事の本文中にダブルクォーテーションが含まれる場合、<%topentry_discription>を展開した際に崩れる。本文内のダブルクォーテーションを忘れずに「&quot;」とエスケープしておきたい。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。