Embedded timelines are an easy way to embed Tweets on your website in a compact, linear view. Display the latest Tweets from a Twitter account, lists, or your curated collections.
All timelines support a linear template display with polling for updates and theming customizations. Collections may be also be displayed in a rich photo-centric grid template.
Linear style example¶National Park Tweets - Curated tweets by TwitterDev
A profile timeline displays the latest Tweets from the specified (public) Twitter account.
A likes timeline displays the most recently liked Tweets from the specified (public) Twitter account.
An embedded timeline automatically adjusts to the width of its parent element with a minimum width of 180 pixels and a maximum width of 520 pixels. The grid display 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 embed code anchor element.
<a class="twitter-timeline" href="https://twitter.com/TwitterDev" data-width="300" data-height="300"> Tweets by @TwitterDev </a>
Customize widget components
Control the frame around the linear timeline by setting a data-chrome attribute with space-separated tokens for each chrome component.
|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.|
<a class="twitter-timeline" href="https://twitter.com/TwitterDev" data-chrome="nofooter noborders"> Tweets by @TwitterDev </a>
Limiting the number of Tweets displayed
Display a specific number of items between 1 and 20 by customizing your embed HTML.
Add a data-tweet-limit attribute to the embed code to specify a number of Tweets. The timeline will automatically adjust its height to display specified number of Tweets. The timeline is fixed after display; it will not poll for new Tweets.
<a class="twitter-timeline" href="https://twitter.com/TwitterDev" data-tweet-limit="3"> Tweets by @TwitterDev </a>
Accessibility: Override ARIA live politeness
An embedded timeline describes its content for screen readers and other assistive technologies using additional markup defined in WAI-ARIA standards. A timeline widget is a live region of a page which will receive updates when new Tweets become available.
By default, 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, for example if you’re using the embedded Timeline as a primary source of live content in your page.
<a class="twitter-timeline" href="https://twitter.com/TwitterDev" data-aria-polite="assertive"> Tweets by @TwitterDev </a>