Twitterウィジットの JavaScript ライブラリは、twttr.widgets.createFollowButton
関数を使って、フォローボタンの動的挿入をサポートしています。 Twitter ユーザ名、対象となる親エレメント、任意のカスタムオプションを渡してください。
このページのコードは、あなたのページでTwitterの widgets.js
の読み込みが成功していることを前提に書かれています。JavaScript loader のドキュメントで説明しているように、 window.twttr
を初期化している間に、あなたのページにscript loader を非同期でインクルードしてください。 widgets.js
に依存する全てのJavaScript コードは、twttr.ready
上か twttr.ready
の後に実行しなければなりません。
Follow Button JavaScript Factory FunctionTwitter’s widget JavaScript library supports dynamic insertion of a follow button using the The code snippets on this page assume Twitter’s |
Twitter ユーザー名。
サンプル値: 'TwitterDev'
希望する挿入ポイントのDOM ノード。
サンプル値: document.getElementById('container')
既定のウィジットオプションを上書きします。
サンプル値: { size: 'large' }
Arguments
username
required
A Twitter username. Example Values:
targetEl
required
DOM node of the desired insertion point. Example Values:
options
optional
Override default widget options. Example Values: |
ページに、container
のDOM IDが付いたエレメントがあります。
<div id="container"></div>
以下のコードで、ユニークIDがcontainer
のエレメント内に挿入する、 Twitter ユーザー名“TwitterDev”用のフォローボタンを新規作成します。
twttr.widgets.createFollowButton( 'TwitterDev', document.getElementById('container'), { size: 'large' } );
ExampleAn element with a DOM ID of <div id="container"></div> The code snippet below will create a new follow button for the Twitter username “TwitterDev” inserted into a page inside an element with a unique ID of twttr.widgets.createFollowButton( 'TwitterDev', document.getElementById('container'), { size: 'large' } ); |
twttr.widgets.createFollowButton
関数は、 Promise
オブジェクトを戻り値として返します。 戻り値として取得するpromiseオブジェクトのthen
関数にコールバック関数を渡すことで、ウィジットがあなたのページに埋め込まれた後にそのコードを実行することができます。
twttr.widgets.createFollowButton(...) .then( function( el ) { console.log('Follow button added.'); });
PromisesThe twttr.widgets.createFollowButton(...) .then( function( el ) { console.log('Follow button added.'); }); |