• 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=1u0026feature=oembed" frameborder="0" allowfullscreenu003eu003c/iframeu003e",
"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.


Post Tags

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

Leave Yours +

32 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. Attractive section of content. I just stumbled upon your web site and
    in accession capital to assert that I acquire actually enjoyed account your blog posts.
    Anyway I’ll be subscribing to your augment and even I achievement you access consistently quickly.

  8. 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!

  9. Thanks for finally talking about >About oEmbed & How To Embed SlideShare and
    Instagram in WordPress – WPLift <Loved it!

  10. My brother recommended I might like this web site.

    He was once totally right. This put up actually made my day.

    You cann’t imagine simply how so much time I had spent for this information! Thanks!

  11. ‘ Yellow Sea. Facebook marketing has become another strategy for online marketers to make use of to promote and market a small business, product or service. The Reality Behind Raising Awareness Through Status Update.

  12. Hi, i think that i saw you visited my site so i came to return the favor?.I am trying to
    in finding things to enhance my website!I guess its good enough to use some of your
    ideas!!

  13. I do not create a comment, however after reading a lot of comments on this page About oEmbed & How To Embed SlideShare and Instagram in
    WordPress – WPLift. I do have a couple of questions for you if you tend
    not to mind. Is it simply me or do a few of the remarks appear like they are coming from brain dead people?

    :-P And, if you are writing at additional sites, I would like to keep up with everything new you have to post.
    Would you make a list of the complete urls of your public sites like your linkedin profile, Facebook page or twitter feed?

  14. 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.

  15. 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?

  16. 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.

  17. Simply want to say your article is as astonishing.
    The clarity in your post is simply great and i can assume you’re an expert
    on this subject. Fine with your permission allow me to grab your RSS feed to keep up to date with forthcoming post.
    Thanks a million and please continue the rewarding work.

  18. Hi there fantastic blog! Does running a blog like this
    take a large amount of work? I’ve no knowledge of computer
    programming however I was hoping to start my own
    blog soon. Anyway, if you have any ideas or techniques for new blog owners please share.
    I understand this is off topic however I simply wanted to ask.

    Thanks!

  19. Can I simply just say what a relief to uncover someone who genuinely understands what they are talking
    about on the internet. You definitely realize how to bring a problem
    to light and make it important. A lot more people must check this out and understand this
    side of the story. It’s surprising you aren’t more popular given that you certainly possess the gift.

  20. Not just individuals and families, but countries around the globe are getting hooked on
    surfing the web. When thinking about the energy and overall carbon footprint the internet hosting business consumes, it’s a wonder there isn’t more awareness and encouragement to
    go “green” with internet hosting. The over two million domains hosted by Host – Gator make up approximately 1% of the world.

  21. 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!

  22. I do not even know how I ended up here, but I thought this post was good.
    I don’t know who you are but certainly you’re going to a famous blogger
    if you are not already ;) Cheers!

  23. Hello! I just wanted to ask if you ever have any
    trouble with hackers? My last blog (wordpress)
    was hacked and I ended up losing months of hard work due to no back up.
    Do you have any methods to prevent hackers?

  24. Ahaa, its pleasant dialogue regarding this piece of writing here at this website, I have read all that, so at this time me also commenting at this place.

  25. 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.

Leave a Reply

* Required Fields.
Your email will not be published.

Search

Our Sponsors