埋め込みタイムライン¶
English | 日本語
埋め込みタイムラインを使用すると、あなたのウェブサイトに多数のツイートをコンパクトに一列にまとめて簡単に埋め込むことができます。単一または複数のTwitterアカウントから集めた最新のツイートを表示したり、特定の話題についての世界中のユーザーの会話を検索し、その結果をひとまとめに表示したりすることができます。
埋め込みタイムラインは、3つの部分から成ります。1つ目は、Twitter.comで編集したウィジェットの設定です。2つ目は、Twitter.com上のタイムライン表示全体へのリンクで、これをウェブページに追加することになります。3つ目は、TwitterのウィジェットのJavaScriptです。このJavaScriptによってリンクにさまざまな属性が加えられて、タイムラインの最終的な表示結果が生成されます。
iOSまたはAndroidのアプリケーションを開発している方は、Twitter Kit (iOS用またはAndroid用) を使ってアプリケーションにタイムラインを追加しましょう。
タイムラインのタイプ¶
ユーザータイムライン¶
ユーザータイムラインには、Twitterの特定の公開アカウントから取得された最新のツイートが新しいものから順に表示されます。タイムラインのヘッダーには、フォロワーを獲得するための [フォロー] ボタンが表示されます。また、フッターにはメンションのウェブインテントが表示され、そこから新たに自分のTwitterアカウントに特化した会話を促すことができます。
ユーザーのリスト¶
リストタイムラインには、Twitterアカウントをまとめた公開リストから、最新のツイートが新しいものから順に表示されます。タイムラインのヘッダーには、リストの名前、説明、Curatorが表示されます。Twitterのリストについて詳しくは、こちらをご覧ください。
検索結果タイムライン¶
検索結果タイムラインには、Twitter検索の結果に含まれる過去数週間のツイートがTwitterの検索エンジンによってランク付けされて表示されます。検索ウィジェットを設定することで、トップツイートのみを表示したり、不適切な内容を含むと判断されたツイートを自動的に削除したりすることができます。
埋め込みタイムラインをウェブサイトに追加する方法¶
1. Twitter.comにログインした状態で新しいタイムラインウィジェットを作成。新しいウィジェットは、(個人用のアカウントではなく) ウェブサイトの管理責任を与えられたアカウントで作成することを推奨。その方がチームに気付いてもらいやすく、サイトに変更が生じたときのカスタマイズも簡単
2. 自分のサイト上のタイムラインウィジェットに表示したいコンテンツを選択。ユーザータイムライン、検索結果タイムラインの検索クエリなどに使用するTwitterユーザー名を入力
3. ウィジェットの表示をカスタマイズ。写真を自動的に開くなど、ウィジェットのオプションを選択 (または選択解除)
4. [ウィジェットを作成] を選択。保存した詳細設定やマークアップで新しいウィジェットIDが作成される。HTMLをコピーしてウェブページまたはテンプレートに貼り付け
ウィジェットツールで生成されたHTMLスニペットには、Twitterのwidgets.jsをロードするためのコードが含まれています。この<script>要素は無視し、ページテンプレート内でTwitterのロードスニペットを1回使用して、widgets.jsをロードしてかまいません。
サイズ¶
埋め込みタイムラインのサイズは、その親要素の幅に合わせて自動的に調整されます (最小幅180ピクセル、最大幅520ピクセル)。埋め込みタイムラインの幅または高さの最大値を設定するには、タイムラインのアンカー要素に``width``属性またはheight属性を追加してください。
<a class="twitter-timeline"
data-widget-id="600720083413962752"
href="https://twitter.com/TwitterDev"
width="300"
height="300">
Tweets by @TwitterDev
</a>
ウィジェットのコンポーネントのカスタマイズ¶
外観のカスタマイズ¶
コンパクトなツイートのリストの周囲に表示される枠を制御するには、data-chrome属性を設定します。外観を表す各要素のトークンをスペースで区切って指定します。
noheader
タイムラインのヘッダーを非表示にします。Twitterのアトリビューションやソースタイムラインへのリンクなど、Twitterの表示要件は、実装するサイト側で独自に追加する必要があります。
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>