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.
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>
Our data science team is sharing their techniques for better understanding the people Tweeting about a topic.— Twitter Dev (@TwitterDev) March 6, 2018
In this latest post, @jrmontag takes us through the analysis of those Tweeting about the 2017 Cannes film festival. Take a look! 👀 https://t.co/T6ljBOPmiu
Join our 1st #TapIntoTwitter event at: 21/3@eladmeidar - Back to the 90s: Social text based gaming— Israel Developers Community (@TDC_israel) March 4, 2018
Roee Sheelo - Tokyo Drift: Visualizing Daily Life through The Twitter Lense@ran5000 - The next era of innovation for Twitter developers
spots are limited:https://t.co/YXKsLOkMN2 pic.twitter.com/aL8lgjajpC
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>