blog.hakozu.me

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 へのリンクの文字色となります。
Twitter フォローボタン スクリーンショット

フォロー | 背景: 明るい

Twitter フォローボタン スクリーンショット

フォロー | 背景: 暗い

Twitter フォローボタン スクリーンショット

フォロー中 | 背景: 明るい

Twitter フォローボタン スクリーンショット

フォロー中 | 背景: 暗い

当サイトの右側、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&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>

関連しそうな商品

関連しそうな記事

コメント