Embedded tweets have been updated, and Twitter has made design and technical changes to the popular format.

As Twitter becomes ever more popular, even among heads of state, naturally more people are going to be inserting their favorite snippets into blog posts and other kinds of websites. For those people, the new changes will help make those embedded tweets more interactive and more stylish.

At the Speed of Design

No one would accuse Twitter of being stylish per se, but the company has improved on this front just a bit with this update. When expanded to full screen size, embedded tweet text displays at the bottom of an image for maximum design effectiveness.

Embedded tweets show images, videos and text, but also retweet and favorite counts to see how people interact with them.

Additionally, embedded tweets will load faster on the pages they are on when opened. On the technical side, there are several tweaks that will help people embed tweets on WordPress sites, and Twitter now supports an oEmbed endpoint for developers who want to embed tweets programmatically. 

Embed Anywhere

To share tweets, there's a 'more' button next to the favorite icon, and when pressed there's the option to email or embed. The embed option opens a dialog box with the HTML code displayed for pasting into a post. 

For certain instances, embedded tweets may need to be expanded to better fit a page. The width can be adjusted by adding a width attribute to the blockquote embed tag. Tweets render to a default width of 500px, and the height will depend on the amount of content.



Embedded tweet expanded to full screen size.
WordPress sites, especially the newest version, will automatically embed a tweet simply by pasting in the URL of the tweet. No HTML is necessary for these posts. There are a couple of things to consider for mobile sites, however, and also for how tweets render in RSS feeds.
Mobile sites need to have widgets.js in the mobile template in addition to the standard template, and the embedded tweets should render to the size of the screen they are displayed on with no other work needed. For things like RSS feeds and accessibility tools, the tweet will show up as just another part of the page, with the normal blockquote styling applied.