oEmbed. Do you make a web service? - Do and oEmbed

Of course, you have seen this effect when you insert a link on Facebook or VKontakte, and in the post, some content immediately begins to load from the site that the link leads to. And I saw, but I didn’t even imagine how easy it can be done with oEmbed.



oEmbed.com - in principle, this could be the end of reading for those who want to conduct an independent mini-study.



')

A bit of theory

oEmbed is an open format created to simplify the embedding of the contents of one web page into another. The content can be photos, videos, links, or other types of data. Simply put, using oembed allows you to get embeded-content (for example, video from YouTube) when a user posts a regular link to it on your resource.



The exchange of information, in terms of oEmbed, takes place between the supplier and the consumer. The consumer wants to show a built-in presentation of a third-party resource on his own website, for example, it can be a photo from flickr or a video from youtube / vimeo. The provider implements the oEmbed API to ensure the delivery of this content to the consumer.



User request - a normal GET request, must include a url and several optional parameters, for example, maximum width, height, format (JSON, XML, etc.)

For example, to borrow a video from YouTube, we will request it as follows:

http://www.youtube.com/oembed?url=http%3A//youtube.com/watch%3Fv%3DM3r2XDceM6A&format=json 

In the response we get JSON, which contains information about the video, as well as embed-html.

 { "version": "1.0", "type": "video", "provider_name": "YouTube", "provider_url": "http://youtube.com/", "width": 425, "height": 344, "title": "Amazing Nintendo Facts", "author_name": "ZackScott", "author_url": "http://www.youtube.com/user/ZackScott", "html": "<object width=\"425\" height=\"344\"> <param name=\"movie\" value=\"http://www.youtube.com/v/M3r2XDceM6A&fs=1\"></param> <param name=\"allowFullScreen\" value=\"true\"></param> <param name=\"allowscriptaccess\" value=\"always\"></param> <embed src=\"http://www.youtube.com/v/M3r2XDceM6A&fs=1\" type=\"application/x-shockwave-flash\" width=\"425\" height=\"344\" allowscriptaccess=\"always\" allowfullscreen=\"true\"></embed> </object>", } 

But with the same success, we could receive API keys, log in, make a request to search for a video, receive data and form the object ourselves and insert it.



Further more. The first request in Google about the jquery plugin brought me to http://code.google.com/p/jquery-oembed/ . Moreover, the available examples explain how to use the plugin to the fullest. It is written quite simply, and if it so happened that you did not find the resource you need there, it would not be difficult to add its implementation.

Some practice

On the Best Youtube Lyrics website, which was done by the guys from Zengile, you can add clips from YouTube, supplementing them with the words of songs, or, for example, look for a clip according to the song. Those. The main business logic is adding a video. I just decided to use oEmbed to show the video to be attached.



In the haml view, I added one line with a diva, in which the video will be displayed

  = text_field_tag 'youtube', params[:youtube] //-   <input type="text" id="youtube"> #oembed //-   <div id="oembed"></div> 

In the connected js-file I added one function. That's all:

 $(document).ready( function() { var yt = $("#youtube"); var emb = $("#oembed"); yt.focusout(function(){ //      , emb.oembed(yt.val(), { //      #youtube   embeding-  #oembed embedMethod: "append", youtube: {maxWidth:500} }); }); }); 

Here is the result:



See how it works and add your clip and words here .

Morality

You are a consumer : you make some kind of social resource, so why don't you take care of your users and force them to copy the html-embed code so that their video / photo is published on your resource. Moreover, often html-tags are cut off, and users are not allowed to insert iframes, motivating them with security.



You are the supplier : you created a resource on which there is interesting content (some kind of image board or just a parasitic resource on top of a social network, like an instagram). Implement the oembed API, and then you will be easier to integrate into other sites, the number of requests to your resource will increase. Investment money will flow like a river.



And here is a list of those who have already implemented the oEmbed API.

• YouTube
• Flickr
• Viddler
• Qik
• Revision3
• Hulu
• Vimeo
• Collegehumor
• oohEmbed
• Poll Everywhere
• My opera
• Embedly
• iFixit
• Smugmug
• Slideshare
• WordPress.com

UPD Material prepared for the Code-n-coffee group, which holds IT events in St. Petersburg. The purpose of these meetings is not only to exchange knowledge, but also to acquaint developers with each other, to form a community and developer culture. We are good. It's free. Join now.