Twitterのフォローボタンがでたので,例によって適当に試した
Posted: Updated:
公式フォローボタンがあらわれた
機能的には,そんなに派手ではありませんが,サイトからフォローしてもらうアクションが幾らかラクになるので,サイト運営してる側としては置いておいても良いと思います.
例によって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です.詳しくは原文参照のこと.