oEmbed позволяет внедрять CodePen проекты в любое место.

Перевод статьи:  oEmbed Bring Embedded Pens All Over.
Автор:  Chris Coyier.

oEmbed представляет собой небольшую технологию, предоставляющую возможность внедрения сложного контента в рамки другого содержимого очень простым способом. Вы просто вставляете ссылку в необходимое место, и после публикации она магическим образом превращается во что-то более полезное, чем просто ссылка. В качестве типичного примера такого поведения можно взять ссылку на видео из YouTube. Все что необходимо сделать для того, чтобы разместить встроенную версию требуемого видео в своем блог-посте, просто вставить соответствующую ссылку в элемент. Ссылка, ведущая на сервис Flikr, преобразуется во встроенное изображение.

Ресурс CodePen также поддерживает oEmbed, а это означает, что вы можете в любой момент использовать встроенные CodePen проекты в нужных местах и к тому же с легкостью предоставлять их вниманию посетителей вашего сайта.

Я затронул эту тему потому, что такой прием прекрасно работает на моем сайте CSS-Tricks.

Внедрение CodePen проектов на форумах.

Мы настоятельно рекомендуем Вам всегда применять CodePen проекты для представления спорных вопросов на форумах. Ведь согласитесь, что играючи пробовать предлагаемый код в действии непосредственно на форуме гораздо легче, чем просто читать его и воображать как он должен работать в действительности.

Внедрение CodePen проектов в форумы.

Видите как просто? Достаточно лишь скопировать ссылку на необходимый проект и вставить ее в нужное место.

Внедрение CodePen проектов в комментарии.

На моем блоге это работает таким же образом.

CodePen в комментариях.

Не переживайте если желаемый результат не отображается на вкладке предварительного просмотра Preview. Процесс внедрения контента oEmbed начнется сразу же после публикации вашего комментария.

Чем же так хорош oEmbed?

Прежде всего, он прост в использовании. Но существует более веский аргумент. Применяя сервис oEmbed, вы таким образом вносите ресурсы, из которых вы внедряете сложный контент, в категорию проверенных, т.е. в «белый список». Это вопрос доверия.

Необходимым условием внедрения CodePen контента является функционал JavaScript. Но в таком случае это нельзя назвать прогрессивным усовершенствованием, однако, на самом деле все наоборот. Требуя включенной поддержки JavaScript, мы можем получить достаточно неплохую часть контента (выражение, содержащее информацию о CodePen проекте, его название и имя автора) и использовать ее для преобразования контента и отображения посредством встроенного <iframe> функционала. То есть, даже если JavaScript не доступен, запрашиваемый контент все еще выполняет свою задачу и имеет смысл. Хотя с JavaScript эффект конечно же лучше. Задействование только <iframe> означало бы для нас провал в безскриптовую среду.

Таким образом, по причине того, что для работы наших внедрений контента должен исполняться <script> элемент, это ограничивает область их использования. Большинство сайтов просто не позволят вам исполнять какой-либо оформленный с помощью <script> код, который вы размещаете. В противном случае это было бы высшей степени безответственным поступком и огромной брешью в безопасности (XSS). oEmbed позволит вам допускать к исполнению скрипты только из проверенных источников. На мой взгляд, неплохой способ справиться с этой проблемой.

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

oEmbed функционирует следующим образом:

  1. Отыскивает URL адреса, удовлетворяющие доверенным форматам, которые поддерживаются определенным сайтом.
  2. Выполняет запрос к соответствующим сайтам с использованием oEmbed API, передавая им нужный URL.
  3. Программный интерфейс возвращает HTML код, с помощью которого сайт встраивает запрашиваемый сложный контент.

Больше материала на эту тему можно найти здесь — CodePen oEmbed API, включая информацию о конечной точке нашего API и о том, что мы отправляем в ответ.

Задействование oEmbed на вашем WordPress сайте.

Для того чтобы реализовать это на WordPress сайте, размещенном на независимом хостинге, достаточно одной строки кода, хотя в этом случае можно использовать и плагин, ведь именно для этого они и существуют. Что касается комментариев (и bbPress), то здесь необходим другой плагин.

Как вариант стоит рассмотреть Iframely, который тоже поддерживает CodePen и более 1500 других ресурсов встраиваемого контента.

Если у вас на вооружении Jetpack, то поддержка для этого плагина скоро будет реализована.

Однако имейте в виду, что если вам необходимо лишь встраивать CodePen проекты в свои блог-посты и другие места, то в oEmbed совсем нет необходимости. Для этого можно ограничиться нашим кодом внедрения. Это позволит вам управлять высотой, менять темы и тому подобные вещи, что предоставляет расширенные возможности.

Discourse поддерживает CodePen oEmbed.

У Discourse все как и подобает отличному программному средству для форумов.

Поддержка CodePen в Discourse.

WordPress.com поддерживает CodePen oEmbed.

Поддержка CodePen платформой WordPress.

Выражаю свою благодарность Джои Кудишу (Joey Kudish) и WordPress.com за обеспечение работы CodePen проектов.

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

Добавить комментарий

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