サイトのトップへ戻る

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

ツイートボタンの JavaScript ファクトリー関数

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

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



引数

url 必須

拡散するURL、もしくはURLを入れたくない場合は空の文字列

サンプル値: 'https://dev.twitter.com/'

targetEl 必須

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

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

options 任意

既定のウィジットオプションを上書きします。詳細については ツイートボタンのパラメーターリファレンスを参照してください。

サンプル値: { text: 'Hello world' }



ページに、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'
  }
);


Promiseオブジェクト

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

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


ハッシュタグボタンとメンションボタン

twttr.widgets.createHashtagButton関数 とtwttr.widgets.createMentionButton関数を使用して、それぞれハッシュボタンとメンションボタンを作成します。 同じオブジェクトを適用します。