■簡単な動作説明

　左のフォローのボタンを押すとワンクリックでフォローできます。@ユーザ名のリンクをクリックするとフォローのウインドウが開きます。

　既にフォローしている場合は左のボタンがフォロー済みに変わります。また、フォロワー数が非表示になります。自分のアカウントの場合もフォロー済みになります。

　フォローを解除するときは@ユーザ名のリンクから、「フォローしている」をクリックして解除します。

　フォロワー数、英語の「K」は1,000です。「300K」なら、300*1000で 30万フォロワー になります。「M」は100万です。「5M」なら、5*1000000で 500万フォロワーです。

コード作成

<!--Twitter Follow Button-->
　上記コードを設置したい箇所に貼り付けます。

[ + ] JavaScriptではなく、直接iframeで設置する場合はこちらのコードを使用します。

<!--Twitter Follow Button-->

■使い方

　ユーザ名には半角英数字とアンダーバー。@parodayなら、ユーザ名に paroday を入れます。

　名前色、テキスト色、背景色は半角数字とa～f（16進数[0-9a-fA-F]）の3桁か6桁の値を入力してください（例：黒「000」or「000000」）。下のカラーパネルをクリックすると、現在選択されている項目の色が変わります。

　各テキストボックスの値を変更後に画面上の適当な箇所をクリックしたり、ボックス内でエンターキーを押すと反映されます。

　横幅には1～500までの数字を入力できます。初期値は空っぽにします。ボタンのみ表示は、ワンクリックフォローのボタンだけを表示します。横幅を指定するときは、この表示のチェックを外してください。

　範囲のプレビューにカーソルをあわせると、フォローボタンの領域が表示されます。デフォルトの横幅は300pxのようです。

公式ツイートボタンのJavaScriptを利用しているとき

　公式のツイートボタンをそのまま利用している場合は、次のようなscript要素が貼り付けられていると思います（他のブログパーツなどで次のファイルを利用している場合も同様です）。

<script src="http://platform.twitter.com/widgets.js" type="text/javascript" charset="utf-8"></script>

　このコードが既にある場合は、フォローボタン設置コード（JavaScript版）のscript要素は不要です。最初のa要素だけで機能します。入れると読み込むファイルが増えるだけなので外します。

<a href="http://twitter.com/twitter" class="twitter-follow-button" data-show-count="false">Follow @twitter</a>
↓削除する
<script src="http://platform.twitter.com/widgets.js" type="text/javascript" charset="utf-8"></script>

　わからないときはscript要素を一端外して機能するかどうかを試します。外して動けば問題ありません。

色や言語などの値を変更しても反映されないとき

　たぶんキャッシュが原因です。キャッシュを削除してください。
　すぐに反映させるときは [Ctrl]キー を押しながら、[F5]キー を押してみます（windows）。

ボタンに枠線が表示されるとき

　スタイルシートに以下を追加します。

iframe.twitter-follow-button { border: 0 !important; }

ボタンの縦位置（周囲の要素）を揃えるとき

　スタイルシートに以下を追加します。

iframe.twitter-follow-button { vertical-align: top! important; }

　あるいは middle

iframe.twitter-follow-button { vertical-align: middle ! important; }

　あるいは bottom

iframe.twitter-follow-button { vertical-align: bottom ! important; }

Operaで日本語のフォロワー数を表示すると、ボタンがちょっと切れる

　気のせいです。

公式サイト

• Twitter / フォローボタン

関連記事

• 都道府県・政府サイトの横幅まとめ　固定幅平均919px…2012年版
• iPhone 4S auとSoftBankの通信速度比較サイトの簡易まとめ
• 都道府県ウェブサイトの横幅まとめ 平均895px
• ツイッター公式フォローボタンを設置する方法と色変更
• Greasemonkeyの使い方とアイコン素材
• 主なブラウザのシステム要件・動作環境とアップデート方法
• IE8以下でHTMLを含むtxtファイルを開くとHTMLで表示されるのを防ぐ