• Blog

    Latest from our Blog

  • Tools

    Our Favourite WP Tools

  • Hosting

    Recommended Web Hosts

  • Coupons

    Get great money off deals

  • Themes

    WordPress Theme Directory

  • Plugins

    WordPress Plugins Directory

  • Promote

    Your WordPress Product

oEmbed is an open format that allows website publishers to fetch third party content with a URI and embed it on their websites. This content could be images, videos, documents, or any rich content type. Oembed provides a standard to rich media publishers to share their content across the web, making it easier to fetch the content and embed it on websites. Some of the most popular content sharing websites such as YouTube, Flickr, Hulu, Vimeo, and SlideShare support oEmbed.

WordPress started supporting oEmbed since 2.9 to make content sharing easier. Now users can just paste the URL of a youtube video (or any supported website) and WordPress automatically embeds the content.

How oEmbed Works?

The reason behind oEmbed is to provide a standard solution for embedded content sharing. So when you paste the link to an oEmbed enabled provider in your WordPress or any oEmbed enabled supporting publishing platform, it will then look for an oEmbed header on the provider url. Finding the oEmbed header it then sends a standardize query to that website. This query then returns an standardized and structured response. This response is then used to display the content on your platform.

Example:

We want to embed this video on our website. It is hosted on YouTube, and if you look at the source code of the video page you will find these lines:

<link rel="alternate" type="application/json+oembed" href="http://www.youtube.com/oembed?url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DpFDoCLf96Kg&amp;format=json" title="Rebecca MacKinnon: Let's take back the Internet!">

<link rel="alternate" type="text/xml+oembed" href="http://www.youtube.com/oembed?url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DpFDoCLf96Kg&amp;format=xml" title="Rebecca MacKinnon: Let's take back the Internet!">

These lines make the primary embeddable content on the web page discoverable. The first line provides a link to JSON response and the second line to XML response.

If your publishing platform supports oEmbed it will then look up at those URLs and will get a response from one of these links which will be something like this:

JSON Response:


{
"provider_url": "http:\/\/www.youtube.com\/",
"thumbnail_url": "http:\/\/i1.ytimg.com\/vi\/pFDoCLf96Kg\/hqdefault.jpg",
"title": "Rebecca MacKinnon: Let's take back the Internet!",
"html": "\u003ciframe width=\"480\" height=\"270\" src=\"http:\/\/www.youtube.com\/embed\/pFDoCLf96Kg?fs=1\u0026feature=oembed\" frameborder=\"0\" allowfullscreen\u003e\u003c\/iframe\u003e",
"author_name": "TEDtalksDirector",
"height": 270,
"thumbnail_width": 480,
"width": 480,
"version": "1.0",
"author_url": "http:\/\/www.youtube.com\/user\/TEDtalksDirector",
"provider_name": "YouTube",
"type": "video",
"thumbnail_height": 360

}

XML Response:

<oembed>
<provider_url>http://www.youtube.com/</provider_url>
<thumbnail_url>http://i1.ytimg.com/vi/pFDoCLf96Kg/hqdefault.jpg</thumbnail_url>
<title>Rebecca MacKinnon: Let's take back the Internet!</title>
<html>
<iframe width="480" height="270" src="http://www.youtube.com/embed/pFDoCLf96Kg?fs=1&feature=oembed" frameborder="0" allowfullscreen></iframe>
</html>
<author_name>TEDtalksDirector</author_name>
<height>270</height>
<thumbnail_width>480</thumbnail_width>
<width>480</width>
<version>1.0</version>
<author_url>http://www.youtube.com/user/TEDtalksDirector</author_url>
<provider_name>YouTube</provider_name>
<type>video</type>
<thumbnail_height>360</thumbnail_height>
</oembed>

Now this is structured data that provides all necessary information you need to embed the content on your website.

oEmbed in WordPress

WordPress supports oEmbed but not all oEmbed providers are supported by default. The functionality is there but it will be a security loop hole to let any url with discoverable oEmbed content to allow embedding content on user websites. To protect from this, WordPress has an internal whitelist of sites that are automatically enabled for embeds. At the time of writing this article these oEmbed providers are supported by default:

  • YouTube
  • Vimeo
  • DailyMotion
  • Flickr
  • Twitter
  • Hulu
  • Viddler
  • Scribd
  • WordPress.tv
  • SmugMug
  • FunnyOrDie.com
  • Qik
  • Revision3
  • blip.tv
  • Photobucket
  • PollDaddy

The list is maintained in wp-includes->class-oembed.php (Do not Edit this file). However, you can add more oEmbed providers using the function wp_oembed_add_provider().

Adding SlideShare as oEmbed Provider to WordPress

SlideShare is one of the popular websites that supports oEmbed and is not part of the WordPress oEmbed whitelist. So if you add a lot of SlideShare content to your website you may want to make embedding easier. To do that we are going to add SlideShare as an oEmbed provider to our WordPress.
We will be using wp_oembed_add_provider() function. This function has three arguments

