CSS for Embedded Tweets
An Embedded Tweet appears on your page as a <blockquote>
with the cited text of a Tweet; this markup is later interpreted by Twitter’s JavaScript code to render a full Embedded Tweet. The <blockquote>
HTML is available in all rendering environments, including RSS feeds and email updates.
An Embedded Tweet’s fallback markup will inherit the CSS rules already applied to <blockquote>
, <p>
, and <a>
HTML elements on your webpage.
Sunsets don’t get much better than this one over @GrandTetonNPS. #nature#sunsetpic.twitter.com/YuKy2rcjyU
— US Dept of Interior (@Interior) May 5, 2014
Below is some basic CSS to style an Embedded Tweet’s <blockquote>
content in a way that more closely resembles its fully-rendered form.
blockquote.twitter-tweet { display: inline-block; font-family: "Helvetica Neue", Roboto, "Segoe UI", Calibri, sans-serif; font-size: 12px; font-weight: bold; line-height: 16px; border-color: #eee #ddd #bbb; border-radius: 5px; border-style: solid; border-width: 1px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); margin: 10px 5px; padding: 0 16px 16px 16px; max-width: 468px; } blockquote.twitter-tweet p { font-size: 16px; font-weight: normal; line-height: 20px; } blockquote.twitter-tweet a { color: inherit; font-weight: normal; text-decoration: none; outline: 0 none; } blockquote.twitter-tweet a:hover, blockquote.twitter-tweet a:focus { text-decoration: underline; }