Embed.ly: One API to rule them all

Something very very cool fell into my inbox today.

The back story
I had been researching OEmbed kind of as a background project to see if I could use it in my own stuff. Now what is OEmbed, you ask? It is a specification by which a simple link transforms itself into rich content. If you use Facebook at all you will have surely used it. It not only makes a text link to a URL, but goes out and creates thumbnails right inline of some of the multimedia content that might be at that page. Well known sites such as YouTube have their own templates for fetching rich media, and I guess not well known sites just get pegged back to a more generic template. I searched for a php OEmbed library, since I am way way too lazy to go to all the bother of implementing fiddly specs like OEmbed and OAuth myself. I found only one but it didn’t seem to work and they didn’t respond when I tried to contact them. I put myself into the OEmbed google group anyway but I’m very hesitant to use third party stuff that doesn’t seem to be actively supported (for obvious reasons.)

The awesomeness
Three weeks later I get an announcement of embed.ly. Instantly I tried their clientside example and OH DAMN. It didn’t work. I contacted embed.ly and pointed them to my online attempt to use their API. Within an hour Art Gibson wrote back with a fix. The example had left something critical out, and my nascent knowledge of jQuery was not at a stage to be able to figure that out easily. Art even confessed that it had taken him a while to find it. The example has now been fixed so if you use jQuery it should work for you. Here is my sandbox example Now this particular example is youtube, and youtube already has a pretty slick native way to embed their content. But what about sites that don’t? I’ve embedded a few of my toonlets in facebook by just using the generic “link” API. The goal of this blog post is to insert calls to embed.ly into the post such that my latest toonlet will embed in this post the same way they do in facebook. In order to make that work, I had to first assure that jQuery was available, so I put it in the header of my blog template. jQuery is an amazing amazing thing.

The test
The next thing to do was wrap my code in an old school named function, place it in an external file (bleah!) and call the function within the post as per the wordpress documentation on how to use a once off javascript in a single post. So, instead of wrapping it in a jquery function to be called on ready, I wrapped it in a plain old javascript function and called the file oembedtest.js. Here is the code to the function, in case you’re wondering.

function oembedtest() {
    var url = escape('http://www.youtube.com/watch?v=J3IUcQR4CCE');
    var api_url = 'http://api.embed.ly/v1/api/oembed?url=' + url + '&callback=?';
    //jQuery JSON call
    $.getJSON( api_url, function(json) {
         var html = json.html;
         $('#videodiv').html(html);
    });
}

Obviously you wouldn’t hard code the URL in the real world, but this is a test.
I had to make the script available. Since my wordpress setup is a little screwey, for the initial test I placed the javascript file on a completely different domain (my sandbox.) It appears that wordpress wouldn’t load a crossdomain script into a post, probably for security reasons. At least it failed to do this one. So I placed the script in the root of my wordpress blog and tried again.
Here is the code that actually goes in the post, again, as per the codex doc.

And as you can see from the code, it assigns all the OEmbed content to an element named videodiv, so I made one in HTML.
(Pretty trivial, code not illustrated.)

Results
My test was partially successful. When I tried to do a URL from a site that’s not supported, it seemed to refuse to load the script. Actually, even in this page that works, if I firebug it it says fail to load script. Try it yourself! It’s right above the videodiv. However, as you see, I got it to embed a youtube URL. I am not going to argue with success. I couldn’t get just an arbitrary site to work like Facebook does.
I’ll be working on a way to make this OEmbed service easier for the vast unwashed to use in their wordpress blogs. But for a first try, my test worked.