Embedded Timelines

Embedded timelines are an easy way to embed multiple Tweets on your website in a compact, single-column view. Display the latest Tweets from a single Twitter account, multiple accounts, or tap into the worldwide conversation around a topic grouped in a search result. A Twitter collection may be rendered in either a list or a responsive grid template.

An embedded timeline consists of two parts: a link to the full timeline display on Twitter.com added to your webpages; and Twitter’s widget JavaScript to enhance the link with a fully-rendered Timeline. A list timeline template requires a widget configuration edited on Twitter.com.

Do you develop an iOS or Android application? Add a timeline to your application using Twitter Kit for iOS or for Android.

Timeline templates

All timelines support a list template display with polling for updates and theming customizations. A collection data source may be displayed in either a list or grid template. A grid template does not poll for updates and does not include theme customizations.

List template example

Grid template example

Timeline types

User timeline

A user timeline displays the latest Tweets ordered from newest to oldest from a specific public Twitter account.

List of users

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.

Search timeline

A search timeline displays Tweets from the past few weeks in the results of a Twitter search ranked by the Twitter search engine. A search widget may be configured to show only top Tweets and automatically remove Tweets marked as containing sensitive content.

Collection

A collection timeline displays multiple Tweets curated by a Twitter user in their chosen display order.

How to add an embedded timeline to your website

Grid template

Visit publish.twitter.com to generate embed HTML for a Twitter collection displayed in a responsive grid template.

List template

Visit publish.twitter.com to generate embed HTML for list templates backed by user timelines, like timelines, list timelines, and collections.

For list templates backed by a search query, visit the search timeline widget configurator on twitter.com. We recommend creating a new widget from the account responsible for your website (not your personal account) for easy discovery by your team and customization as your site changes.

The HTML snippet generated in our widget tools includes a snippet to load Twitter’s widgets JavaScript. You may omit this <script> element and load Twitter’s widgets JavaScript using our loading snippet once in your page template.

Dimensions

An embedded timeline list template automatically adjusts to the width of its parent element with a minimum width of 180 pixels and a maximum width of 520 pixels. A grid template has a minimum width of 220 pixels. Set the maximum width or the maximum height of an embedded timeline by adding a data-width or data-height attribute to the timeline’s anchor element.

<a class="twitter-timeline"
  href="https://twitter.com/TwitterDev"
  data-width="300"
  data-height="300">
Tweets by @TwitterDev
</a>

Customize widget components

Custom chrome

Control the frame around the list of compact Tweets displayed in a list template by setting a data-chrome attribute with space-separated tokens for each chrome component.

Token Description
noheader Hides the timeline header. Implementing sites must add their own Twitter attribution, link to the source timeline, and comply with other Twitter display requirements.
nofooter Hides the timeline footer and Tweet composer link, if included in the timeline widget type.
noborders Removes all borders within the widget including borders surrounding the widget area and separating Tweets.
noscrollbar Crops and hides the main timeline scrollbar, if visible. Please consider that hiding standard user interface components can affect the accessibility of your website.
transparent Removes the widget’s background color.

Example:

<a class="twitter-timeline"
  href="https://twitter.com/TwitterDev"
  data-chrome="nofooter noborders">
Tweets by @TwitterDev
</a>

Display a specific number of Tweets

Display a specific number of items between 1 and 20 by customizing your embed HTML.

Add a data-tweet-limit attribute to a list template. The timeline will automatically adjust its height to fit the specified number of Tweets. The timeline is fixed after display; it will not poll for new Tweets.

Add a data-limit attribute to a list template.

Example:

<a class="twitter-timeline"
  href="https://twitter.com/TwitterDev"
  data-tweet-limit="3">
Tweets by @TwitterDev
</a>

Increase accessibility priority of a timeline region

An embedded timeline describes its content for screen readers and other assistive technologies using additional markup defined in WAI-ARIA standards maintained by W3C. A timeline widget is a live region of a page which may receive updates as new Tweets become available. A timeline has a politeness value of polite by default; set a data-aria-polite attribute value of assertive to set the embedded timeline live region politeness to assertive.

<a class="twitter-timeline"
  href="https://twitter.com/TwitterDev"
  data-aria-polite="assertive">
Tweets by @TwitterDev
</a>