Twitterのフォローボタンがでたので,例によって適当に試した

公式フォローボタンがあらわれた

機能的には,そんなに派手ではありませんが,サイトからフォローしてもらうアクションが幾らかラクになるので,サイト運営してる側としては置いておいても良いと思います.

例によってdata-*でオプションの指定が必要

Twitter / Follow Buttonで,ウィザードでざっくり作成することはできますが,細かいオプションはdata-*で指定が必要です.

詳しくは,Follow Button | dev.twitter.comで解説されています.以下ではサンプルと,各オプションの簡単な説明だけ掲載します.

不明な点は原典優先でお願いします.

ざっくりサンプル

JavaScript版です.黒背景は親要素で指定してます.(followボタン側は透過)

ざっくりサンプルのざっくりコード

<a href="http://twitter.com/ahomu" class="twitter-follow-button" data-button="grey" data-text-color="#FFFFFF" data-link-color="#00AEFF" data-show-count="true" data-width="540px">Follow @ahomu</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

widget.jsの読み込みは,公式ツイートボタンとかを既に仕込んでいれば,重複して読み込む必要はありません.

あと,そうそう問題にならないと思いますが,HTTPSでは動作しないみたいです.

ざっくりパラメータ

data-show-count
フォワー数の表示.true(デフォルト)またはfalse.
data-button
ボタンの色.blue(デフォルト)またはgrey.
data-text-color
テキストの色.16進数(HEX)表記.
data-link-color
リンクテキストの色.16進数(HEX)表記.
data-lang
ボタンラベルの言語.en(デフォルト), fr, de, it, es, ko, ja.日本語はja.
data-width
ボックスの幅.ピクセルかパーセントで指定.数字+単位.
data-align
ボックス内の揃え.left(デフォルト)またはright.

その他

  • data-buttonでgreyを指定すると,text-colorとlink-colorを,背景が暗色である前提の設定に暗黙的に書き換わります.暗色でない背景の上にgreyボタンを乗せるときは,data-buttonのあとに,data-text-colorを書いて,指定色で設定を上書きします.
  • Ajaxで引き寄せてくるコンテンツに入れたいときはiframe版を使用します.iframe版のときのパラメータは,"data-" を省き,ハイフンをアンスコに変えて,URLのクエリに混ぜればOKです.詳しくは原文参照のこと.