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

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

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

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

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

スクリーンショット 2014-05-28 1.03.20

スクリーンショット 2014-05-28 10.17.42

例えば定番のこのスタイルなんかは、以下の2つのコードをそのままサイトにコピペするだけで設置出来ます。

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-urldata-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");

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

スクリーンショット 2014-05-28 10.17.53

他にもこのようなツイート数とツイートボタンが縦に並んだ大きめのボタンを設置するには、HTML にdata-count="vertical"というオプションをつければ実現出来ます。

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つの機能が備わっています。

スクリーンショット_2014-05-28_10_17_42

  1. 現在のページをツイートするためのウィンドウを開く
  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 の仕様が変更されるとその影響を大きく受ける可能性が高いので、マメに公式サイトをチェックするなり、仮に変更が発生しても素早く対応が出来るようプラグイン化しておくなどの配慮をしておきましょう。

脚注

  1. 当ブログがスタートしてもうすぐ3年が経とうとしてますが、未だにこのノウハウが紹介されてなかったのは意外です。