oEmbed. Doing a web service? Do and oEmbed



Of course you've seen this effect when inserted in Facebook or myspace link in the post immediately begins to load some content from a website to which the link leads. And I saw, but didn't realize how easy it can be done oEmbed'ohms.

oEmbed.com — in principle, this could be and finish reading for those who want to undertake independent mini-research.


a Little theory


oEmbed is an open format created to facilitate the implementation of the content of one web page to another. The role content can be photos, videos, links, or other types of data. Simply put, the use of oembed allows you to embeded content (e.g., YouTube video) when a user post a normal link to it on your site.

The exchange of information, from the point of view oEmbed, occurs between the supplier and the consumer. A consumer wishes to show an embedded representation of third party resource on their own website, for example, it can be a photo from flickr or videos from youtube/vimeo. The provider implements the oEmbed API to enable delivery of this content to the consumer.

Request user — normal GET request should include the url and some optional parameters, such as maximum width, height, format (JSON, XML, etc.)
For example, to embedit video from YouTube, we will request the following: 

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


answer, which we receive JSON that contains information about the video and the embed html.
the 
{
"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 can obtain API keys, log in, do a search of the video, collect data, and independently form object and insert it.

Further more. The first query in Google about jquery plugin brought me to http://code.google.com/p/jquery-oembed/. And accessible examples explain how to use the plugin in full. It was written simply enough, and if it so happened that you have not discovered a desired resource, append its implementation is not difficult.


Little practice


On Best Youtube Lyrics, which made the guys from Zengile, you can add clips from YouTube, complete with words of songs, or for example to look for a clip lyrics. Ie. the main business is a logical thing — adding a video. I just decided to use oEmbed to show a video that will be attached.

In haml-vyuha I finished one line from the wonder, in which to display videos
the 
 = text_field_tag 'youtube', params[:youtube] / / is the usual <input type="text" id="youtube">
#oembed / / is the usual <div id="oembed"></div>

The plug-in js file, added a single function. That's all:
the 
$(document).ready( function() { 
var yt = $("#youtube");
var emb = $("#oembed");

yt.focusout(function(){
// when the user moves to another field,
emb.oembed(yt.val(), {
// we take the value from field #youtube and start embeding thing in #oembed
embedMethod: "append",
youtube: {maxWidth:500}
});
});
});
this is the result:

To see how it works and add your clip and words you can here.

Morality


You the consumer: are you doing some kind of social resource, so why don't you care about your users and not force them to copy html embed code to their video/photo was published on your site. The more often the html tags are cut, and paste variable s users are not permitted on the grounds of safety.
You are a supplier: you have created a resource that has interesting content (some image-Board or just as a resource parasite on top social networks like instagram). Implement yourself oembed API, and then you will be easier to integrate in other sites, the number of hits to your resource will increase. Investment money will flow.

Here is a list of those who have already sold themselves oEmbed API.
the

UPD Material prepared for the group Code-n-coffee, which holds IT events in St. Petersburg. The purpose of these meetings is not only to exchange knowledge but also to familiarize developers with each other to form a community and developer culture. We're good at. It's free. Join.
Article based on information from habrahabr.ru

Комментарии

Отправить комментарий

Популярные сообщения из этого блога

The release of the new version of the module modLivestreet 0.3.0-rc

Изображение
Continuing our theme of the binding module MODX and Livestreet, present a new version of the module modLivestreet: livestreet-0.3.0-rc.transport.zip What's new? Yes, almost all :-) the Module is rewritten from scratch. 1. Seriously changed (improved) the logic of processing requests LiveStreet. 2. Added synchronized registration of users in MODX and LiveStreet. Now registering user through the admin panel of MODX, the user is automatically created in LiveStreet, and processing the request for LiveStreet on the user registration, the registration is using MODX, which in turn also provides for the simultaneous registration of the user in both engines. This feature can be disabled through configuration. Under the cut diagram (simplified) MODX in the standard version and module modLivestreet and a more detailed description of the synchronous registration of users in MODX and Livestreet (Scheme, how has the registration in the MODX upload later), as well as the sourc
Далее...

mSearch: search + filter for MODX Revolution

Изображение
Something blog MODX habré completely withered, we need to spice things up. I want to introduce you to your component, which has recently been almost completely rewritten and expanded. It's called mSearch and originally conceived as a simple site search with account of morphology of the Russian language. That is, you had a quick and easy solution for any site without installing Sphinx and other major systems. In the process gugleniya, I came across a interesting this task by phpMorphy . Full text search on a table with an index, with the generation of different word forms. The idea I liked, by my criteria it came up and I wrote my solution, basing this method. the mSearch This snippet and plugin. The snippet is looking for the plug-in index documents when saving. Installation, as usual, from the repository, in 4 clicks. At the same time, you will be prompted to download and install for phpMorphy dictionaries of the Russian language — do not give up.
Далее...

Emulator data from GNSS receiver NMEA

Изображение
Introduction I had the need to test an application that uses the GNSS data NMEA. was Due to the fact that worked on the project navigation of the aircraft, test the air expensive naturally on earth to drive a car with a GNSS receiver is not particularly convenient, that like sitting at the table to have a virtual parallel port data Protocol NMEA allegedly moving equipment. First, search for different software had to try and find something suitable, but most paid and control of the emulation data is not very convenient, although practically emulate all settings of the NMEA standard. But I needed something simple emulating coordinates, speed, in principle, nothing more was required quite convenient and logical control. So I had to write an app of this kind in C#. Fly_nmea NMEA ("National Marine Electronics Association") — the full name is "NMEA 0183" is a text communication Protocol, marine (typically navigation) equipment together. Data is transmit
Далее...