Embedded List Timeline

A list timeline displays the latest Tweets ordered from newest to oldest from a curated public list of Twitter accounts. The timeline includes a header displaying the list’s name, description, and curator. Read more about Twitter lists.

Override list selection

A specific Twitter list is saved with each widget ID. Specify a new list owner and list to override the list displayed for the passed widget ID.

Add a data-list-owner-screen-name or data-list-owner-id attribute to specify the list owner’s Twitter username or numeric identifier respectively. Add a data-list-slug or data-list-id attribute to specify a list curated by the Twitter user.

The href attribute and inner text of the fallback anchor element should be updated to accurately reference the Twitter account relevant to the page.

A template example using data-list-owner-screen-name and data-list-slug:

<a class="twitter-timeline"
  data-widget-id="{widget_id}"
  href="https://twitter.com/{screen_name}/lists/{slug}"
  data-list-owner-screen-name="{screen_name}"
  data-list-slug="{slug}">
Tweets from https://twitter.com/{screen_name}/lists/{slug}
</a>

<a class="twitter-timeline"
  data-widget-id="600724936517242880"
  href="https://twitter.com/twitter/lists/official-twitter-accts"
  data-list-owner-screen-name="twitter"
  data-list-slug="official-twitter-accts">
Tweets from https://twitter.com/twitter/lists/official-twitter-accts
</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 timeline into your page.

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

twttr.widgets.createTimeline(
  "600724936517242880",
  document.getElementById("container"),
  {
    listOwnerScreenName: "twitter",
    listSlug: "official-twitter-accts"
  }
);