Embedded Collection Timeline

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

A collection data source can be displayed on a webpage in a grid template or list template. Display the same collection on iOS or Android using our native Twitter Kit libraries

Grid template

HTML markup

A responsive grid template backed by a collection can be added to a webpage through a common HTML template. The oEmbed endpoint used by Moments will return embed HTML for a passed collection URL.

A template example:

<a class="twitter-grid"
  href="https://twitter.com/{screen_name}/timelines/{collection_id}">
{collection_title}
</a>

<a class="twitter-grid"
  href="https://twitter.com/TwitterDev/timelines/539487832448843776">
National Park Tweets
</a>

A request to a Twitter.com collection URL will redirect based on the owner of the collection ID at the time of the request. It is possible to build a collection URL using only the collection ID, constructing the URL using a valid yet non-empty screen_name value such as _.

JavaScript factory function

Twitter’s widget JavaScript library supports dynamic insertion of a collection displayed in a list template using the twttr.widgets.createGridFromCollection function. Pass a collection ID, target container element, and optional options object to insert an embedded collection displayed in a grid template into your page.

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

twttr.ready(function(twttr){
  twttr.widgets.createGridFromCollection(
    "539487832448843776",
    document.getElementById("container"),
    {
      limit: 3
    }
  );
});

List template

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_title}
</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 a collection displayed in a list template using the twttr.widgets.createTimeline function. Pass a widget ID, target container element, and optional options object to insert an embedded collection displayed in a list template 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"
    }
  );
});