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 埋め込みコードを使わず、実行時にウィジットを生成することができます。 ファクトリー機能群を使って、任意のウィジットタイプを生成できます。:
twttr.widgets.createShareButton
twttr.widgets.createFollowButton
twttr.widgets.createHashtagButton
twttr.widgets.createMentionButton
twttr.widgets.createTimeline
twttr.widgets.createTweet
createShareButton
とcreateFollowButton
と createHashtagButton
と createMentionButton
は同じ引数を設定します。
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
|
タイムライン元をこのユーザーが所有するリストのツイートで上書きします。
listId かlistSlug と組み合わせて使わなければなりません。
|
listOwnerId
|
任意の有効な Twitter ユーザーID |
Undefined
|
|
listId
|
任意の有効な Twitter リスト ID |
Undefined
|
タイムライン元をこのリストのツイートで上書きします。
listOwnerId かlistOwnerScreenName と組み合わせて使わなければなりません。
|
listSlug
|
URL twitter.com/benward/example-list 内で使用されるリストの文字列型識別子。
|
Undefined
|
埋め込み型タイムラインのオプションに関する詳細情報については、埋め込み型タイムラインを参照してください。
これらの機能を使うことで、Twitter ユーザーのコンテンツをあなたのサイトのJavaScript アプリケーションに動的に取り込んだり、 ユーザーの操作結果をあなたのアプリケーションに反映させたりできるようになります。
質問がある場合やコードとサンプルを共有したい場合は 開発者フォーラムまでお願いします。またメインのウェブサイト用Twitter のドキュメントを参照することもできます。