サイトのトップへ戻る

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

フォローボタンのJavaScript Factory Function

Twitterウィジットの JavaScript ライブラリは、twttr.widgets.createFollowButton 関数を使って、フォローボタンの動的挿入をサポートしています。 Twitter ユーザ名、対象となる親エレメント、任意のカスタムオプションを渡してください。

このページのコードは、あなたのページでTwitterの widgets.jsの読み込みが成功していることを前提に書かれています。JavaScript loader のドキュメントで説明しているように、 window.twttrを初期化している間に、あなたのページにscript loader を非同期でインクルードしてください。 widgets.jsに依存する全てのJavaScript コードは、twttr.ready上か twttr.readyの後に実行しなければなりません。



引数

username 必須

Twitter ユーザー名。

サンプル値: 'TwitterDev'

targetEl 必須

希望する挿入ポイントのDOM ノード。

サンプル値: document.getElementById('container')

options 任意

既定のウィジットオプションを上書きします。

サンプル値: { size: 'large' }



ページに、containerのDOM IDが付いたエレメントがあります。

<div id="container"></div>

以下のコードで、ユニークIDがcontainerのエレメント内に挿入する、 Twitter ユーザー名“TwitterDev”用のフォローボタンを新規作成します。

twttr.widgets.createFollowButton(
  'TwitterDev',
  document.getElementById('container'),
  {
    size: 'large'
  }
);


Promiseオブジェクト

twttr.widgets.createFollowButton関数は、 Promiseオブジェクトを戻り値として返します。 戻り値として取得するpromiseオブジェクトのthen関数にコールバック関数を渡すことで、ウィジットがあなたのページに埋め込まれた後にそのコードを実行することができます。

twttr.widgets.createFollowButton(...)
.then( function( el ) {
  console.log('Follow button added.');
});