Обращение к стороннему контенту с помощью oEmbed и PHP

Как добавить к своей Web-странице rich-контент и данные из популярных приложений и с Web-сайтов

Спецификация OEmbed предлагает способ отображения на Web-странице встроенных представлений контента сторонних сайтов. Эта статья знакомит с API oEmbed и демонстрирует его в контексте PHP-приложения, объясняя, как использовать этот API для встраивания контента с таких популярных сайтов, как Flickr, YouTube, Slideshare, Wikipedia и др.

Введение

История Web 2.0 ― это история контента, создаваемого пользователями. Такие сайты, как Flickr, Facebook, MySpace, YouTube, позволяют загружать оригинальные фотографии и видеозаписи в облако и делиться ими с широкой аудиторией с помощью простых онлайновых инструментов. Простота создания контента в облаке и средства обмена в сочетании с Web-сервисами, которые позволяют разработчикам программно обращаться к сгенерированному пользователями контенту, открыли возможности для объединения контента из разных источников для создания новых, управляемых контентом (гибридных) приложений.

Часто используемые сокращения

  • API: Application Program Interface - интерфейс прикладного программирования
  • HTML: HyperText Markup Language - язык разметки гипертекста
  • JSON: JavaScript Object Notation
  • OOP: Object-oriented programming - объектно-ориентированное программирование
  • SQL: Structured Query Language - язык структурированных запросов
  • URL: Uniform Resource Locator - унифицированный указатель ресурса
  • UTF-8: UCS Transformation Format-8-bit
  • XML: Extensible Markup Language - расширяемый язык разметки
  • XSS: Cross-site scripting - межсайтовый скриптинг

Существует, однако, одна маленькая проблема. Если у вас есть фотографии на Flickr, видеоролики на YouTube, и ТВ-передачи на Hulu, как собрать все это вместе в своем блоге на Blogger? Конечно, можно дать гиперссылки на соответствующий контент, но не лучше ли будет просто вставлять его в соответствующее место сообщения?

Для этой цели служит oEmbed. Как следует из названия, oEmbed решает эту проблему, позволяя превращать ссылки на rich-контент, такой как фото и видео, расположенный на внешних сайтах, таких как Flickr и YouTube, во встроенные представления этого контента. В этой статье я познакомлю вас с oEmbed и покажу, как использовать его с PHP для внедрения стороннего контента на свою Web-страницу.


Что такое oEmbed

