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です.詳しくは原文参照のこと.

Author

ahomuAyumu Sato

overflow, Inc.VPoE

東京資本で生きる名古屋の鳥類

Web 技術、組織開発、趣味など雑多なブログ。技術の話題は zenn にも分散して投稿しています。

Bio: aho.mu
X: @ahomu
Zenn: ahomu
GitHub: ahomu

Related

Latest

Archives

Tags

Search