サイトのトップへ戻る

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




埋め込み型タイムライン

埋め込み型タイムラインは、あなたのウェブサイトに複数のツイートをコンパクトな一列表示で埋め込むため簡単な方法です。 Display the latest Tweets from a single Twitter account, multiple accounts, or tap into the worldwide conversation around a topic grouped in a search result.

埋め込み型タイムラインは三つのパーツで構成されています: Twitter.com上で編集できるウィジット設定; あなたのウェブページへ追加する、Twitter.com 上で表示されるフルのタイムラインへのリンク; リンクをフル描写タイムラインに補強するための Twitterウィジット JavaScript。

あなたは iOS や Android のアプリケーションを開発していますか? iOS や Android用のTwitterキットを使用して、あなたのアプリケーションにタイムラインを追加してください。



タイムラインの種類



ユーザータイムライン

ユーザータイムラインは指定した公開ツイートアカウントから、最新のツイートを新しいものから古い順に表示します。 このタイムラインは、ヘッダにはフォロワーを勧誘するフォローボタン を持ち、 フッタにはあなたのTwitter アカウントと会話するためのメンション用のウェブインテントを持ちます。



ユーザーのリスト

リストタイムラインは抽出したTwitterアカウントの公開リストから、最新のツイートを新しいものから古い順に表示します。 このタイムラインは、ヘッダにはリスト名、説明、抽出者が表示されます。詳細はTwitter リストについて読んでください。



検索タイムラインはTwitter の検索エンジンによってランク付けされたTwitter検索結果の中から過去数週間分のツイートを表示します。 検索ウィジットは、トップツイートのみを表示したり、不適切なコンテンツとしてマークされているツイートを自動的に削除したりするように設定ができます。



コレクション

コレクションタイムラインは Twitter ユーザーによって抽出された複数のツイートを彼らが選んだ順番で表示します。



あなたのウェブサイトに埋め込み型タイムラインを追加する方法

1. Twitter.comにログインして新しいタイムラインウィジットを作成します。あなたのウェブサイトの責任アカウント(あなたの個人アカウントではなく)で新しいウィジットを作成することを推奨します for easy discovery by your team and customization as your site changes.

2. あなたのサイトのタイムラインで表示したいコンテンツを選びます。ユーザータイムライン用の Twitter ユーザー名、検索タイムライン用の検索クエリなどを入力してください。

3. auto-expand photosのようなウィジットオプションの選択や選択解除を行い、あなたのウィジット表示をカスタマイズします。

4. 保存した設定やマークアップを使って新しいウィジット識別子を生成するには “Create widget”を選択します。 そのHTMLをあなたのウェブページやテンプレートにコピーペーストしてください。

ウィジットツールで生成されたHTMLコードには、Twitterのウィジット JavaScriptを読み込むためのコードが含まれています。 あなたのページのテンプレートで既に読み込んだコードを使うことで、この <script> エレメントと Twitterのウィジット JavaScriptの読み込みを省略できます。



サイズ

埋め込み型タイムラインは、、親エレメントの横幅に合わせて最小180ピクセルから最大520ピクセルの横幅で自動的に調整されます。 タイムラインのa(アンカー)エレメントにwidth属性やheight属性を追加することで、埋め込み型タイムラインの最大横幅や最大高さを設定します。

<a class="twitter-timeline"
  data-widget-id="600720083413962752"
  href="https://twitter.com/TwitterDev"
  width="300"
  height="300">
Tweets by @TwitterDev
</a>


ウィジットコンポーネントをカスタマイズする



chromeをカスタマイズする

data-chrome属性に各chrome コンポーネントのトークンをスペース区切りで設定することで、コンパクトなツイート一覧の周りのフレームを制御します。

noheader

タイムラインのヘッダを非表示にします。 実装するサイトではタイムライン元へリンクするためのTwitter独自の属性を追加し、その他Twitterの表示要件に準拠する必要があります。

nofooter

使用してるタイムラインウィジットに含まれている場合、タイムラインのフッタとツイート書き込みボックスへのリンクを非表示にします。

noborders

ウィジットエリアを囲む区切り線と各ツイートごとの区切り線を含む、ウィジットの全ての区切り線を削除します。

noscrollbar

タイムラインのメインスクロールバーが表示される場合に、それを非表示にします。 標準のユーザーインタフェースコンポーネントを非表示にすると、あなたのウェブサイトのアクセシビリティに影響が出るので気をつけてください。

transparent

ウィジットの背景色を削除します。

例:

<a class="twitter-timeline"
  data-widget-id="600720083413962752"
  href="https://twitter.com/TwitterDev"
  data-chrome="nofooter noborders">
Tweets by @TwitterDev
</a>


指定した数のツイートを表示する

data-tweet-limit 属性に1から20の間の値を追加することで、指定した数のツイートを表示します。 このタイムラインは、指定したツイートの数に合わせて自動的に高さを調節します。このタイムラインは表示が完了した後に固定されます。; 新しいツイートのポーリングは行いません。

例:

<a class="twitter-timeline"
  data-widget-id="600720083413962752"
  href="https://twitter.com/TwitterDev"
  data-tweet-limit="3">
Tweets by @TwitterDev
</a>


タイムラインの更新優先順位を上げる

埋め込み型タイムラインは、W3Cが管理するWAI-ARIA 標準で定義された追加マークアップを使って 自身のコンテンツ内容を説明します。 タイムラインウィジットは、新しいツイートが使用可能になった時にその更新を受信することができる、ライブリージョンです。 既定では、タイムラインのpoliteness は polite になっています。; 埋め込み型タイムラインのライブリージョンpoliteness を assertiveに設定するには、data-aria-polite属性にassertive の値を設定してください。

<a class="twitter-timeline"
  data-widget-id="600720083413962752"
  href="https://twitter.com/TwitterDev"
  data-aria-polite="assertive">
Tweets by @TwitterDev
</a>