Paroday

Paroday:ニュースやアニメのレビュー、FC2ブログのテンプレート・プラグインなどを配信しています。

もしかして Parody ではありませんか? yes

ツイッター公式フォローボタンを設置する方法と色変更

  • 2011-06-02 木 22:51
  • Web
  • hatena  拍手

 そのままワンクリックでフォローできるツイッター公式フォローボタンの設置方法とボタンや色、フォロワー数表示などの変更方法です。

■簡単な動作説明

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

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

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

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

コード作成

ユーザ名 ボタン色 フォロワ数
名前色 テキスト色 外背景色
 
言語 文字位置
横幅 範囲 プレビュー


 上記コードを設置したい箇所に貼り付けます。

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

■使い方

 ユーザ名には半角英数字とアンダーバー。@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で日本語のフォロワー数を表示すると、ボタンがちょっと切れる

 気のせいです。

公式サイト
関連記事
  1. comment

コメント

Icon ※必須 :
Pass  ※入力した英数字を識別コードとしてNoに表示(123→LkZag.iM)

トラックバック

http://paro2day.blog122.fc2.com/tb.php/707-2456afe2

  1. trackback