oEmbed - Embedding third party media made easy (Yahoo! Developer Network Blog)

My Projects
Tools & Services
APIs and Services
- Flickr
- Geo
- Mail
- Search
- Social
- Updates
- YAP
- YQL
Developer Tools
- Hadoop
- YUI
- YSlow
- View all »
Resources
- Blog
- YDN Theater
- Hack U

YDN YDN Blog oEmbed - Embedding third party media made easy

Yahoo! Developer Network Blog

May 9, 2008

oEmbed - Embedding third party media made easy

Web 2.0 is all about collaboration, distribution and personal configuration and probably one of the biggest traffic drivers of social networks like Facebook or MySpace are videos and photos being sent to and from your contacts.

The problem for developers of networks is that you don't want people to leave your application to see a photo or a video, which means that you need a way to only get the media and embed that. Normally this happens using the media provider's API or - if they don't offer one - screen scraping (loading the whole document and programatically finding and extracting the media).

oEmbed is a great idea to work around that issue:

oEmbed is a format for allowing an embedded representation of a URL on third party sites. The simple API allows a website to display embedded content (such as photos or videos) when a user posts a link to that resource, without having to parse the resource directly.

Flickr, Viddler, Qik, Pownce and Revision3 are the first services to support oEmbed which means you can easily access photos and videos with a simple URL.

Say for example find a nice photo on flickr:

Original URL:

http://flickr.com/photos/codepo8/2475016321/

oEmbed URL:

http://flickr.com/services/oembed?url=http://flickr.com/photos/codepo8/2475016321/

Result:

<oembed>
  <version>1.0</version>
  <type>photo</type>
  <title>? too much myspace error</title>
  <author_name>codepo8</author_name>
  <author_url>http://www.flickr.com/photos/codepo8/</author_url>
  <cache_age>3600</cache_age>
  <provider_name>Flickr</provider_name>
  <provider_url>http://www.flickr.com/</provider_url>
  <width>500</width>
  <height>375</height>
  <url>
    http://farm4.static.flickr.com/3128/2475016321_982666ec95.jpg
  </url>
</oembed>

You can define the output format and the maximum width and height with URL parameters:

oEmbed URL:

http://flickr.com/services/oembed?url=http://flickr.com/photos/codepo8/2475016321/&format=json&maxwidth=200

Result:

{
  version: '1.0',
  type: 'photo',
  title: '? too much myspace error',
  author_name: 'codepo8',
  author_url: 'http://www.flickr.com/photos/codepo8/',
  cache_age: '3600',
  provider_name: 'Flickr',
  provider_url: 'http://www.flickr.com/',
  width: '100',
  height: '75',
  url: 'http://farm4.static.flickr.com/3128/2475016321_982666ec95_t.jpg'
}

Supported formats for responses so far are photo, video, link and rich.

Christian Heilmann
Yahoo Developer Network

Posted at May 9, 2008 4:51 AM | Permalink

Bookmark this on Delicious

Comments

This is a brilliant idea! Solves the exact problem I've been looking at recently.

Is there any backend "best practice" example for php? I will write a way to parse the response, but wondered if there existed a method that sticks to the spec accurately.

Hopefully this will be adopted by more websites quickly! Well done for getting it out to Flickr to get the ball rolling. Yahoo really seems to be innovating recently - Google is starting to look a little old fashioned!

Posted by: Rich at May 9, 2008 11:35 AM

Rich - there's work going on to make a PHP PEAR module to do all the heavy lifting. I expect it'll be posted at oembed.com in the not too distant future.

Posted by: Cal at May 9, 2008 2:00 PM

While there is definitely a need for what is being provided by oEmbed, it seems the implementation leaves a lot to be desired. Most of this could be accomplished in a much more straightforward manner, using REST guidelines.

I've laid out my thoughts on the matter here:
http://www.backdrifter.com/2008/05/09/oembed-fail-represent-restfully/

I'd be interested in further discussion. Specifically around the need for an oEmbed API endpoint.

Posted by: Jared Hanson at May 9, 2008 3:23 PM

I've created proposal for Zend Framework component Zend_Oembed. Details here: http://framework.zend.com/wiki/display/ZFPROP/Zend_Oembed+-+Pawel+Przeradowski. I also have sketchy but working implementation on top of Zend_Http_Client.

Posted by: Pawel at May 13, 2008 2:42 PM

Configuration for oEmbed is very simple. Providers must specify one or more URL scheme and API endpoint pairs. A consumer wishes to show an embedded representation of a third party resource on their own web site.

Posted by: Janet at May 22, 2008 1:10 AM

Doesn't this bump into problems with copyright and guidelines of the provider? The Flickr example, you wouldn't know its ©all rights and guidelines require link back to the photo page.

Posted by: rev at May 22, 2008 10:41 AM

http://en.wikipedia.org/wiki/OEmbed needs more detail...

Posted by: Rich at June 4, 2008 2:19 PM

Could you please return thumbnail metadata in the response too?

I started to implement a general OEmbed / embedcode service, with a focus on flickr, but I had to realize that I couldn't use flickr's oembed response directly, since the one thing I'd use when embedding a flickr image - the thumbnail - is missing.

Posted by: Adam Nemeth at June 10, 2008 2:21 PM