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.');
});
|