Friday, May 9th, 2008

oEmbed makes embedding third party videos and images a breeze

Category: Announcements, Standards

<p>Flickr, Viddler, Qik, Pownce and Revision3 are the first services to support oEmbed, an easy way to allow embeding media from a certain URL in a third party site.

From the oEmbed site:

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.

This means that if you for example find a nice photo on flickr, you can take the URL and easily turn it into embed-able data:

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

oEmbed URL: http://flickr.com/services/oembed?url=http://flickr.com/photos/codepo8/2475016321/
">http://flickr.com/services/oembed?url=http://flickr.com/photos/codepo8/2475016321/

Result:

  1. <oembed>
  2.   <version>1.0</version>
  3.   <type>photo</type>
  4.   <title>? too much myspace error</title>
  5.   <author_name>codepo8</author_name>
  6.   <author_url>http://www.flickr.com/photos/codepo8/</author_url>
  7.   <cache_age>3600</cache_age>
  8.   <provider_name>Flickr</provider_name>
  9.   <provider_url>http://www.flickr.com/</provider_url>
  10.   <width>500</width>
  11.   <height>375</height>
  12.   <url>
  13.     http://farm4.static.flickr.com/3128/2475016321_982666ec95.jpg
  14.   </url>
  15. </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:

javascript
< view plain text >
  1. {
  2.   version: '1.0',
  3.   type: 'photo',
  4.   title: '? too much myspace error',
  5.   author_name: 'codepo8',
  6.   author_url: 'http://www.flickr.com/photos/codepo8/',
  7.   cache_age: '3600',
  8.   provider_name: 'Flickr',
  9.   provider_url: 'http://www.flickr.com/',
  10.   width: '100',
  11.   height: '75',
  12.   url: 'http://farm4.static.flickr.com/3128/2475016321_982666ec95_t.jpg'
  13. }

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

Related Content:

Posted by Chris Heilmann at 6:33 am
10 Comments

++++-
4.1 rating from 15 votes

10 Comments »

Comments feed TrackBack URI

Nice to have a common api for embedding content! Hope to see more providers in the future.

Comment by polysign — May 9, 2008

Despite the label the first example shows XML, not HTML code, and in fact oEmbed returns either XML or JSON.

Comment by pmontrasio — May 9, 2008

This seems bad for Google juice. Will Google see these references and links?

Comment by dylangreene — May 9, 2008

@dylangreene: I expect that sort of depends whether you’re snagging the data server-side or client-side. I figure the way I’ll use this is to get the data client-side to build and then use the same routine server-side (with cache) to ensure the content stays synced after it’s committed by a user.

Comment by Trevor — May 9, 2008

It’s may be very useful standard, but one important thing is missing — a something like auto-discovery. “Providers must specify one or more URL scheme and API endpoint pairs” — but WHERE providers must specify it?

Comment by davidmz — May 9, 2008

davidmz: we’re working on the spec for auto-discovery at the moment. Expect to see it published very shortly.

Comment by iamcal — May 9, 2008

In my opinion, if RESTful principles are followed, the oEmbed API endpoint (and hence auto-discovery) is not required at all. I’ve blogged my thoughts here:

http://www.backdrifter.com/2008/05/09/oembed-fail-represent-restfully/

I’d be interested in further discussion.

Comment by jaredhanson — May 9, 2008

The oEmbed site says that “JSON responses must contain well formed JSON”, but the examples given are all invalid JSON. Oops. :-)

Comment by MG — May 10, 2008

I created a small OEmbed proxy, which can also translate between YouTube GData API and OEmbed, thus a javascript client could use its own host’s resources to change links into embeds.

It’s pluginable (you have to write a class and add it to the providers.xml file), you can use OEmbed-compatible providers (they don’t need separate plugin just the two configuration options)… so… use it ;)

http://code.google.com/p/php-oembed/

Comment by Adam Nemeth — July 8, 2008

I created a small OEmbed proxy, which can also translate between YouTube GData API and OEmbed, thus a javascript client could use its own host’s resources to change links into embeds.

It’s pluginable (you have to write a class and add it to the providers.xml file), you can use OEmbed-compatible providers (they don’t need separate plugin just the two configuration options)… so… use it ;)

http://code.google.com/p/php-oembed/

Comment by Adam Nemeth — July 8, 2008

Leave a comment

You must be logged in to post a comment.