サイトのトップへ戻る

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

Scripting: ファクトリー機能

Twitter JavaScriptを使用すると、あなたは Developer Rules of the Roadへ同意したことになります。

ウェブサイト用Twitterウェブインテントを使ってあなたのサイトにTwitter を組み込んでいる場合は、 JavaScript機能を使って動的にウィジットの生成を行うことができます。

ウェブサイト用Twitterのプロダクト—ツイートボタン、フォローボタン、埋め込み型ツイートとタイムライン—はwidgets-jsという名前のJavaScript ユーティリティを使って全て読み込みます。あなたのページにウィジットを追加する場合、この JavaScript ファイルをHTML 埋め込みコードにインクルードするか、ページ内にhttps://platform.twitter.com/widgets.jsを直接インクルードすることができます。 (推奨されるコードについてはTFW 設定ドキュメント を参照してください。)

既定では、 widgets-js はページ内のマークアップを見つけ、基本的な機能のマークアップをリッチインタラクティブウィジットに変換します。 また、動的にTwitterコンテンツを動作させることができる widgets-js の機能がいくつかあります。:



ファクトリー機能を使った実行時にウィジットを作成する

HTML 埋め込みコードを使わず、実行時にウィジットを生成することができます。 ファクトリー機能群を使って、任意のウィジットタイプを生成できます。:



ボタン

createShareButtoncreateFollowButtoncreateHashtagButtoncreateMentionButton は同じ引数を設定します。



プライマリ引数

The first argument is required, and is unique to the button type. Provide a string representing one of:

  • url: 拡散する URL。
  • screen_name:フォローや言及されるユーザーの screen_name 。
  • hashtag:ツイートされ、ボタンに表示されるハッシュタグ。


追加引数:

  • target: 必須。ウィジットを内部に描写するエレメント。
  • options: 任意。ウィジットを設定する追加オプションのオブジェクトハッシュ。

ウィジットは通常 iframe エレメントとして描写されるので注意してください。 iframeをDOM内で移動させた場合、ブラウザはそのコンテンツを再読み込みします。ボタンの場合だとこの挙動は帯域を無駄に消費しますが、ツイートやタイムラインの場合は埋め込んだコンテンツを動的に取り除くことができます。 ウィジットをページの固定位置に描写するには、target引数を使用してください。 ウィジットの表示を遅らせる必要がある場合は、必要になるまでCSS を使ってウィジットを非表示にしてください。

全てのcreate 関数は戻り値として Promiseオブジェクトを返します。 コールバック関数を渡すことで、ウィジットが作成された後にそのコードを実行することができます。:

twttr.widgets.createFoo()
.then(function (element) {
  console.log("Widget created.")
 });

実行された時、promiseオブジェクトは新しく作成されたウィジットエレメントへの参照をコールバック関数に引数として渡します。



例:

URLの拡散ボタンを作成します:

twttr.widgets.createShareButton(
  'https://dev.twitter.com/',
  document.getElementById('new-button'),
  {
    count: 'none',
    text: 'Sharing a URL using the Tweet Button'
  }).then(function (el) {
    console.log("Button created.")
  });

ユーザーのフォローボタンを作成します:

twttr.widgets.createFollowButton(
  'endform',
  document.getElementById('new-button'),
  {
    size: 'large'
  }).then(function (el) {
    console.log("Follow button created.")
  });


オプション

上記の例のように、追加の設定やオプションをファクトリー関数に渡すことができます。

全てのウィジットの追加設定
オプション 既定値 説明
dnt true, false false このウィジットのトラッキング拒否 を有効にします。
hashtags スペースで区切ったハッシュタグ一覧。 Undefined 適切な場合に、既定のツイート文に追加されるハッシュタグ一覧。
lang ISO 639-1 言語コード。 en ウィジットを描写する言語。サポートしている場合。 (翻訳センターを参照してください。)
related コンマで区切った、有効なTwitterスクリーンネーム一覧。 Undefined ツイートが投稿された後にフォローを勧めるユーザーのTwitterスクリーンネーム一覧。
via 有効なTwitter スクリーンネーム。 Undefined 適切な場合に、既定のツイート文に@user さんからと記載されるTwitterユーザー。
ボタンウィジットの追加設定
オプション 既定値 説明
align left, right locale dependent (left もしくは right。言語のテキスト方向に依存。) iframe内のボタンの配置; use this to ensure flush layout when aligning buttons against opposite edges of your grid.
count none, horizontal, vertical horizontal シェアボタンとフォローボタンのみ。 (垂直方向のカウントはシェアボタンでのみ使用できます。)
counturl 有効な URL。 Undefined カウントされる canonical URL が拡散するURLと違う場合は、このURLを渡してカウントを参照することができます。 (シェアボタンのみ.)
size medium, large medium
text 任意の文字列 Undefined ツイートウェブインテント内で強調状態でユーザーに表示される既定テキスト。


