Skip to main content
Embedded Posts bring your pick of content from X into your website articles. An embedded Post includes photos, video and cards media created for display on X, and can even stream live video from Periscope. All aspects of X’s display requirements are handled for you by using our tools; author attribution, Post actions, hashtags, mentions, and other key components of the X experience. An embedded Post consists of two parts: An HTML snippet hosted in your web page, and the X for Websites JavaScript to transform that code into a fully-rendered Post. You can copy embedded Post markup generated from the Post menu on x.com, paste a URL into a supporting CMS, or add a Post to the page programmatically using a JavaScript factory function.

​
Embed from x.com

Every Post displayed on x.com includes an embed code to easily copy-and-paste into your webpage. Activate the Post menu and select “Embed Post to generate markup to include on your webpage:

​
Convert Post URLs using oEmbed

Programmatically convert a Post URL into embedded Post markup using the oEmbed API. Make embedding a Post in your CMS or app as simple as pasting a Post URL. 
https://publish.x.com/oembed?
  url=https://x.com/Interior/status/463440424141459456
Our CMS best practices guide describes common patterns for sites adding software support for embedded Posts.

​
Customize Post display

Customize an embedded Post for your site’s visual design and display preferences by including extra parameters in your embedded Post HTML.

​
Match your site’s color scheme

An embedded Post supports light and dark color themes. Customize X widgets at the page-level with <meta> elements or add data-* attributes to individual generated <blockquote> elements. View our embedded Post reference documentation for a full list of embedded Post options.

​
Don’t show previous Post in conversation thread

A Post may be in reply to another Post. By default, we include a summary of the previous Post in the conversation to provide context. Set an oEmbed query parameter of hide_thread=true or add a data-conversation="none" attribute to the resulting <blockquote> element to prevent the display of a parent Post.

​
Hide photos, videos, and Cards

A Post may include a photo, video, or link to or other content supporting a Card. By default, this media is displayed in embedded Posts. You can hide this media if editorially desired. Set an oEmbed query parameter of hide_media=true or add a data-cards="hidden" attribute to the resulting <blockquote> element to prevent expanded content display.

​
Customize Alignment

An embedded Post is aligned left by default. The Post can be center or right aligned if preferred using the align customization. While historically CSS provides numerous hacks for centering content on a web page, this is the recommended and official supported method.

​
Render a Post with JavaScript

Our widget JavaScript scans the DOM on execution, converting blockquote.twitter-tweet elements into fully-rendered embedded Posts based on element content. If dynamically inserting new content into a page, pass the new document fragment to twttr.widgets.load() to initialize embedded Post content. To directly render an embedded Post at runtime use the twttr.widgets.createTweet() function.