Twitterウィジットの JavaScript ライブラリは、twttr.widgets.createShareButton関数を使って、ツイートボタンの動的挿入をサポートしています。
拡散するURL、対象となる親エレメント、任意のカスタムオプションを渡してください。
このページのコードは、あなたのページでTwitterの widgets.jsの読み込みが成功していることを前提に書かれています。
JavaScript loader のドキュメントで説明しているように、
window.twttrを初期化している間に、あなたのページにscript loader を非同期でインクルードしてください。
widgets.jsに依存する全てのJavaScript コードは、twttr.ready上か twttr.readyの後に実行しなければなりません。
Tweet Button JavaScript Factory FunctionTwitter’s widget JavaScript library supports dynamic insertion of a Tweet button using the The code snippets on this page assume Twitter’s |
拡散するURL、もしくはURLを入れたくない場合は空の文字列
サンプル値: 'https://dev.twitter.com/'
希望する挿入ポイントのDOM ノード。
サンプル値: document.getElementById('container')
既定のウィジットオプションを上書きします。詳細については ツイートボタンのパラメーターリファレンスを参照してください。
サンプル値: { text: 'Hello world' }
Arguments
url
required
A share URL, or an empty string if you would not like to include a Tweet composer URL component. Example Values:
targetEl
required
DOM node of the desired insertion point. Example Values:
options
optional
Override default widget options. See Tweet button parameter reference for details. Example Values: |
ページに、containerのDOM IDが付いたエレメントがあります。
<div id="container"></div>
以下のコードで、ユニークIDがcontainerのエレメント内に挿入する、 “Hello world”のテキストと “https://dev.twitter.com/” のURLが事前に埋め込まれたツイートボタンを新規作成します。
twttr.widgets.createShareButton(
'https://dev.twitter.com/',
document.getElementById('container'),
{
text: 'Hello World'
}
);
ExampleAn element with a DOM ID of <div id="container"></div> The code snippet below will create a new Tweet button with pre-selected share text of “Hello world” and a shared URL of “https://dev.twitter.com/” inserted into a page inside an element with a unique ID of twttr.widgets.createShareButton(
'https://dev.twitter.com/',
document.getElementById('container'),
{
text: 'Hello World'
}
);
|
twttr.widgets.createShareButton 関数は、 Promiseオブジェクトを戻り値として返します。
戻り値として取得するpromiseオブジェクトのthen関数にコールバック関数を渡すことで、ウィジットがあなたのページに埋め込まれた後にそのコードを実行することができます。
twttr.widgets.createShareButton(...)
.then( function( el ) {
console.log('Tweet button added.');
});
PromisesThe twttr.widgets.createShareButton(...)
.then( function( el ) {
console.log('Tweet button added.');
});
|
twttr.widgets.createHashtagButton関数 とtwttr.widgets.createMentionButton関数を使用して、それぞれハッシュボタンとメンションボタンを作成します。
同じオブジェクトを適用します。
Hashtag, Mention buttonsCreate a hashtag or mention button using the |