Timelines

Guides contents

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¶

National Park Tweets

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>

National Park Tweets - Curated tweets by TwitterDev

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")
  );
});