<?php
wp_oembed_add_provider( $format, $provider, $regex );
?>

$format is a required argument it tells WordPress what kind of URL scheme the provider follows.
$provider is also required, it is the base URL of the provider where there query will be directed to.
$regex an optional argument which tells WordPress that the URL scheme format is a regex string (True) or a simple wildcard scheme (False), default is false.

To add SlideShare as an oEmbed provider we add the following code to our theme’s functions.php file.


wp_oembed_add_provider( 'http://www.slideshare.net/*/*', 'http://www.slideshare.net/api/oembed/2' );

We got the URL scheme and base URL from official oEmbed website. If a provider is not listed in the oEmbed providers list, it does not mean that it cannot benefit from oEmbed. Most providers have an oEmbed api page on their website describing all you need to know to benefit from these features.

Now to embed a slide from SlideShare all you have to do is to copy the URL from the address bar and paste it into post edit area.

Adding Instagram Embeds to WordPress

Just to get our hands a little better on this lets add another popular oEmbed provider to our WordPress powered site. This time we are adding Instagram. Here is the code:


wp_oembed_add_provider( 'http://instagr.am/*/*', 'http://api.instagram.com/oembed' );
wp_oembed_add_provider( 'http://www.instagram.com/*/*', 'http://api.instagram.com/oembed' );

Note that we have added both instagram.com and instagr.am as different providers to make sure that shortened and non-shortened both URLs work fine.

Embedly Plugin to Embed Content from More Sources

Embedly provides easy embed solutions to providers as well as web publishers. They have a free WordPress plugin that allows you to embed content from more than 200 sources by just pasting the URL. It supports sites such as Tumblr, Wikipedia, deviantart, twitpic, etc.

I feel that it is safe to use Embedly, instead of manually adding individual oEmbed and non-oEmbed providers. I tried testing embedly with default WordPress theme TwentlyEleven by pasting URLs for some popular content providers. The results were statisfactory, I guess the major concern for most publishers would be to have the embeds fit in their content and not look ugly.

Download Embedly »

Conclusion

Sharing has become an important aspect of how people interact on the web. As a web publisher, I myself feel obligated to provide easy content sharing solutions to the visitors of my website as well as authors. oEmbed makes this easier for me. But while writing this post I asked myself, do most WordPress users know that they don’t need embed code for some providers? I think, apart from Youtube, common WordPress user does not know which providers are supported.


Noumaan is a blogger and social media expert. He loves Quora, Facebook, Wordpress, OpenSource Software and The Sims.

Leave Yours +

14 Comments

  1. Ali Ahmed

    The websites shown on embedly do they support oembed? Wouldn’t it be better to just add a few of them like you did with slideshare?

    • @706e033e2c1dc85f2fba6d7d055930e9:disqus embedly provides embed for some non-oembed providers as well as oembed providers. It provides convenience to those who don’t want to manually add providers.

  2. fv

    The missing piece of code to integrate instagram!

  3. harrycarroll

    There is noticeably a bundle to know about this. I assume you made certain nice points in features also.

  4. Hi, the Oembed code for Instagram doesn’t seem to work for me.

  5. nikos_mouras

    I think the oEmbed implementation in WordPress is a nightmare for theme designers. If you ask me, oEmbed should be limited to work only with specific post formats. So embedding a video would only be possible in a video post, a flickr image only with image post format and so on. That’s what I’m trying to do on my latest theme but I would like know other people experience in the matter.

  6. Or you can simply wait for WordPress 3.5, which will ship with oEmbed support for SoundCloud, Instagram and SlideShare.

  7. Magnificent site. Plenty of useful information here.
    I’m sending it to some buddies ans also sharing in delicious. And naturally, thanks to your effort!

  8. Hey! I know this is kind of off topic but I was wondering which blog platform are you using for this website?
    I’m getting tired of WordPress because I’ve had issues with hackers and I’m looking at alternatives for another platform.

    I would be awesome if you could point me in the direction of a good platform.

  9. Thank you for the auspicious writeup. It if
    truth be told used to be a entertainment account it. Glance complicated to far
    brought agreeable from you! By the way, how can we communicate?

  10. Some of the perfectly working solutions such as the weight loss surgeries are hidden beneath the mountain of weight loss scams.
    ve so much weight to shed, accept the fact that it. Having more healthy cells and tissues will definitely improve your metabolism since it is your cells and tissues that metabolize your
    calories to fuel your bodily functions, after all.

  11. What i do not understood is in fact how you’re no longer
    actually much more smartly-preferred than
    you may be right now. You are very intelligent. You already
    know thus significantly in the case of this matter, made me personally consider it from so many
    numerous angles. Its like men and women don’t seem to be interested until it’s
    something to accomplish with Lady gaga! Your own stuffs excellent.
    At all times care for it up!

  12. Pretty component to content. I just stumbled upon
    your weblog and in accession capital to say that I get actually loved account your blog posts.

    Anyway I will be subscribing in your augment or even I fulfillment you get entry to consistently
    rapidly.

  • Comments are Closed

Search

Our Sponsors