Embedded Tweets bring your pick of content from Twitter into your website articles. An embedded Tweet includes photos, video and cards media created for display on Twitter, and can even stream live video from Periscope. All aspects of Twitter’s display requirements are handled for you by using our tools; author attribution, Tweet actions, hashtags, mentions, and other key components of the Twitter experience.
Embed from Twitter.com
Every Tweet displayed on Twitter.com and in TweetDeck includes an embed code to easily copy-and-paste into your webpage. Activate the Tweet menu and select “Embed Tweet” to generate markup to include on your webpage:
Convert Tweet URLs using oEmbed
Programmatically convert a Tweet URL into embedded Tweet markup using the oEmbed API. Make embedding a Tweet in your CMS or app as simple as pasting a Tweet URL.
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.
Match your site’s color scheme
An embedded Tweet supports light and dark color themes. 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.
Don’t show previous Tweet in conversation thread
A Tweet may be in reply to another Tweet. By default, we include a summary of the previous Tweet in the conversation to provide context.
conversation = none
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.
Hide photos, videos, and Cards
A Tweet may include a photo, video, or link to or other content supporting a Card. By default, this media is displayed in embedded Tweets. You can hide this media if editorially desired.
cards = hidden
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.
An embedded Tweet is aligned left by default. The Tweet 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.
align = center
align = right
If dynamically inserting new content into a page, pass the new document fragment to twttr.widgets.load() to initialize embedded Tweet content.
To directly render an embedded Tweet at runtime use the twttr.widgets.createTweet() function.