Embedded Tweets

An embedded Tweet brings brings the best content created on Twitter into your article or website. An embedded Tweet may include unique photos or a video created for display on Twitter or interactive link previews to highlight additional content. Author attribution, hashtags, mentions, and other key components of the Twitter experience helps your site’s audience connect with the global conversation happening on Twitter.

Sunsets don’t get much better than this one over @GrandTetonNPS. #nature#sunsetpic.twitter.com/YuKy2rcjyU

— US Dept of Interior (@Interior) May 5, 2014

This guide describes embedded Tweets displayed within a web browser. Twitter also offers native Tweet displays on iOS and Android.

An embedded Tweet combines HTML preview content with Twitter-hosted JavaScript to display a fully-rendered Tweet experience. Publishers may copy-and-paste embedded Tweet markup generated on a Tweet detail page, pass a URL to a supporting CMS, or add a Tweet to the page using a JavaScript factory function.

Single Tweet

Every Tweet displayed on Twitter.com and in TweetDeck includes an embedded Tweet markup generator to easily copy-and-paste embedded Tweet markup and Twitter JavaScript into your webpage. Select the “More” Tweet action under the Tweet text and select “Embed Tweet” to generate HTML markup to include on your webpage:

Convert Tweet URLs using oEmbed

Programmatically convert a Tweet URL into embedded Tweet markup using Twitter’s oEmbed API. Make embedding a Tweet in your CMS or app as simple as copy-and-pasting a Tweet URL.

https://api.twitter.com/1/statuses/oembed.json?
url=https://twitter.com/Interior/status/463440424141459456

Our CMS best practices guide describes common patterns for sites adding software support for embedded Tweets.

Customize Tweet display

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

Hide photos, videos, and Twitter Cards

A Tweet may include a link to a Twitter-hosted photo, Vine video, or other content supporting a Twitter Card preview. Twitter may replace a link with a more visual experience including inline photo display, an inline video player, or a link preview displayed alongside the Tweet.

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.

Hide previous Tweet in conversation thread

A cited Tweet may have been created in reply to another Tweet. Twitter may provide a brief summary of the previous Tweet in a conversational thread to provide additional 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 Tweet.

Match your site’s color scheme

An embedded Tweet supports light and dark color themes and custom link colors. Customize Twitter widgets at the page-level with <meta> elements or add data-* attributes to individual generated <blockquote> elements.

View our embedded Tweet reference documentation for a full list of embedded Tweet options.

Render a Tweet with JavaScript

Twitter’s widget JavaScript scans the page DOM on execution, converting blockquote.twitter-tweet elements into fully-rendered embedded Tweets based on element content.

Developers dynamically inserting new content into a page which may possibly contain embedded Tweet markup should pass the newly inserted page fragment to twttr.widgets.load() to initiate a new scan for embedded Tweet content.

Developers may directly insert a rendered embedded Tweet onto the page without a blockquote.twitter-tweet scan by passing Tweet, options, and a HTML element to twttr.widgets.createTweet().