Использование технологии oEmbed

Перевод руководства по использованию технологии oEmbed.
Автор: Chris Coyier.

Проект CodePen предусматривает поддержку oEmbed — интеллектуальной системы, сводящей процесс внедрения сложного контента к нескольким простейшим шагам. Вот вам пример работы этой технологии: просто вставьте URL на YouTube видео в отведенное ему место, скажем в блог-пост, и эта ссылка впоследствии будет заменена на реальное встроенное видео.

Именно таким образом функционирует CodePen oEmbed, требующий от вас лишь вставки URL адреса CodePen проекта в область контента поддерживающего технологию oEmbed сайта, что приведет к автоматическому преобразованию использованной ссылки во встроенный CodePen проект.

Вот как это работает в WordPress:

Это куда более впечатляющий случай в сравнении с обычной ссылкой, не правда ли? Вы могли бы, конечно, воспользоваться нашим oEmbed кодом, предоставляющим расширенный контроль, однако, данный упрощенный вариант тоже неплох. К тому же именно таким образом вы сможете поместить требуемый контент в тех местах, где oEmbed код может не работать, в областях подобных комментариям.

Особенности использования oEmbed в WordPress.

Проектом WordPress.com также как и автономной версией движка от WordPress.org предусмотрена поддержка oEmbed. Однако они при этом используют свой внутренний «белый» список сайтов. Сервис Flickr и YouTube включены в этот список, состоящий из приблизительно 20 сайтов. Мы так же работаем над тем, чтобы CodePen был включен в этот список, однако на данный момент его там нет.

Процесс включения поддержки CodePen для вашего WordPress сайта, размещенного на отдельном хостинге, довольно прост. Он заключается во включении в functions.php файл вашей темы небольшой детали, а точнее следующего фрагмента кода:

wp_oembed_add_provider(‘http://codepen.io/*/pen/*’, ‘http://codepen.io/api/oembed’);

Либо можно пойти более легким путем, воспользовавшись обеспечивающим поддержку плагином. Это отличный способ реализации данного функционала и его поддержка будет включена независимо от используемой вами темы.

Вот и все, теперь все должно заработать.

Некоторые детали использования в WordPress.

Если в ходе своего блоггинга вы используете разметку Markdown посредством плагина WP-Markdown, то сервис oEmbed будет для вас недоступен, однако сейчас можно воспользоваться плагином Jetpack, позволяющим Markdown блоггинг и в тоже время поддерживающим данный функционал.

В WordPress oEmbed работает только в рамках контента поста либо страницы (post/page), но вы также можете переместить его и в комментарии:

Как это работает.

Сама спецификация oEmbed на самом деле довольно проста. Вы создаете на вашем сайте точку подключения, которой сообщаете единственный URL параметр — другой URL.

В нашем случае это выглядит вот так:

http://codepen.io/api/oembed? url=URL-CodePen-необходимого-проекта

И если используемый вами URL указывает на действительный CodePen проект, то в результате будет получен код в формате JSON подобный вот этому:

{
«success»: true,
«type»: «rich»,
«version»: «1.0»,
«provider_name»: «CodePen»,
«provider_url»: «http://codepen.io»,
«title»: «CSS arrow down bouncing»,
«author_name»: «Sherin»,
«author_url»: «http://codepen.io/szs/»,
«height»: «300»,
«width»: «500»,
«thumbnail_width»: «384»,
«thumbnail_height»: «225»,
«thumbnail_url»: «http://i.cdpn.io.s3.amazonaws.com/89176. JhgKC.small.0e6aa40d-a607-488e-9f7a-d1cfd94d2157.png»,
«html»: «<iframe id=\»cp_embed_JhgKC\» src=\»http://codepen.io/szs/embed/JhgKC? height=300&slug-hash=JhgKC&default-tab=result&host=http%3A%2F%2Fcodepen.io\» scrolling=\»no\» frameborder=\»0\» height=\»300\» allowtransparency=\»true\» class=\»cp_embed_iframe\» style=\»width: 100%; overflow: hidden;\»></iframe>»
}

Передаваемый нами в ответ на запрос контент принадлежит к rich типу, т.е. является богатым или сложным контентом, а это означает что поддерживающие CodePen функционал сайты для отображения данного контента должны использовать возвращаемый нами HTML код. В данном случае таким HTML кодом является элемент <iframe>, содержащий встраиваемый CodePen проект.

Это несколько отличается от нашего обычного Embed кода, который, как правило, характеризуется содержащимся в нем семантическим элементом абзаца <p> и скриптом <script>. Данный подход хорош собственно тем, что альтернативный контент все еще может пригодиться. То есть если контент сайта используется посредством RSS либо при отключенном/не функционирующем JavaScript, то пользователю все равно будет представлен содержательный контент и ссылки. Но если все работает, то это заменяется встраиваемым <iframe> элементом.

В случае использования oEmbed для встраивания контента мы сразу же возвращаем элемент <iframe>, поскольку:

  1. Мы не уверены в том, что при использовании oEmbed скрипт будет достаточно хорош для выполнения поставленной задачи или, что сайты выполнят его так, как необходимо (т.е. любое экранирование в представленном HTML коде может все испортить). Основной целью, которую мы преследуем, является внесение CodePen в максимальное количество «белых» списков, насколько это возможно, поскольку мы еще не видели ни одного провайдера, который бы допускал использование скриптов. Поэтому такой способ вероятнее всего является лучшим.
  2. В любом случае имеет место альтернативный контент в виде ссылки на требуемый CodePen проект, что тоже неплохо.

Ограничения.

  1. На данный момент мы допускаем использование URL адресов, только содержащих /pen/ каталог.
  2. У вас нет возможности модифицирования. Встраиваемый контент будет оформлен по дефолтному шаблону с высотой в 300 пикселей. Для того, чтобы упростить данный процесс мы хотели бы узнать от вас, какие именно возможности вы хотели бы увидеть в рамках настройки встраиваемого oEmbed контента в будущем.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *