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

Комментарии

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

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

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
Далее...

The game Let's Twist: the Path into the unknown

Изображение
earlier this year, a group of experienced developers worked on the game Studio, violating all canons of mobile development. Low influx of users (or rather his absolute lack of), lack advertising budgets and publisher support dismantled the team, and it was decided to take a risk and create something of their own, to prove to ourselves first that big budgets and famous is not the main success factor. In this article I, Arthur, founder and game designer of an indie team ArmNomads Games (consisting of three people), I want to share passed us by in the dangerous wilds of mobile gaming. From idea to final release. The main objective of the idea was the search for a particular publisher and the target audience. We knew that to do something universal is very difficult. Guided by the limited resources and time, it was decided to cooperate with the publisher Ketchapp, but at the same time, have escape routes. To this end, we attempted to combine the minimalistic gameplay and beau
Далее...