Tumblrにライクボタン、リブログボタンを設置する方法

Tweet

Pocket

Tumblrの機能で特徴的なものの１つにリブログがあります。気になった投稿を簡単に共有することができる機能ですが、この機能もテンプレート内で必要なコードを記述しないと実装できません。

このページではTumblrの便利な機能であるリブログボタンを設置する方法を紹介します。

Tumblrでリブログボタンを表示する方法

デフォルトテンプレートをチェックしてみる

TumblrでLikeボタンやReblogボタンを設置するのは非常に簡単。デフォルトテンプレートを見ればわかるように、タグを１行追加するだけです。

<!-- リブログ、ライクボタンの設置 -->
<section class="post-controls">
    <ul>
        <li>{ReblogButton size="21" color="black"}</li>
        <li>{LikeButton size="20" color="black"}</li>
    </ul>
</section>

独自タグの構造は公式リファレンスを見てもらえればわかるように、オプションとしてサイズとカラー設定ができるようになっています。

デフォルトでは両方指定されてますが、どちらか一方だけでも、両方なくてもOK。注意点はレファレンスにもあるようにpostブロック内に設置すること。

{block:Posts}
  ...
  <ul class="like_and_reblog_buttons">
      <li>{ReblogButton}</li>
      <li>{LikeButton}</li>
  </ul>
{/block:Posts}

記事のヘッダーやフッター部分に設置するのが基本的な使い方になります。