埋め込みコレクションタイムライン

コレクションタイムラインには、Twitterユーザーによってまとめられた複数のツイートがその選択された表示順で表示されます。新しいコレクションは、TweetDeckを使って作成するか、Twitter APIを使って直接作成します。

新しい埋め込みコレクションタイムラインの作成は、自分のTwitterアカウントに関連付けられているコレクションに対し、そのアカウントのウィジェット設定から行います。

コレクションの表示内容の上書き

具体的なTwitterリストは、それぞれのウィジェットIDで保存されます。data-custom-timeline-id属性を追加し、数値のタイムラインID値を指定してください。数値のIDを指定するためには、APIレスポンスからの読み取り時にcustom-プレフィックスを取り除かなければならない場合があります。フォールバックアンカー要素のhref属性と内部テキストは、そのページに関連したTwitterタイムラインを正しく参照するように変更する必要があります。

テンプレートの例:

<a class="twitter-timeline"
  data-widget-id="{widget_id}"
  href="https://twitter.com/{screen_name}/timelines/{collection_id}"
  data-custom-timeline-id="{collection_id}">
{collection_name}
</a>
<a class="twitter-timeline"
  data-widget-id="601877449689804800"
  href="https://twitter.com/TwitterMusic/timelines/393773266801659904"
  data-custom-timeline-id="393773266801659904">
Music Superstars
</a>

JavaScriptファクトリ関数

TwitterのウィジェットのJavaScriptライブラリは、twttr.widgets.createTimeline関数を使用した埋め込みユーザータイムラインの動的挿入をサポートしています。ウィジェットID、ターゲットコンテナ要素、さらにオプションのoptionsオブジェクトを渡すことによって、埋め込みコレクションタイムラインがページに挿入されます。

HTMLの「data-」で始まるパラメーターは、optionsオブジェクトのプロパティとして渡す際にはキャメルケースで指定します。

twttr.ready(function(twttr){
  twttr.widgets.createTimeline(
    "601877449689804800",
    document.getElementById("container"),
    {
      customTimelineId: "393773266801659904"
    }
  );
});