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, your curated collections, or tap into the live conversation with a search query.
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 search timeline displays recent Tweets queried from Twitter search. Searches may be filtered for quality and ranked, depending on the query options you provide. The search widget may be configured to show only top Tweets and automatically remove Tweets marked as containing sensitive content.
How to add an embedded timeline to your website
Visit publish.twitter.com to generate embed codes for profiles, lists, and collections. You can also click “Embed this…” from the “•••” menu on timeline screens on Twitter.com, or the “Share” menu of a TweetDeck column.
You can create new search query timelines through the widget configurator on Twitter.com, or clicking “Embed this search” from the “•••” menu on a search result page.
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>