Use oEmbed to add a phone to the habrapost

A week ago, another improvement of Habr happened, and among other things, the ability to insert content using the oEmbed mechanism was added. I want to tell a little what kind of animal it is, and demonstrate how it works with something popular, like jsFiddle , to add something unusual to the habrapost. For example - the phone.


What is oEmbed? This agreement , through which you can insert a piece of one page to another. In the world of the web, iframe technology is intended for such a task, but there is a nuance in its use: it embeds the entire contents of the site. And the sites, for a moment, are designed to occupy most of the screen of your computer or phone, and not be embedded. Developers understand this, and for a long time we have several agreements on embedding. The three most popular are: Open Graph Protocol , Twitter Cards and oEmbed . In addition to these, there are hundreds more less popular, but this trio is mainly used.

They work in different ways. To comply with the “Open Graph Protocol”, a web page needs to place in its HTML code several meta tags like og: title , which describe the minimal presentation of the page to be embedded. This is usually a title, a picture, and a few lines of short descriptions. The site where embedding takes place (for example, a Facebook post) will create corresponding HTML elements by itself. From the "donor" is required only information on the content. oEmbed works differently. In order to comply with oEmbed, the site must “provide” a certain URL where the embedding request is made. Please note that "provide" in my quotes. In practice, “providing” means having a large whitelist of domains and corresponding URLs for requests at hand. "More than 1800" in the announcement of Habr is the size of such a white list. There is an alternative option “oEmbed Discovery” in the agreement, when the URL for requesting information is written in the HTML tag on the web page. But Habr, apparently, does not support this mechanism. Probably, that any especially cunning comrades would not insert tracking pixels and other funny things from their own sites.

In response to the oEmbed embed request, the site should return JSON with the necessary information. For example, information about the picture and text. But most often return a URL that can be inserted through the iframe. What distinguishes oEmbed from the “Open Graph Protocol” and allows you to embed anything from YouTube player to JSFiddle.
')
I'll show you JSFiddle : now you can insert various HTML / CSS / JS demos directly into articles and show interesting technologies. In the "external resources" on the left you can add the necessary JavaScript library. For example, debugger to see results, console.log or our SDK to call from a web page:



To call and hear “Hi, Habr!”, You need to switch to the “Result” tab. Not very user friendly. But. Many popular sites that support embedding, also support the setting of this embedding! Googling show that for JSFiddle there is a detailed section of the documentation . Therefore, if we want the “Result” tab immediately, then we need to add the appropriate settings to the URL:

jsfiddle.net/grigoryvp/rxnj9hcn / embedded / result /

Alas, this Habr does not yet support. And while it is not quite clear - this is a hundred of the jsfiddle side, iframe is formed incorrectly, or Habr incorrectly requests a URL. If anyone owns this magic - write in the comments, it will be very useful!