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 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. Generate markup for an embedded collection URL through publish.twitter.com or through our oEmbed-compatible API.

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

The Twitter for Websites 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

HTML markup

A collection displayed using a list template can be added to a webpage through a common HTML template. Generate markup for an embedded collection URL through publish.twitter.com or through our oEmbed-compatible API.

A template example:

  <a class="twitter-timeline"
  href="https://twitter.com/{screen_name}/timelines/{collection_id}">
{collection_title}
</a>
  <a class="twitter-timeline"
  href="https://twitter.com/TwitterDev/timelines/539487832448843776">
National Park Tweets
</a>

JavaScript factory function

The Twitter for Websites JavaScript library supports dynamic insertion of a collection displayed in a list template using the twttr.widgets.createTimeline function. Pass a data source definition, 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(
    {
      sourceType: "collection",
      id: "539487832448843776"
    },
    document.getElementById("container")
  );
});

Was this document helpful?

Thank you

Thank you for the feedback. We’re really glad we could help!

Thank you for the feedback. How could we improve this document?

Thank you for the feedback. Your comments will help us improve our documents in the future.