oEmbed.

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

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

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

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

oEmbed в 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 в комментариях.

Комментарии на сайте CSS-Tricks.

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

Сама спецификация 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 не будет опубликован. Обязательные поля помечены *