Embedded Tweets ( I )
Overview
Embedded Tweets make it possible for you take any Tweet and embed it directly in to the content of your article or website. Tweets display with expanded media like photos, videos, and article summaries, and also include real-time retweet and favorite counts. When embedded, Tweets are interactive and enable your readers to follow the Tweet author, and reply, retweet, favorite all directly from the page.
This document explains how to use Embedded Tweets on your website, and also how developers can integrate Embedded Tweets in to their applications through our API. Here's an example:
How to Embed a Tweet on your Website
Every Tweet on twitter.com and Tweetdeck has a set of Tweet actions at the bottom, including Reply, Retweet, Favorite, and More. Click the "More" Tweet action and select “Embed Tweet”:
A dialog will appear providing you with an HTML embed code. Copy and paste this directly into your article where you'd like the Tweet to appear. There's a preview which shows you how the Tweet will look.
If the Tweet is a reply, you'll be given a checkbox inside the embed dialog that allows you to exclude the rest of the conversation.
Controlling Tweet Display
By default, embedded Tweets will render in full, similar to how they do on a twitter.com permalink page. There are a few settings you can change to ensure they fit well within your content. For example, if you are collecting Tweets from a conversation and don't want the thread attached to every Tweet, you can hide the conversation using the
data-conversation attribute:<blockquote class="twitter-tweet" data-conversation="none">...</blockquote>
This is equivalent to unchecking the "Include parent Tweet" option in the twitter.com embed code dialog.
Also, when embedding many Tweets that link to the same content you might find some cards to be redundant. You can hide the card in an embedded Tweet using the
data-cards attribute:<blockquote class="twitter-tweet" data-cards="hidden">...</blockquote>
Width and Height of Embedded Tweets
Height is variable based on the content in the Tweet, and may change slightly over time. Tweets will render at a default width of 500px, but if the page section they are pasted into is smaller they will adjust accordingly. Width is responsive to changes in container size.
You may override the default width of the embedded Tweet by adding a
width attribute to the embed code, like so:<blockquote class="twitter-tweet" width="350">...</blockquote>
Alignment
By default, Tweets render as a standalone block of content. Alignment and floating of the Tweet can be set manually by using the
align attribute on the blockquote element of the embed code. Add align="left", align="right" oralign="center" to position the Tweet in your content. For example:<blockquote class="twitter-tweet" align="left">…</blockquote>
Theme and Color
By default, Tweets render links in the standard blue used by twitter.com. This can be overridden in two ways.
1. On individual embedded Tweet codes, the
data-link-color attribute sets link color (e.g. data-link-color="#cc0000". Embedded Tweets also support a TweetDeck-style design via the data-theme attribute.<blockquote class="twitter-tweet" data-link-color="#cc0000" data-theme="dark">…</blockquote>
2. Adding attributes to many embedded Tweet codes is laborious, so the link color and theme for all embedded Tweet and Embedded Timeline widgets can be set globally using
<meta> tags:<meta name="twitter:widgets:link-color" content="#cc0000"> <meta name="twitter:widgets:theme" content="dark">
No comments:
Post a Comment