SNS で記事をシェアしやすいように、Blogger にシェアボタンを設置する方法を紹介します。

今回は Twitter 編。ネットサーフィンしているとよく見かけるあれです。

基本的には、ここで紹介するコードはコピペで使えます。

ツイートボタンだけ

<a
  href="https://twitter.com/share"
  class="twitter-share-button"
  data-lang="ja"
  data-count="none"
  >ツイート</a
>
<script>
  !(function(d, s, id) {
    var js,
      fjs = d.getElementsByTagName(s)[0],
      p = /^http:/.test(d.location) ? 'http' : 'https';
    if (!d.getElementById(id)) {
      js = d.createElement(s);
      js.id = id;
      js.src = p + '://platform.twitter.com/widgets.js';
      fjs.parentNode.insertBefore(js, fjs);
    }
  })(document, 'script', 'twitter-wjs');
</script>

上にツイート回数表示

<a
  href="https://twitter.com/share"
  class="twitter-share-button"
  data-lang="ja"
  data-count="vertical"
  >ツイート</a
>
<script>
  !(function(d, s, id) {
    var js,
      fjs = d.getElementsByTagName(s)[0],
      p = /^http:/.test(d.location) ? 'http' : 'https';
    if (!d.getElementById(id)) {
      js = d.createElement(s);
      js.id = id;
      js.src = p + '://platform.twitter.com/widgets.js';
      fjs.parentNode.insertBefore(js, fjs);
    }
  })(document, 'script', 'twitter-wjs');
</script>

右にツイート回数表示

<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja"
  >ツイート</a
>
<script>
  !(function(d, s, id) {
    var js,
      fjs = d.getElementsByTagName(s)[0],
      p = /^http:/.test(d.location) ? 'http' : 'https';
    if (!d.getElementById(id)) {
      js = d.createElement(s);
      js.id = id;
      js.src = p + '://platform.twitter.com/widgets.js';
      fjs.parentNode.insertBefore(js, fjs);
    }
  })(document, 'script', 'twitter-wjs');
</script>

オリジナルボタン

ブログにこだわりたければオリジナルボタン設置がおすすめです。前のものと比べると、動作も少し軽いのが特徴です。

<a
  class="twitter"
  expr:href='"http://twitter.com/share?count=horizontal&amp;original_referer=" + data:blog.canonicalUrl + "&amp;text=" + data:post.title + "｜" + data:title + "&amp;url=" + data:blog.canonicalUrl'
  rel="nofollow"
  target="_blank"
  title="Twitter Tweet"
  ><img src="画像のurl"
/></a>

これだけはコードを編集する必要がありますが、画像のurlのところに使いたい画像の URL を指定するだけです。

画像を使わなくても css だけでこんな感じにできます。

さいごに

今回は Twitter の sns ボタン設置を紹介しました。今後、有名どころの sns ボタンも紹介していく予定なので、気になった方はそちらもどうぞ。

分からないことがあればコメント等で質問歓迎です！

では！