Используем oEmbed, чтобы добавить телефон в хабрапост

Неделю назад произошло очередное улучшение ^[1] Хабра, и кроме всего прочего, была добавлена возможность вставлять контент с помощью механизма oEmbed. Я хочу немного рассказать, что это за зверь, и продемонстрировать, как он работает с чем-нибудь популярным, вроде jsFiddle ^[2], чтобы добавить в хабрапост необычное. Например — телефон.

Что такое oEmbed? Это соглашение ^[3], благодаря которому можно вставить кусок одной страницы на другую. В мире веба для такой задачи предназначена технология iframe, но в ее использовании есть нюанс: она встраивает содержимое сайта целиком. А сайты, на секундочку, рассчитаны на то, чтобы занимать большую часть экрана вашего компьютера или телефона, а не встраиваться. Разработчики это понимают, и довольно давно у нас есть несколько соглашений по встраиванию. Три самых популярных: Open Graph Protocol ^[4], Twitter Cards ^[5] и oEmbed ^[3]. Кроме них есть еще сотни менее популярных, но в основном используется именно эта тройка.

Работают они по-разному. Чтобы соответствовать «Open Graph Protocol», веб-странице нужно разместить в своем HTML-коде несколько meta-тегов вроде og:title, которые опишут минимальное представление страницы для встраивания. Обычно это заголовок, картинка и несколько строк краткого описания. Сайт, куда происходит встраивание (к примеру, пост фейсбука), создаст соответствующие HTML-элементы сам. От «донора» требуется только информация по содержимому. oEmbed работает по-другому. Чтобы соответствовать oEmbed, сайт должен «предоставить» некий URL, по которому делается запрос о встраивании. Обратите внимание, что «предоставить» у меня в кавычках. На практике «предоставить» значит иметь под рукой большой whitelist ^[6] доменов и соответствующих им URL для запросов. «Более 1800» в анонсе хабра и есть размер такого белого списка. В соглашении есть альтернативный вариант «oEmbed Discovery», когда в HTML-теге на веб-странице прописывается URL для запроса информации. Но Хабр, судя по всему, этот механизм не поддерживает. Наверное, чтобы всякие особо хитрые товарищи не вставляли таким образом трекающие пиксели и прочее забавное с собственных сайтов.

В ответ на запрос о встраивании oEmbed, сайт должен вернуть JSON с необходимой информацией. Например, информацию о картинке и тексте. Но чаще всего возвращают URL, который можно вставлять через iframe. Что выгодно отличает oEmbed от «Open Graph Protocol» и позволяет встроить всё что угодно, начиная от плеера YouTube и заканчивая JSFiddle.

Вот JSFiddle ^[7] я и продемонстрирую: теперь можно вставлять прямо в статьи разнообразные HTML/CSS/JS демки и показывать интересные технологии. В «external resources» слева можно добавить необходимые JavaScript библиотеки. Например, дебагер, чтобы видеть результаты, console.log или наш SDK ^[8], чтобы звонить с веб страницы:

Чтобы позвонить и услышать «Привет!», нужно переключиться на вкладку «Result». Не очень user friendly. Но. Многие популярные сайты, поддерживающие встраивание, поддерживают еще и настройку этого встраивания! Гугление показывать, что для JSFiddle есть подробный раздел документации ^[9]. Следовательно, если мы хотим сразу вкладку «Result», то нам нужно добавить к URL соответствующие настройки:

jsfiddle.net/grigoryvp/rxnj9hcn ^[10]/embedded/result/

Увы, такого Хабр пока не поддерживает. И пока не совсем ясно — это сто стороны jsfiddle неправильно формируется iframe, или же Хабр неправильно запрашивает URL. Если кто владеет такой магией — пишите в комментариях, будет очень полезно!

Автор: Voximplant

Источник ^[11]