Somewhat lost amidst the news of Twitter’s revamped interface is a slightly more interesting tidbit for web developers: Twitter posts can now be embedded in other pages.
The new Embedded Tweet feature works just like a YouTube movie, offering a short HTML snippet that you can copy and paste into any third-party website. Unfortunately using the Embed Tweet feature from Twitter is somewhat awkward since it’s buried in the new interface. First you need to click on a tweet, then click “details” and then you’ll see the embed option.
The real benefit of the embed feature lies with third party platforms like Twitter’s two launch partners WordPress and Posterous. Users of both services can now simply paste a link to a tweet and it will automatically be converted to an embedded tweet, no cut and paste necessary. For example, just drop this code in your WordPress.com blog and it will automatically be converted to an embedded tweet:
If you’d like to implement something similar on your own site Twitter now has an OEmbed endpoint you can query to convert Twitter links to embedded tweets. Those not familiar with OEmbed can check out our OEmbed tutorial, but, in a nutshell, OEmbed is a standard format where you send a URL and the host site then sends back the necessary embed code.
There are three steps to Twitter’s OEmbed process:
- Obtain an URL to or ID number of the Tweet you want to render.
- Make a request to the GET statuses/oembed endpoint, passing the Tweet URL or ID as a query parameter.
- Render the html property of the response, as well as a <script> element pointing to //platform.twitter.com/widgets.js, if you want the embed to be interactive.
If you choose to render the tweet using Twitter’s widgets.js, the raw HTML will be converted into an interactive tweet. The fancy embedded tweet script uses Web Intents to allow users to reply, retweet, or follow the user directly from the embedded tweet. See the Twitter developer site for more details on Twitter’s widgets.js and how to use OEmbed to embedded tweets to your website.