Начнем с краткого введения в oEmbed. Согласно официальному Web-сайту (http://www.oembed.com), oEmbed - это:

...формат, позволяющий создавать встроенные представления по URL сторонних сайтов... [он] позволяет отображать на Web-сайте встроенный контент (такой как фотографии и видео), когда пользователь помещает ссылку на этот ресурс, без необходимости непосредственного анализа ресурса".

В oEmbed-операции участвуют две стороны: поставщик и потребитель. Потребитель запрашивает определенные элементы контента, обращаясь с запросами к конечной точке API поставщика. Поставщик обслуживает эти запросы, возвращая представления требуемых элементов в формате XML или JSON.

Как этот подход работает на практике? Предположим, что вы пишете заметку в блог и хотите продемонстрировать одну из видеозаписей, загруженных с YouTube. Это можно сделать двумя способами:

  • дать гиперссылку на нее; когда пользователи нажимают на эту ссылку, они перенаправляются на YouTube для просмотра видео;
  • использовать встроенный медиаплеер YouTube, непосредственно вставляя видео в свой блог.

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

oEmbed предлагает третье, более простое решение. Так как YouTube является поставщиком oEmbed, можно направить запрос на искомое видео в его конечную точку API oEmbed. Ответом на этот запрос будет документ XML или JSON, содержащий HTML-код встроенного видеоплеера, и этот код можно непосредственно использовать в своем блоге для демонстрации видео без всякого ручного вмешательства.

В листинге 1 показано, как выглядит oEmbed-запрос на видео из YouTube и ответ на него.

Листинг 1. Запрос OEmbed

Обратите внимание, что запрос направляется по адресу http://www.youtube.com/oembed, который служит конечной точкой API YouTube для oEmbed-запросов. Этому API в параметре запроса "url" передается URL запрашиваемого видео. Ответ на запрос содержит метаданные видео, такие как автор и название, а также соответствующий HTML-код для внедрения.

oEmbed-поставщики могут возвращать ответы в формате XML или JSON. Все ответы имеют кодировку UTF-8. Формат ответа можно указать в запросе в виде дополнительного параметра "format". Пример приведен в листинге 2.

Листинг 2. Использование API oEmbed YouTube
GET http://www.youtube.com/oembed?url=http://www.youtube.com/watch?v=hI-BDR2UcmU
&format=json

{
  "provider_url": "http:\/\/www.youtube.com\/", 
  "title": "NORAD Tracks Santa - US Region", 
  "html": "<object width=\"425\" height=\"344\"><param name=\"movie\"
  value=\"http:\/\/www.youtube.com\/v\/hI-BDR2UcmU?fs=1\"><\/param>
  <param name=\"allowFullScreen\" value=\"true\"><\/param>
  <param name=\"allowscriptaccess\" value=\"always\"><\/param>
  <embed src=\"http:\/\/www.youtube.com\/v\/hI-BDR2UcmU?fs=1\" 
  type=\"application\/x-shockwave-flash\" width=\"425\" height=\"344\" 
  allowscriptaccess=\"always\" allowfullscreen=\"true\"><\/embed><\/object>", 
  "author_name": "NORADTracksSanta", 
  "height": 344, 
  "thumbnail_width": 480, 
  "width": 425, 
  "version": "1.0", 
  "author_url": "http:\/\/www.youtube.com\/user\/NORADTracksSanta", 
  "provider_name": "YouTube", 
  "thumbnail_url": "http:\/\/i1.ytimg.com\/vi\/hI-BDR2UcmU\/hqdefault.jpg", 
  "type": "video", 
  "thumbnail_height": 360
}

Вложение контента с помощью oEmbed

Теперь, когда вы знакомы с работой oEmbed, рассмотрим пример кода. Предполагается, что вы знакомы также с HTML, SQL и XML и что у вас установлена действующая среда разработки Apache и PHP. Еще предполагается, что вам известны основы работы с классами и объектами PHP, так как PHP-компоненты, используемые в этой статье, написаны в соответствии с принципами объектно-ориентированного программирования.

Чтобы использовать oEmbed с PHP-приложением, нужно выбрать одну из двух библиотек: PEAR Services_oEmbed или PHP-oembed. В большинстве примеров для этой статьи используется PEAR Services_oEmbed (хотя я для справки включил также несколько примеров применения php-oembed), так что установите ее. Это можно сделать вручную, загрузив библиотеку с сайта PEAR (см. ссылку в разделе Ресурсы ), или пусть она установится автоматически с помощью PEAR-установщика, как показано здесь.

shell> pear install Services_oEmbed-0.2.0

После установки попробуйте выполнить простой пример из листинга 3.

Листинг 3. Использование API oEmbed YouTube
<?php
// включение класса
include 'Services/oEmbed.php';

// определение URL контента
$url = 'http://www.youtube.com/watch?v=hI-BDR2UcmU';

// определение конечной точки API
$options = array(
  Services_oEmbed::OPTION_API => 'http://www.youtube.com/oembed'
);

// получение представления oEmbed
$oEmbed = new Services_oEmbed($url, $options);
$video = $oEmbed->getObject();
?>
<html>
  <head></head>
  <body>
    <div>
    <?php echo $video; ?>
    </div>    
  </body>
</html>

Листинг 3 начинается с загрузки класса Services_oEmbed, а затем в нем определяется URL контента для встраивания - в данном случае, видео с YouTube. Далее, инициализируется экземпляр класса Services_oEmbed, и конструктору класса передаются два аргумента: URL YouTube и массив параметров.

Ключевым элементом массива параметров служит конечная точка API oEmbed, в данном случае, конечная точка oEmbed YouTube, а именно, http://www.youtube.com/oembed. Наконец, вызов метода служебного объекта GetObject () заботится о выполнении oEmbed-запроса и возвращении представления объекта указанного видео.

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

Рисунок 1. Объект OEmbed, возвращаемый библиотекой PEAR Services_oEmbed
Объект OEmbed, возвращаемый библиотекой PEAR Services_oEmbed

А на рисунке 2 показан результат работы кода из листинга 3. В данном случае видео рассказывает о том, как спасательная служба NORAD наблюдает за Санта-Клаусом в регионе США.

Рисунок 2. Встроенный видеоролик YouTube
Встроенный видеоролик YouTube

Работа с метаданными контента

Во встроенный ролик можно добавить метаданные, как показано в листинге 4.

Листинг 4. Использование метаданных oEmbed
<?ph4
// включение класса
include 'Services/oEmbed.php';

// определение URL контента
$url = 'http://www.youtube.com/watch?v=hI-BDR2UcmU';

// определение конечной точки API
$options = array(
  Services_oEmbed::OPTION_API => 'http://www.youtube.com/oembed'
);

// получение представления oEmbed
$oEmbed = new Services_oEmbed($url, $options);
$video = $oEmbed->getObject();
?>
<html>
  <head></head>
  <body>
    <div>
    <?php echo $video; ?>
    </div>

    <div>
    Type: <?php echo $video->type;?> <br/>
    Title: <?php echo $video->title;?> <br/>
    Author: <a href="<?php echo $video->author_url;?>">
    <?php echo $video->author_name;?></a> <br/>
    Provider: <a href="<?php echo $video->provider_url;?>">
    <?php echo $video->provider_name;?></a> <br/>
    </div>
  </body>
</html>

На рисунке 3 изображен результат работы кода из листинга 4 с видео и дополнительными деталями, такими как тип (video), название (NORAD Tracks Santa - US Region), автор (NORADTracksSanta) и поставщик(YouTube).

Рисунок 3. Встроенный видеоролик YouTube с дополнительными метаданными
Встроенный видеоролик YouTube с дополнительными метаданными

Важно отметить, что спецификация oEmbed определяет четыре типа информации: фото, видео, ссылка и rich. Метаданные, возвращаемые для каждого типа, могут различаться; например, для видео имеется параметр html, содержащий код вставляемого видеоплеера, а для Фото ― параметр url , указывающий URL фотографии. Полный список параметров запросов и ответов приведен в спецификации (см. ссылку в разделе Ресурсы ).

Отметим также, что в запрос можно включить дополнительный параметр GetObject (): массив, содержащий параметры maxheight и maxwidth, которые определяют высоту и ширину возвращаемого представления.


Использование контента из нескольких источников

Приятно отметить, что oEmbed поддерживают многие популярные Web-сервисы: Flickr, Facebook, YouTube, Vimeo, Viddler, Revision3 и многие другие. Рассмотрим листинг 5, который демонстрирует процесс внедрения видео из Revision3.

Листинг 5. Использование API oEmbed Revision3
<?php
// включение класса
include 'Services/oEmbed.php';

// определение URL контента
$url = 'http://revision3.com/foundation/jackdorsey';

// определение конечной точки API
$options = array(
  Services_oEmbed::OPTION_API => 'http://revision3.com/api/oembed/'
);

// получение представления oEmbed
$oEmbed = new Services_oEmbed($url, $options);
$object = $oEmbed->getObject();
?>
<html>
  <head></head>
  <body>
    <div>
    <?php echo $object; ?>
    </div>

    <div>
    Type: <?php echo $object->type;?> <br/>
    Title: <?php echo $object->title;?> <br/>
    Author: <a href="<?php echo $object->author_url;?>">
    <?php echo $object->author_name;?></a> <br/>
    Provider: <a href="<?php echo $object->provider_url;?>">
    <?php echo $object->provider_name;?></a> <br/>
    </div>
  </body>
</html>

На рисунке 4 представлен результат с видео и дополнительными деталями, такими как тип (video), название (Jack Dorsey), автор (Foundation) и поставщик (Revision3).

Рисунок 4. Встроенный видеоролик Revision3
Встроенный видеоролик Revision3

В листинге 6 приведен еще один пример, на этот раз, вложение фрактала с Web-сайта deviantART.

Листинг 6. Использование API oEmbed deviantART
<?php
// включение класса
include 'Services/oEmbed.php';

// определение URL контента
$url = 'http://undead-academy.deviantart.com/art/Spool-192326055';

// определение конечной точки API
$options = array(
  Services_oEmbed::OPTION_API => 'http://backend.deviantart.com/oembed'
);

// получение представления oEmbed
$oEmbed = new Services_oEmbed($url, $options);
$object = $oEmbed->getObject();
?>
<html>
  <head></head>
  <body>
    <div>
    <?php echo $object; ?>
    </div>

    <div>
    Type: <?php echo $object->type;?> <br/>
    Title: <?php echo $object->title;?> <br/>
    Author: <a href="<?php echo $object->author_url;?>">
    <?php echo $object->author_name;?></a> <br/>
    Provider: <a href="<?php echo $object->provider_url;?>">
    <?php echo $object->provider_name;?></a> <br/>
    </div>
  </body>
</html>

На рисунке 5 представлен результат с фотографией и дополнительными деталями, такими как тип (photo), название (Spool), автор (Undead_Academy) и поставщик (DeviantArt).

Рисунок 5. Встроенное изображение DeviantArt
Встроенное изображение DeviantArt

Использование сервиса oohEmbed

Хотя многие Web-приложения уже предоставляют свою собственную конечную точку API oEmbed, некоторые этого пока не делают. Но и к этим приложениям можно получить доступ ― через сервис oohEmbed, который позиционирует себя как "oEmbed-совместимый поставщик встраиваемых HTML-кодов для различных Web-сайтов". В число дополнительных приложений и служб, к которым можно обращаться через oohEmbed, входят изображения товаров amazon.com, обновления статуса Twitter, Google Video, Metacafe, Slideshare, TwitPic, Wikipedia, Wordpress и др. Однако следует отметить, что oohEmbed поддерживает только выход JSON и часто игнорирует параметры MaxWidth и MaxHeight.

В листинге 7 приведен пример включения в код Web-страницы с помощью oohEmbed контента из Wikipedia.

Листинг 7. Использование oohEmbed и Wikipedia
<?php
// включение класса
include 'Services/oEmbed.php';

// определение URL контента
$url = 'http://en.wikipedia.org/wiki/Drupal';

// определение конечной точки API
$options = array(
  Services_oEmbed::OPTION_API => 'http://oohembed.com/oohembed/'
);

// получение представления oEmbed
$oEmbed = new Services_oEmbed($url, $options);
$object = $oEmbed->getObject();
?>
<html>
  <head></head>
  <body>
    <div>
    <?php echo $object->html; ?>
    </div>

    <div>
    Type: <?php echo $object->type;?> <br/>
    Title: <?php echo $object->title;?> <br/>
    Author: <a href="<?php echo $object->author_url;?>">
    <?php echo $object->author_name;?></a> <br/>
    Provider: <a href="<?php echo $object->provider_url;?>">
    <?php echo $object->provider_name;?></a> <br/>
    </div>
  </body>
</html>

Обратите внимание, что в листинге 7 указанная конечная точка API относится к oohEmbed, а не Wikipedia. oohEmbed работает как прокси-сервер, который принимает запрос oEmbed, смотрит на соответствующую ссылку и возвращает oEmbed-совместимый ответ, содержащий необходимые данные.

Рисунок 6 иллюстрирует выход листинга 7 с видео и дополнительными деталями, такими как тип (link), название (Drupal), автор (этот пункт пуст, так как имя автора не указано), и поставщик (Wikipedia).

Рисунок 6. Встроенная страница Wikipedia
Встроенная страница Wikipedia

Листинг 8 представляет собой пример вложения в Web-страницу презентации Slideshare (тип rich media) с использованием oohEmbed.

Листинг 8. Использование oohEmbed и Slideshare
<?php
// включение класса
include 'Services/oEmbed.php';

// определение URL контента
$url = 
'http://www.slideshare.net/weierophinney/best-practices-of-php-development-presentation';

// определение конечной точки API
$options = array(
  Services_oEmbed::OPTION_API => 'http://oohembed.com/oohembed/'
);

// получение представления oEmbed
$oEmbed = new Services_oEmbed($url, $options);
$object = $oEmbed->getObject();
?>
<html>
  <head></head>
  <body>
    <div>
    <?php echo $object; ?>
    </div>

    <div>
    Type: <?php echo $object->type;?> <br/>
    Title: <?php echo $object->title;?> <br/>
    Author: <a href="<?php echo $object->author_url;?>">
    <?php echo $object->author_name;?></a> <br/>
    Provider: <a href="<?php echo $object->provider_url;?>">
    <?php echo $object->provider_name;?></a> <br/>
    </div>
  </body>
</html>

Рисунок 7 иллюстрирует выход листинга 8 с презентацией и дополнительными деталями, такими как тип (rich), название (Best Practices of PHP Development), автор (weierophinney, действующая ссылка), и поставщик (SlideShare с действующей ссылкой).

Рисунок 7. Встроенная презентация Slideshare
Встроенная презентация Slideshare

В листинге 9 oohEmbed используется для извлечения и вставки изображения товара amazon.com по URL этого товара.

Листинг 9. Использование oohEmbed и amazon.com
<?php
// включение класса
include 'Services/oEmbed.php';

// определение URL контента
$url = 'http://www.amazon.com/Framework-Beginners-Guide-Vikram-Vaswani/dp/007163939X';

// определение конечной точки API
$options = array(
  Services_oEmbed::OPTION_API => 'http://oohembed.com/oohembed/'
);

// получение представления oEmbed
$oEmbed = new Services_oEmbed($url, $options);
$object = $oEmbed->getObject();
?>
<html>
  <head></head>
  <body>

    <div>
    <?php echo $object; ?>
    </div>

    <div>
    Type: <?php echo $object->type;?> <br/>
    Title: <?php echo $object->title;?> <br/>
    Author: <a href="<?php echo $object->author_url;?>">
    <?php echo $object->author_name;?></a> <br/>
    Provider: <a href="<?php echo $object->provider_url;?>">
    <?php echo $object->provider_name;?></a> <br/>
    </div>
  </body>
</html>

Рисунок 8 иллюстрирует выход листинга 9 с фотографией обложки книги и дополнительной информацией, такой как тип (photo), название (Zend Framework, A Beginner's Guide), автор (Vikram Vaswani, действующая ссылка) и поставщик (Amazon Product Image, действующая ссылка).

Рисунок 8. Встроенное изображение товара Amazon
Встроенное изображение товара Amazon

Использование альтернативных PHP-библиотек

Альтернативой библиотеки PEAR Services_oEmbed служит библиотека php-oembed, которую также можно использовать для внедрения контента в Web-страницу. Установить эту библиотеку легко: загрузите ее (см. ссылку в разделе Ресурсы) и скопируйте в какое-нибудь место в каталоге PHP. Настройка, однако, будет немного сложнее, чем для Services_oEmbed.

Библиотека php-oembed поддерживает свой собственный список поставщиков и конечных точек API oEmbed в XML-файле с именем providers.xml, расположенном в каталоге установки. Поэтому прежде чем приступить к использованию того или иного поставщика oEmbed, нужно сначала добавить его в этот файл. Например, если нужно использовать oEmbed API DeviantArt, сначала следует отредактировать файл providers.xml, добавив в него соответствующую запись, как показано в листинге 10 .

Листинг 10. Редактирование файла providers.xml с добавлением в него новой записи
<?xml version="1.0"?>
<providers>
  <provider>
    <url>http://*.flickr.com/*</url>
    <endpoint>http://www.flickr.com/services/oembed/</endpoint>
  </provider>
  <provider>
    <url>http://*.pownce.com/*</url>
    <endpoint>http://api.pownce.com/2.1/oembed.{format}</endpoint>
  </provider>
  <provider>
    <url>http://*.deviantart.com/*</url>
    <endpoint>http://backend.deviantart.com/oembed</endpoint>
  </provider>
  <provider>
    <url>http://*.youtube.*/*</url>
    <endpoint>http://www.youtube.com/oembed</endpoint>
  </provider>
</providers>

Когда поставщик добавлен, можно приступать к использованию php-oembed в сценарии PHP, как показано в листинге 11.

Листинг 11. Использование oohEmbed и deviantArt с библиотекой php-oembed
<?php
// определение конфигурации поставщика
define('PROVIDER_XML', 'providers.xml');

// включение классов
include 'ProviderManager.class.php';
include 'EmbedProvider.class.php';
include 'OEmbedProvider.class.php';
include 'LazyTemplateEngine.class.php';
include 'OEmbed.class.php';
include 'PhotoEmbed.class.php';

// создание менеджера поставщика
$manager = ProviderManager::getInstance();

// определение URL контента
$url = 'http://undead-academy.deviantart.com/art/Spool-192326055';

// получение представления oEmbed
$object = $manager->provide($url, 'object');
?>
<html>
  <head></head>
  <body>

    <div>
    <img src="<?php echo $object->url; ?>" />
    </div>

    <div>
    Type: <?php echo $object->type;?> <br/>
    Title: <?php echo $object->title;?> <br/>
    Author: <a href="<?php echo $object->author_url;?>">
    <?php echo $object->author_name;?></a> <br/>
    Provider: <a href="<?php echo $object->provider_url;?>">
    <?php echo $object->provider_name;?></a> <br/>
    </div>
  </body>
</html>

Листинг 11 начинается с определения расположения файла и providers.xml и включения всех соответствующих классов, необходимых для php-oembed. Затем создается объект сервиса ProviderManager, метод provide() которого используется для получения oEmbed-представления URL контента. Это представление может быть возвращено в различных форматах: XML, JSON, PHP-объект, PHP-массив или в виде последовательной строки.

Объект должен выглядеть как на рисунке 9. (Текстовая версия рисунка 9.)

Рисунок 9. oEmbed-объект, возвращенный библиотекой php-oembed
oEmbed-объект, возвращенный библиотекой php-oembed

Теперь очень легко использовать свойства этого объекта и включить в Web-страницу встроенное представление с фотографией и дополнительной информацией, такой как тип (photo), название (Spool), автор (Undead_Academy) и поставщик (DeviantArt), как показано на рисунке 10.

Рисунок 10. Встроенное изображение deviantArt
Встроенное изображение deviantArt

Пример приложения: внедрение контента в тело документа

Теперь, когда вам знакомы основы использования PHP с oEmbed, давайте посмотрим, как это работает в контексте примера приложения. Так как oEmbed относится к внедрению контента в Web-страницы, пример приложения предлагает пользователям форму для ввода документа (например, сообщения в блог) с автоматическим превращением гиперссылок из этого документа во встроенные представления контента с использованием oEmbed.

Полный код приведен в листинге 12.

Листинг 12. Пример приложения для внедрения контента в тело документа
<html>
  <head></head>
  <body>
    <?php if (isset($_POST['submit'])): ?>
    <?php
      // включение класса
      include 'Services/oEmbed.php';

      // определение конечной точки API
      $options = array(
        Services_oEmbed::OPTION_API => 'http://oohembed.com/oohembed/'
      );

      // получение тела сообщения
      // извлечение всех URL в массив
      $oBody = $_POST['body'];
      $title = $_POST['title'];
      preg_match_all('!https?://[\S]+!', $oBody, $matches);
      $urls = $matches[0];
      $embeds = array();      

      // получение для каждого URL
      // кода для встраивания из oohembed, если он существует
      // Иначе, преобразовать в обычную гиперссылку
      foreach ($urls as $url) {
        // получение представления oEmbed
        $oEmbed = new Services_oEmbed($url, $options);
        try {
          $object = $oEmbed->getObject(array('maxheight' => '100', 'maxwidth' => '100'));
          $embeds[] = (string)$object;
        } catch (Exception $e) {
          $embeds[] = "<a href=\"" . $url . "\">" . $url . "</a>";
        }
      }

      // замена ссылок в теле документа кодом
      // печать отредактированного документа
      $nBody = str_replace($urls, $embeds, $oBody);
    ?>

      <h1>Preview New Post</h1>
      <h2><?php echo $title; ?></h2>
      <p>
        <?php echo nl2br($nBody); ?>
      </p>

    <?php else: ?>

    <h1>Add New Post</h1>
    <form method="post" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>">
    <p>
      Title: <br/>
      <input type="text" name="title" size="40" />
    </p>
    <p>
      Body: <br/>
      <textarea name="body" rows="10" cols="50"></textarea>
    </p>
    <input type="submit" name="submit" />    
    </form>

    <?php endif; ?>

  </body>
</html>

Листинг 12 разделен на две части, отделенные друг от друга проверкой условия if-else(). Оно проверяет наличие команды на передачу формы; если она не обнаружена, отображается простая Web-форма, куда пользователю предлагается ввести заголовок страницы и текст. Пользователь может вводить текст в оба эти поля, вставляя в него по мере необходимости гиперссылки. Рисунок 11 иллюстрирует Web-форму, порожденную листингом 12, с некоторым примером ввода. (Текстовая версия рисунка 11.)

Рисунок 11. Web-форма с поддержкой внедрения контента в тело сообщения
Web-форма с поддержкой внедрения контента в тело сообщения

Когда форма отправлена, сценарий инициализирует новый объект Services_oEmbed, передавая ему конечную точку API oohEmbed. Затем он анализирует контент, представленный пользователем, извлекая все URL с помощью простого регулярного выражения. (Примечание. Это регулярное выражение не следует использовать в производственной среде, так как оно не защищено от XSS-атак.) Определенные таким способом URL-адреса хранятся в PHP-массиве с именем $urls.

Далее используются цикл foreach() и блок try-catch{} для итерации по массиву URL с передачей каждого элемента методу getObject() объекта Services_oEmbed. Этот шаг приводит к запросу соответствующего удаленного контента через API oohEmbed. Если контент находится на поддерживаемом сервисе, метод getObject () возвращает соответствующий код HTML-вставки, который сохраняется в отдельном массиве с именем $embeds. Если же контент не поддерживается, код генерирует исключение, которое перехватывается блоком try-catch{}. Это исключение означает, что встраиваемое представление URL недоступно, поэтому URL просто преобразуется в HTML-тег anchor и сохраняется в массиве$embeds.

Последним шагом будет выполнение операции поиска и замены по оригинальному телу документа, введенного пользователем, с заменой каждого URL либо соответствующим HTML-кодом вставки, либо HTML-гиперссылкой. Затем отредактированный документ распечатывается на Web-странице.

Рисунок 12 иллюстрирует конечный результат с внедренным в документ контентом.

Рисунок 12. Web-страница с внедренным в документ контентом
Web-страница с внедренным в документ контентом

Заключение

Эта статья содержит ускоренный курс по внедрению в Web-страницу rich-контента, такого как фотографии, видео и слайды, который хранится на сторонних Web-сервисах, с помощью спецификации oEmbed. Эта спецификация предоставляет эффективный и интуитивно понятный способ внедрения в Web-страницы данных из разнообразных популярных приложений и Web-сайтов. В примерах для этой статьи используются две клиентские библиотеки PHP для oEmbed и иллюстрируется использование oEmbed с рядом популярных Web-сайтов, в том числе Flickr, YouTube, SlideShare, Wikipedia и amazon.com.

Как видно из этих примеров, oEmbed ― это простой специализированный API, предназначенный для единственной цели - внедрения контента, и эту задачу он решает очень хорошо. Это гибкий инструмент для тех разработчиков, которые хотят создавать новые, оригинальные приложения с применением агрегации и поиска контента. Поиграйте с ним какое-то время и составьте собственное мнение.

Ресурсы

Научиться

  • Оригинал статьи
  • Спецификация oEmbed: описание oEmbed, формата, который позволяет встраивать представления, извлекаемые из сторонних сайтов.
  • Компонент PEAR Services_oEmbed: описание открытой спецификации для поиска информации об URI, включая структурные мета-данные, такие как тип объекта, название, сведения об авторе или параметры эскиза).
  • Сервис oohEmbed: описание oEmbed-совместимого поставщика встраиваемого HTML-кода для различных Web-сайтов.
  • Другие статьи этого автора (Vikram Vaswani, developerWorks, с августа 2007 г. по настоящее время): читайте статьи по XML, дополнительным API Google и другим технологиям.
  • Раздел XML на developerWorks: получите ресурсы, необходимые для повышения квалификации в области XML.
  • Сертификация IBM по XML: как стать сертифицированным IBM разработчиком XML и родственных технологий.
  • developerWorks на Twitter: Начните следить за твитами developerWorks.

Получить продукты и технологии

  • Компонент PEAR Services_oEmbed: загрузите открытую спецификацию для поиска информации об URI.
  • Библиотека php-oembed: загрузите PHP-библиотеку, которая обеспечивает OEmbed-совместимый интерфейс для клиентов JavaScript и PHP. Она взаимодействует с OEmbed-поставщиками, выступая в качестве прокси-сервера, и имеет настраиваемую систему, куда можно добавлять собственных поставщиков встраиваемого контента.

Комментарии

developerWorks: Войти

Обязательные поля отмечены звездочкой (*).


Нужен IBM ID?
Забыли Ваш IBM ID?


Забыли Ваш пароль?
Изменить пароль

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Профиль создается, когда вы первый раз заходите в developerWorks. Информация в вашем профиле (имя, страна / регион, название компании) отображается для всех пользователей и будет сопровождать любой опубликованный вами контент пока вы специально не укажите скрыть название вашей компании. Вы можете обновить ваш IBM аккаунт в любое время.

Вся введенная информация защищена.

Выберите имя, которое будет отображаться на экране



При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Обязательные поля отмечены звездочкой (*).

(Отображаемое имя должно иметь длину от 3 символов до 31 символа.)

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Вся введенная информация защищена.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=XML, Open source
ArticleID=824654
ArticleTitle=Обращение к стороннему контенту с помощью oEmbed и PHP
publish-date=07092012