ツイート

createTweet はツイートのIDと、後はボタンと同じ追加引数を設定します。



引数

  • tweetId: 描写するツイートの ID 。 ( Twitter ID は64-bit 整数で生成され、 JavaScript で扱う整数は 53 ビットに制限されるため、この値はStringとして設定する必要があります)
  • target: 必須。ウィジットを内部に描写するエレメント。
  • options: 任意。ウィジットを設定する追加オプションのオブジェクトハッシュ。


例:

US インテリアデパートがつぶやくツイートの埋め込み型ツイートを作成します。:

twttr.widgets.createTweet(
  '511181794914627584',
  document.getElementById('first-tweet'),
  {
    align: 'left'
  })
  .then(function (el) {
    console.log("@ev's Tweet has been displayed.")
  });


オプション

埋め込み型ツイートの追加オプション。
オプション 既定値 説明
align left, right, center Undefined Float the embedded Tweet to the left or right so that text wraps around it, or align center so it floats in the middle of a paragraph.
conversation none, all all ツイートがリプライされている場合、既定ではスレッドの前のツイートは表示されます。スレッドを非表示にしてツイートを一つだけ表示するには none を使用してください。
cards hidden, visible visible ツイート内のTwitter Cardsを通して拡張メディアを描写するかどうかを切り替えます。 また、ツイッターへアップロードされている画像にも適用されます。
width 数値型の値 auto。container のサイズから算出。 埋め込み型ウィジットの横幅を固定します。
linkColor 16進カラー値。例えば #cc0000 既定はblue。設定したテーマごとに変わる。 ウィジット内のリンクの色を調節。
theme dark, light light ウィジットの既定の配色を切り替える。


タイムライン

createTimeline では、ウィジット設定で最初にタイムムラインを作成した時に取得されるタイムラインIDを使用します。追加引数は埋め込み型ツイートと同じものになります。



引数

  • widgetId: 描写するタイムラインウィジットのID 。
  • target: 必須。ウィジットを内部に描写するエレメント。
  • options: 任意。ウィジットを設定する追加オプションのオブジェクトハッシュ。


例:

タイムラインウィジットを作成:

twttr.widgets.createTimeline(
  '123456',
  document.getElementById('timeline'),
  {
    width: '450',
    height: '700',
    related: 'twitterdev,twitterapi'
  }).then(function (el) {
    console.log("Embedded a timeline.")
  });


オプション

上記で説明されている全ウィジットと埋め込み型ツイートで使用できるパラメータは、全て埋め込み型タイムラインでも使用できます。

埋め込み型タイムラインの追加オプション。
オプション 既定値 説明
ariaPolite polite, assertive, rude polite 描写するタイムラインに、指定したaria-polite動作を適用します。
height 数値型の値 600 埋め込み型ウィジットの高さを固定する。
borderColor 16進カラー値。例えば #cc0000 既定は grey。設定したテーマごとに変わる。 ウィジット内の区切り線の色を調節。
chrome noheader, nofooter, noborders, transparent, noscrollbar Undefined このウィジット内のdesign エレメントの表示を切り替えます。このパラメータはスペース区切りにした値の一覧です。
tweetLimit 1-20 Undefined ツイートをn個のみ表示し、タイムラインを固定描写します。
screenName 任意の有効な Twitter スクリーンネーム Undefined タイムライン取得元をこのユーザーのツイートで上書きします。
userId 任意の有効な Twitter ユーザー ID Undefined
showReplies true, false false ユーザータイムラインを上書きする場合、他のユーザーへのリプライツイートを含めます。
favoritesScreenName 任意の有効な Twitter スクリーンネーム Undefined タイムライン元をこのユーザーのお気に入りツイートで上書きします。
favoritesUserId 任意の有効な Twitter ユーザー ID Undefined
listOwnerScreenName 任意の有効な Twitter スクリーンネーム Undefined タイムライン元をこのユーザーが所有するリストのツイートで上書きします。 listIdlistSlugと組み合わせて使わなければなりません。
listOwnerId 任意の有効な Twitter ユーザーID Undefined
listId 任意の有効な Twitter リスト ID Undefined タイムライン元をこのリストのツイートで上書きします。 listOwnerIdlistOwnerScreenNameと組み合わせて使わなければなりません。
listSlug URL twitter.com/benward/example-list内で使用されるリストの文字列型識別子。 Undefined

埋め込み型タイムラインのオプションに関する詳細情報については、埋め込み型タイムラインを参照してください。


これらの機能を使うことで、Twitter ユーザーのコンテンツをあなたのサイトのJavaScript アプリケーションに動的に取り込んだり、 ユーザーの操作結果をあなたのアプリケーションに反映させたりできるようになります。

質問がある場合やコードとサンプルを共有したい場合は 開発者フォーラムまでお願いします。またメインのウェブサイト用Twitter のドキュメントを参照することもできます。