ツイートボタンのデザインを独自にカスタマイズする方法

この記事のすぐ上をご覧いただければお分かりのように、弊社ブログのソーシャルボタンは従来のそれではなく、独自のデザインにカスタマイズされています。少ない手順でオフィシャルのソーシャルボタンを設置するのもお手軽でいいですが、もう一手間加えて独自のデザインにカスタマイズし、ページ全体の統一感を一段上に持っていくためのノウハウを知っておいて損はありません ^*1。

※ 予備知識オフィシャルのツイートボタン設置方法

Twitter オフィシャルサイトの開発者向けページに詳しい手順が載っているので、それに従って進めていけば殆どコピペだけで設置することが出来ます。

• Tweet Button | Twitter Developers

html

<a href="https://twitter.com/share" class="twitter-share-button" data-url="https://dev.twitter.com" data-via="your_screen_name" data-lang="en">Tweet</a>

data-url と data-via はツイート文に含めたい文字列です。

JavaScript

!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");

たったこれだけで、設置したページをツイートするためのボタンが出来がります。便利ですね。

html

<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://bit.ly/twitter-api-announce" data-counturl="http://groups.google.com/group/twitter-api-announce" data-lang="en" data-count="vertical">Tweet</a>

JavaScript は先程のコードと全く同じで問題ありません。

ツイートボタンのデザインを独自にカスタマイズしてみよう

先の例に挙げたタイプのツイートボタンには大きく2つの機能が備わっています。

デザインをカスタマイズすると書きましたが、実際はそれぞれの API を叩くためのアンカーリンクを自前で用意するということです。これらのリンクさえ持っていれば HTML 構造はなんでも良いことになるので、好きなように CSS でデザインすることが出来るというわけです。

ツイート機能

https://twitter.com/share に現在のページ URL をクエリ文字列として指定してあげればとりあえず OK です。他にもダイジェスト文であるtextや発信者であるviaなどをパラメータとして追加することも出来ます。

<a class="btn-social" href="https://twitter.com/share?text=CustomSocialButtons&amp;url=http://0.0.0.0:4567/social/&amp;via=wakamsha">ツイート</a>

ツイート一覧呼びだし

https://twitter.com/search に現在のページ URL をクエリ文字列として指定するだけで OK です。

<a id="tweetCount1" class="btn-count" href="https://twitter.com/search?q=http://0.0.0.0:4567/social/">0</a>

ツイート数を取得

JavaScript から http://urls.api.twitter.com/1/urls/count.json という API を使って取得します。取得したいページの URL をクエリ文字列として指定すれば OK です。

var tweetCount = function(id, url) {
  if (!id) {
    return;
  }
  var pageURL = url ? url : location.url;
  pageURL = encodeURI(pageURL);
  url = 'http://urls.api.twitter.com/1/urls/count.json?url=' + pageURL;
  $.ajax({
    url: url,
    dataType: 'jsonp',
    success: function(json) {
      var count;
      count = json.count ? json.count : 0;
      document.getElementById(id).innerHTML = count;
    }
  });
};

jQuery を使って API から結果を非同期で取得します取得した値はパラメータとして渡された ID を持つ HTML 要素上に表示されます。また、デフォルトでは現在のページの URL からツイート数を取得しますが、オプションとして外部のページの URL からツイート数を取得することも出来ます。

使い方は以下のとおり。

tweetCount('tweetCount1', 'http://foo.wakamsha.net');

v1.0 であるこの Twitter API は2013年6月12日に廃止と公式にアナウンスされていますが、現在もデフォルトのツイートボタンが利用しているなど、完全に廃止にはなっていないようです。本来であれば現行の v1.1 を使うべきなのですが、ツイート数を取得する API が v1.1 に見当たらないので、ここでは v1.0 を利用しています。

CSS でツイートボタンをデザイン

ツイートボタンに必要な機能はこれで満たせたので、あとは CSS で好きなようにデザインすれば OK です。

html

<ul class="social-buttons">
  <li class="twitter">
    <a class="btn-social" href="https://twitter.com/share?text=CustomSocialButtons&amp;url=http://0.0.0.0:4567/social/"><i class="fa-twitter fa"></i></a>
    <a id="tweetCount1" class="btn-count" href="https://twitter.com/search?q=http://0.0.0.0:4567/social/">0</a>
  </li>
</ul>

SCSS

@import "compass";

$brand-twitter: #55acee;

.social-buttons {
  list-style: none;
  padding: -0;
  li {
    background: #ececec;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 1px 0 rgba(0,0,0,.1);
    float: left;
    margin-right: .5%;
    width: 160px;

    .btn-count {
      background: #dadada;
      box-shadow: inset 0 2px 1px rgba(0,0,0,.2), 0 1px 0 rgba(255,255,255,.3);
      border: 1px solid #ddd;
      border-radius: 3px;
      color: #333;
      display: block;
      font-size: .8rem;
      margin: 5px;
      padding: 8px 0;
      text-align: center;
      text-decoration: none;
      @include transition(.1s);
      &:hover,
      &:active {
        background: #aaa;
        color: white;
      }
    }
    .btn-social {
      display: block;
      line-height: 23px;
      margin: 3px 3px 0 3px;
      padding: 8px 0;
      text-align: center;
      i {
        background: #bbb;
        border-radius: 50%;
        color: #fafafa;
        display: inline-block;
        font-size: 1.6rem;
        height: 23px;
        padding: 8px;
        line-height: 23px;
        width: 23px;
        @include transition(.1s);
      }
      &:hover,
      &:active {
        i {
          background: #aaa;
        }
      }
    }
  }
}

.social-buttons {
  .twitter {
    .btn-count {
      &:hover,
      &:active {
        background: $brand-twitter;
      }
    }
    .btn-social {
      &:hover,
      &:active {
        i {
          background: $brand-twitter;
        }
      }
    }
  }
}

こちらから実際の動きをご覧いただけます。

おわりに

Twitter API を理解する必要があるなど、慣れるまで少し手間がかかりますが、Web サイトの統一感を高めるためのノウハウとして抑えておくと良いかと思います。

当然ながら Twitter API の仕様が変更されるとその影響を大きく受ける可能性が高いので、マメに公式サイトをチェックするなり、仮に変更が発生しても素早く対応が出来るようプラグイン化しておくなどの配慮をしておきましょう。

• Twitter Developers

脚注