Skip to main content
Embedded timelines are an easy way to embed Posts on your website in a compact, linear view. Choose between a profile timeline to get the latest Posts from a X account, or a List timeline containing a curated list of Posts from your favorite X accounts. An embedded timeline consists of two parts: including an embed code that links your webpage to the timeline on x.com, and the X for Websites JavaScript to transform the link into a fully-rendered timeline.
Please note:We retired the Likes, Collections, and Moments timelines on January 13, 2023.We recommend you use the Profile and Lists timelines, which we’re updating to become faster, easier to use, and more up-to-date with X features and functionality.You can learn more about this change in our announcement.

​
Timeline types

​
Profile timeline

A profile timeline displays the latest Posts from the specified (public) X account.

​
List timeline

A list timeline displays the latest Posts from a curated, public list of X accounts. The timeline includes a header displaying the list’s name, description, and curator. To create lists on x.com or in the X app, learn more here.

​
How to add an embedded timeline to your website

Visit publish.x.com to generate embed codes for profiles and lists.

​
Customization

​
Dimensions

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://x.com/XDevelopers"
  data-width="300"
  data-height="300">
Posts by @XDevelopers
</a>

​
Custom chrome

Control the frame around the linear timeline by setting a data-chrome attribute with space-separated tokens for each chrome component.
TokenDescription
noheaderHides the timeline header. Implementing sites must add their own X attribution, link to the source timeline, and comply with other X display requirements.
nofooterHides the timeline footer and Post composer link, if included in the timeline widget type.
nobordersRemoves all borders within the widget including borders surrounding the widget area and separating Posts.
noscrollbarCrops and hides the main timeline scrollbar, if visible. Please consider that hiding standard user interface components can affect the accessibility of your website.
transparentRemoves the widget’s background color.

​
Example

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

​
Limiting the number of Posts 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 Posts. The timeline will automatically adjust its height to display a specified number of Posts. The timeline is fixed after display; it will not poll for new Posts until the page is refreshed.

​
Example

<a class="twitter-timeline"
  href="https://x.com/XDevelopers"
  data-tweet-limit="3">
Posts by @XDevelopers
</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 Posts 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://x.com/XDevelopers"
  data-aria-polite="assertive">
Posts by @XDevelopers
</a>