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 |