[Webサービス] Tumblrの共有ボタン（ページ用ボタン）の設置方法

2013 年 1 月 26 日2013 年 1 月 31 日

【2013.01.26 更新】新しいウィンドウで開くように変更

Tumblr（タンブラー）の共有ボタン（ページ用ボタン）をこちらに書かれているものをそのまま設置すると、うまく動作しない。

ページのタイトル名やURLの部分と、リンクを新しいウィンドウで開くようにする部分を自分で書き換える必要がある。

たとえばJavaScript版の場合、下記のものをコピペすればOK。

<!-- Put this tag wherever you want your button to appear -->
<span id="tumblr_button_abc123"></span>

<!-- Set these variables wherever convenient -->
<script type="text/javascript">
    var tumblr_link_url = location.href;
    var tumblr_link_name = document.title;
    var tumblr_link_description = "";
</script>

<!-- Put this code at the bottom of your page -->
<script type="text/javascript">
    var tumblr_button = document.createElement("a");
    tumblr_button.setAttribute("href", "http://www.tumblr.com/share/link?url=" + encodeURIComponent(tumblr_link_url) + "&name=" + encodeURIComponent(tumblr_link_name) + "&description=" + encodeURIComponent(tumblr_link_description));
    tumblr_button.setAttribute("target", "_blank");
    tumblr_button.setAttribute("title", "Share on Tumblr");
    tumblr_button.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;");
    tumblr_button.innerHTML = "Share on Tumblr";
    document.getElementById("tumblr_button_abc123").appendChild(tumblr_button);
</script>