Embedded Collection Timeline

A collection timeline displays multiple Tweets curated by a Twitter user in their chosen display order. New collections are created through TweetDeck or directly through the Twitter API.

Create a new embedded collection timeline for a collection associated with your Twitter account from that account’s widget settings.

Override collection selection

A specific Twitter list is saved with each widget ID. Add a data-custom-timeline-id attribute with a numeric timeline ID value. Passing the numeric ID may require stripping a custom- prefix when reading from an API response. The href attribute and inner text of the fallback anchor element should be updated to accurately reference the Twitter timeline relevant to the page.

A template example:

<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 factory function

Twitter’s widget JavaScript library supports dynamic insertion of an embedded user timeline using the twttr.widgets.createTimeline function. Pass a widget ID, target container element, and optional options object to insert an embedded collection timeline into your page.

HTML data-* parameters are camelCased when passed as an options object property.

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