Useful Web Applications(14) Twitterの新しい「フォローボタン」を詳しく見てみよう

先週Twitterから新しい「フォローボタン」が登場しました。このボタンは従来のボタンとは違い、フォロワー数の表示やフォロー状態の反映、その他細かなカスタマイズが簡単にできるようになっています。そこで今回は、この新しいフォローボタンとその設置方法について紹介します。

新しいフォローボタンの基本

今回新しく登場したフォローボタンには、そのユーザーのフォロワー数を表示する機能や、相手が自分をすでにフォローしているかどうかによって自動的に表示が切り替わるといった機能が搭載されています。

それでは早速コードを取得してみましょう。フォローボタンのページへは、Twitterのホーム画面のサイドフッターにある「Resources」(日本語の場合は「素材」)から辿り着けます。

フォローボタン取得ページ

この画面では基本的な設定をカスタマイズできます。カスタマイズできる項目は以下の4項目です。

Twitterのログインユーザー名
色 (明るい、暗い)
フォロワー数の表示・非表示
言語 (本稿執筆時点では日本語を含む9言語)

フォローボタンを手っ取り早く設置したい場合は、これだけで大丈夫でしょう。

しかし、これだけの設定ではテキストやリンクの色、ボタンの配置などが設置先のサイトにマッチしない可能性もあります。そのような場合に備えて、新しいフォローボタンにはさらにカスタマイズ可能な設定が用意されています。

フォローボタンをさらにカスタマイズする

Twitterの開発者向けサイトに用意されているフォローボタンのドキュメントによると、前項にて説明した4項目に加えてさらに次の4項目をカスタマイズできるようになっています。

テキストの色 (フォロワー数のテキスト)
リンクの色 (ユーザー名のリンク)
幅 (ボタンからフォロワー数までを表示する領域の幅)
配置 (その領域内で左寄せにするか、右寄せにするか)

テキストとリンクの色をカスタマイズする

テキストの色には「data-text-color」、リンクの色には「data-link-color」というプロパティを使います。例えば以下のように記述すると、ユーザー名の部分が赤色に、フォロワー数の部分が緑色になります。

    <a href="http://twitter.com/fkoji"
       class="twitter-follow-button"
       data-link-color="ff0000"
       data-text-color="00aa00">Follow @fkoji</a>
    <script src="http://platform.twitter.com/widgets.js"
type="text/javascript"></script>

このコードを実際にサイトに設置すると、以下のようなボタンになります。

テキスト色とリンク色をカスタマイズした例

新しいフォローボタンでは、ボタンの色に「暗い(grey)」を選択すると自動的にテキストの色とリンクの色が変わってしまいます。ですので、サイトの背景色に合わない場合は上記のようにテキスト色やリンク色をカスタマイズするといいでしょう。

幅と配置をカスタマイズする

フォローボタンの幅と配置には、それぞれ「data-width」、「data-align」というプロパティを利用します。ここで言う「幅」とは「ボタン画像部分からフォロワー数表示部分までを含めた領域の幅」を指します。

フォローボタンのドキュメント内にあるFAQによると、フォロワー数を表示する場合は300px以上の幅を、表示しない場合は200px以上の幅を確保することをすすめています。これは、ユーザー名やフォロワー数のテキストの長さによって、必要な表示領域の幅が変化するためです。

また、フォローボタンの「配置」に利用する「data-align」プロパティには「left」もしくは「right」を指定でき、上記で説明した幅の領域内で左寄せにするか、右寄せにするかを選択できます。

以下のコードは幅300px、右寄せ配置を指定した例です。

    <a href="http://twitter.com/fkoji"
       class="twitter-follow-button"
       data-width="300px"
       data-align="right">Follow @fkoji</a>
    <script src="http://platform.twitter.com/widgets.js"
type="text/javascript"></script>

これはブラウザの検証ツールで確認した様子。きちんと右寄せされている

その他の注意点

新しいフォローボタンではJavaScriptコードの設置が必須となっていますので、JavaScriptを自由に設置できないブログなどでは利用できません。しかし、設置が必要な http://platform.twitter.com/widgets.js はツイートボタンでも利用されているスクリプトなので、このスクリプトを利用したツイートボタンがすでに設置されている場合は、すぐに利用できるでしょう。

また、フォローボタンはiframeで設置することもでき、Ajaxによる動的なフォローボタンの設置などではiframeの利用がすすめられています。iframeでの設置方法につきましては、公式ドキュメントを参照してください。

なお、本稿で掲載したサンプルコードには筆者のユーザー名を設定していますので、利用する際はご自身のユーザー名に置き換えてご利用ください。