埋め込みタイムライン

埋め込みタイムラインは、多数のツイートを、コンパクトに一列にまとめて、ウェブサイトに簡単に埋め込む方法です。単一または複数のTwitterアカウントから集めた最新のツイートを表示したり、特定のトピックについての世界中のユーザーの会話を検索して、その結果をまとめて表示します。Twitterコレクションは、リストまたはレスポンシブグリッドテンプレートで表示できます。

埋め込みタイムラインは2つの部分から成ります。1つはユーザーのウェブページに追加されたTwitter.com上の全タイムライン表示へのリンクであり、もう1つはそのリンクをフル描写のタイムラインで強化するTwitterのウィジェットJavaScriptです。リストタイムラインテンプレートには、Twitter.comで編集したウィジェット構成が必要です。

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

タイムラインテンプレート

タイムラインはすべて、更新のためにポーリングしたり、カスタマイズのテーマに合わせた構成を行うことによって、リストテンプレート表示をサポートします。コレクションデータソースは、リストまたはレスポンシブグリッドテンプレートに表示されます。グリッドテンプレートは、更新のためのポーリングはせず、カスタマイズのテーマに合わせた構成はしません。

リストテンプレートの例

グリッドテンプレートの例

タイムラインの種類

ユーザータイムライン

ユーザータイムラインは、特定の公開Twitterアカウントから指示された取得された最新のツイートを新しいものから順に表示します。

ユーザーのリスト

リストタイムラインは、Twitterアカウントをまとめた公開リストから取得された最新のツイートを新しいものから順に表示します。タイムラインには、リストの名称、説明、管理者を表示するヘッダーがあります。Twitterlistについて続きを読む.

検索タイムライン

検索タイムラインは、Twitter検索エンジンによってランク付けされた過去数週間のTwitter検索結果のツイートを表示します。検索ウィジェットは、トップツイートのみを表示し、センシティブコンテンツを含んでいると判断されたツイートを自動的に削除するように設定できます。

コレクション

コレクションタイムラインは、Twitterユーザーがまとめた複数のツイートを、ユーザーが選択した表示順で表示します。

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

グリッドテンプレートe

publish.twitter.comをアクセスし、レスポンシブグリッドテンプレートに表示されるTwitterコレクションの埋め込みHTMLを作成します。

リストテンプレート

publish.twitter.comをアクセスし、ユーザータイムライン、ライクタイムライン、リストタイムライン、およびコレクションの背景となるリストテンプレートの埋め込みHTMLを作成します。

検索クエリーの背景となるリストテンプレートを作成するために、twitter.comのsearch timeline widget configuratorをアクセスします。チームによる公開が容易で、サイト独自のカスタマイズができるように、(ユーザーの個人アカウントではなく)ユーザのウェブサイトの責任者のアカウントから新しいウェジェットを作成することを推奨します。

ウィジェットツールで生成したHTMLスニペットには、TwitterのウィジェットJavaScriptをロードするスニペットが含まれます。ユーザーのページテンプレートに一度ローディングスニペットを使用すれば、この<script>エレメントと TwitterのウィジェットJavaScriptのロードを省略することができます。

ディメンジョン

埋め込みタイムラインは、親要素の幅を最小180ピクセル、最大520ピクセルで自動的に調整するテンプレートをリストアップします。グリッドテンプレートの最小幅は220ピクセルです。タイムラインのアンカー要素にデータの幅またはデータの高さ属性を追加することによって、埋め込みタイムラインの最大幅または最大高さを設定します。

<a class="twitter-timeline"
href="https://twitter.com/TwitterDev"
data-width="300"
data-height="300">
@TwitterDevによるツイート
</a>

ウィジェットコンポーネントのカスタマイズ

カスタムクローム

各クロームコンポーネントに対して、data-chrom属性をスペース区切りトークンで設定することによって、リストテンプレートに表示されたコンパクトツイートのリストを囲むフレームを制御します。

トークン 説明
noheader タイムラインヘッダーを非表示にします。サイトを実装するには、サイト独自のTwitter属性を追加し、ソースタイムラインへのリンクを張り、その他のTwitter表示基準に準拠する必要があります。
nofooter タイムラインウィジェットタイプに含まれると、タイムラインフッターとツイートコンポーザーリンクを非表示にします。
noborders ウィジェット領域を囲む境界線やツイートを分ける境界線を含むウィジェット内のすべての境界線を非表示にします。
noscrollbar 目に見える場合は、メインタイムラインスクロールバーを切り取って非表示にします。標準的なユーザーインタフェースコンポーネントを非表示にすると、ウェブサイトの利用しやすさに影響する可能性があるということを考慮してください。
transparent ウィジェットの背景色を削除します。

例:

<a class="twitter-timeline"
href="https://twitter.com/TwitterDev"
data-chrome="nofooter noborders">
@TwitterDevによるツイート
</a>

特定の数のツイートを表示

埋め込みHTMLをカスタマイズすることによって、1から20の特定の数の項目を表示します。

リストテンプレートにdata-tweet-limit属性を追加します。指定されたツイート数に合わせて、タイムラインの高さが自動的に調整されます。表示後、タイムラインは固定され、新しいツィートの投稿はできなくなります。

リストテンプレートにデータリミット属性を追加します。

例:

タイムライン領域のアクセシビリティ優先度を上げる

埋め込みタイムラインは、W3Cが保守しているWAI-ARIA標準で定義された付加的なマークアップを使って、スクリーンリーダー、その他の支援技術にそのコンテンツを伝達します。タイムラインウィジェットは、新しいツイートが利用できる状態になったときに、更新情報を受け取ることができるページのライブリージョンです。タイムラインのpoliteness値は、初期設定ではpoliteとなっています。埋め込みタイムラインのライブリージョンのpolitenessをassertiveに設定するには、data-aria-polite属性の値を、assertiveに設定します。

<a class="twitter-timeline"
href="https://twitter.com/TwitterDev"
data-aria-polite="assertive">
@TwitterDevによるツイート
</a>