All posts tagged ‘oembed’

File Under: APIs, Web Services

Getting Started With Twitter’s Embedded Tweets Feature

Embed a tweet in any webpage

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:

[tweet https://twitter.com/twitterapi/status/133640144317198338]

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:

  1. Obtain an URL to or ID number of the Tweet you want to render.
  2. Make a request to the GET statuses/oembed endpoint, passing the Tweet URL or ID as a query parameter.
  3. 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.

File Under: Multimedia

Get Started With OEmbed

Anyone with a blog will tell you: the best thing about the social media sharing revolution is the “sharing” part.

Popular sharing sites like YouTube, Photobucket and Last.fm offer embed codes, strings of code that make it easy for you to plug a video or a song (inside a small player or display wrapper) into your page. These codes work great for sites that offer them, but embed codes and options for embedding media differ greatly from site to site. And some sites don’t offer any easy sharing codes.

It’s easy enough to post an image or MP3 if you know some HTML. But by now we’re deep into the age of the big “share” button — blog tools and widgets that offer no-brainer, one-click posting. So if you’re building a social app that allows users to share images, videos or songs, your visitors will expect something that’s as dead easy as it gets.

To that end, what if there was a standard for grabbing a full multimedia embed code from a URL? Wouldn’t it be nice if you could turn a simple URL link into an embedded Flickr image or YouTube video? Sure, you can reverse engineer many of the various embed structures offered by sharing sites, but what happens when the host of your embeded media changes its format or relocates the actual asset? Thousands of broken links suddenly litter your site.

These are the wishes (and problems) that led to OEmbed, a new proposed standard for taking a URL and generating an embed link. The proposal is the brainchild of Pownce developers Leah Culver and Mike Malone, as well Cal Henderson of Flickr and Richard Crowley of OpenDNS.

Not every site supports it, so OEmbed isn’t going to solve all your embedding needs overnight. But given that some big names — like Flickr and Viddler — have already signed on, we think others will soon follow suit.

Let’s dive in to see how OEmbed can make your life (and your webapp) easier.

Continue Reading “Get Started With OEmbed” »