Twitter の新しいフォローボタンの設置、簡単にボタン、文字色を変更する

2011 年 5 月 31 日、米 Twitter が新しい Follow Button を発表した。
ウェブサイトから Twitter に遷移することなく、フォローが可能となる。

当サイトも試しに早速設置。
設置するための HTML は設定ページより簡単に取得することができる。

背景に使用する色の選択 (明るい、暗い) ができる様になっており「暗い」を選択した場合、HTML に以下の 3 つの項目が追加される。

1. data-button=”grey”
2. data-text-color=”#FFFFFF”
3. data-link-color=”#00AEFF”

上記 3 つの項目を変更することで、簡単に違和感を軽減してウェブサイトに設置できる様になる。

1. data-button=”grey” を付加した場合は灰色のボタン、しない場合は「明るい」を選択した際の水色のボタンを表示。
2. data-text-color=”#FFFFFF” は、フォローしている場合の「フォロー中」およびフォロワー数の文字色。
3. data-link-color=”#00AEFF” は、アカウント名 @xxxxxxxx へのリンクの文字色。

当サイトの右側、Tweet 部分は以下の様な HTML となっており、WordPress のウィジェット内に書かれている。
3 行目までは最新のツイート取得するための記述。こちらの投稿が参考になる。

<div class="widget_twitter"><ul id="twitter_update_list"></ul>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/Keishi.json?callback=twitterCallback2&amp;amp;count=1"></script>
<p><a href="http://twitter.com/Keishi" class="twitter-follow-button" data-button="grey" data-text-color="#404040" data-link-color="#00a0ba" data-show-count="false" data-lang="ja">Follow @Keishi</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script></p></div>