サイトのトップへ戻る

Twitter 開発者 ドキュメント日本語訳




フォローボタン

フォローボタンは、閲覧者がTwitterアカウントを簡単にフォローできるようにするため、ウェブサイトに表示する小さなボタンです。 フォローボタンは二つのパーツで構成されています: Twitter.com上にあるフォロー用のウェブインテントページへのリンクと 、Twitter公式の見栄えになるようリンクを補強して即座にフォローボタンだと分かるようにするためのTwitterウィジット JavaScriptです。

フォローボタンジェネレータ を使うと、画面フォーム上から操作して簡単にHTMLマークアップを生成し、あなたのウェブサイトのテンプレートにコピーペーストできます。



ユーザーの操作の流れ

フォローボタンを選ぶと、プロフィル概要やそのアカウントのいくつかの最新ツイートと共にフォローアクションを表示する小ウィンドウが新規にポップアップされます。

Screenshot of a Twitter.com follow intent window

閲覧者は、プロフィール概要と共に表示されたフォローアクションをクリックして、指定アカウントからそのツイートをフォローすることができます。

Twitter ユーザーが子ウィンドウでフォローを行うと、あなたのウェブページで followイベントが発生します。

ログアウトの流れ

Twitterにログインしていない閲覧者は、ログインしてアカウントをフォローするよう促されます。 フォローアクションは、フォロー用インテントのログインの流れの一部として発生します。

Screenshot of a Twitter.com follow intent window displayed to a logged-out Twitter user


フォローボタンをあなたのウェブサイトに追加する方法

1.TwitterのウィジットJavaScript がエレメントを見つけてツイートボタンへのリンクを補強できるようにするため、twitter-follow-button クラスの付いたa(アンカー)エレメントを新たに作成します。

<a class="twitter-follow-button"
  href="https://twitter.com/TwitterDev">
Follow @TwitterDev</a>

2. data-* 属性を使ってフォローボタンのパラメータをカスタマイズします。

<a class="twitter-follow-button"
  href="https://twitter.com/TwitterDev"
  data-size="large">
Follow @TwitterDev</a>

3. 読み込み用のコードを使って、非同期にTwitterのウィジットJavaScriptを読み込みます。 このJavaScript コードでは、現在のページに実装された既存の TwitterのウェブウィジットJavaScriptのバージョンを確認し、 ウィジットJavaScript が読み込まれた後にファンクションキューを初期化して実行し、TwitterのCDNから ウィジットJavaScript を非同期に読み込みます。



ボタンのカスタマイズ

フォローカウントを非表示にする

data-show-count属性にfalseの値を設定することで、指定したアカウントをフォローしているTiwtterアカウントの数を非表示にします。

data-show-count 値 結果
(既定)
false


Twitterのユーザー名を隠す

data-show-screen-name 属性にfalseの値を設定することで、表示されるフォローボタンからユーザー名を非表示にします。

data-show-screen-name 値 結果
(既定)
false


大き目のボタンを表示する

大き目のフォローボタンを表示するには、large の値のdata-size 属性を追加します。

data-size value result
(default)
large