Больше результатов...

Generic selectors
Только точные совпадения
Искать в заголовках
Искать в контенте
Post Type Selectors
Filter by Categories
FAQ
Hostenko
Вдохновение
Видеоуроки
Новости
Плагины
Темы
Уроки
Хаки

oEmbed: Как встроить SlideShare и Instagram в WordPress

oEmbed — открытый формат, который позволяет владельцам сайтов получать контент от третьей стороны с помощью URI и вставлять его в их сайты. Этим контентом могут быть изображения, видео, документы, что угодно. oEmbed предоставляет владельцам контента стандарт для того, чтобы делиться своим контентом в сети, упрощая получение контента и вставку его в сайты. Некоторые наиболее популярные контентные сайты, такие как YouTube, Flickr, Hulu, Vimeo и SlideShare поддерживают oEmbed.

inet.ws - Powerful VPS Hosting in the USA, Canada, UK and DE!

WordPress начал поддерживать oEmbed начиная с версии 2.9, чтобы сделать распространение контента проще. Теперь пользователи могут просто вставить URL видео YouTube (или любого другого поддерживаемого сайта) и WordPress автоматически вставит контент.

oEmbed: Как встроить SlideShare и Instagram в WordPress

Как работает oEmbed?

Идея oEmbed — предоставить стандартное решение для распространения контента. Так что, когда вы вставляете ссылку на провайдера, поддерживаемого oEmbed, в ваш WordPress или в любую поддерживаемую oEmbed платформу, затем он будет искать заголовок oEmbed в URL провайдера. Найдя заголовок oEmbed, он отправляет стандартный запрос к этому сайту. Этот запрос затем возвращает стандартный и структурированный ответ. Этот ответ используется для отображения контента на вашей платформе.

Пример:

Мы хотим вставить это видео на ваш сайт. Оно размещено на YouTube, и, если вы посмотрите на исходный код видео страницы, вы увидите такие строки:

<link rel="alternate" type="application/json+oembed" href="http://www.youtube.com/oembed?url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DpFDoCLf96Kg&amp;format=json" title="Rebecca MacKinnon: Let's take back the Internet!">
<link rel="alternate" type="text/xml+oembed" href="http://www.youtube.com/oembed?url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DpFDoCLf96Kg&amp;format=xml" title="Rebecca MacKinnon: Let's take back the Internet!">

Эти строки делают основной встраиваемый контент на веб странице доступным. Первая строка предоставляет ссылку на JSON ответ, вторая строка — на XML ответ.

Если ваша платформа поддерживает oEmbed, затем он обращается к одному из URL и получит примерно такой ответ от одной из этих ссылок:

JSON ответ:

{
"provider_url": "http://www.youtube.com/",
"thumbnail_url": "http://i1.ytimg.com/vi/pFDoCLf96Kg/hqdefault.jpg",
"title": "Rebecca MacKinnon: Let's take back the Internet!",
"html": "u003ciframe width="480" height="270" src="http://www.youtube.com/embed/pFDoCLf96Kg?fs=1u0026feature=oembed" frameborder="0" allowfullscreenu003eu003c/iframeu003e",
"author_name": "TEDtalksDirector",
"height": 270,
"thumbnail_width": 480,
"width": 480,
"version": "1.0",
"author_url": "http://www.youtube.com/user/TEDtalksDirector",
"provider_name": "YouTube",
"type": "video",
"thumbnail_height": 360
}

XML ответ:

<oembed>
<provider_url>http://www.youtube.com/</provider_url>
<thumbnail_url>http://i1.ytimg.com/vi/pFDoCLf96Kg/hqdefault.jpg</thumbnail_url>
<title>Rebecca MacKinnon: Let's take back the Internet!</title>
<html>
<iframe width="480" height="270" src="http://www.youtube.com/embed/pFDoCLf96Kg?fs=1&feature=oembed" frameborder="0" allowfullscreen></iframe>
</html>
<author_name>TEDtalksDirector</author_name>
<height>270</height>
<thumbnail_width>480</thumbnail_width>
<width>480</width>
<version>1.0</version>
<author_url>http://www.youtube.com/user/TEDtalksDirector</author_url>
<provider_name>YouTube</provider_name>
<type>video</type>
<thumbnail_height>360</thumbnail_height>
</oembed>

Теперь это структурированные данные, которые предоставляют всю необходимую информацию для вставки контента на ваш сайт.

oEmbed в WordPress

oEmbed: Как встроить SlideShare и Instagram в WordPress

WordPress поддерживает oEmbed, но не все oEmbed провайдеры поддерживаются по умолчанию. Функциональность для этого есть, но разрешение вставки в пользовательские сайты любого oEmbed контента по oEmbed ссылке было бы дырой в безопасности сайта. Чтобы защититься от этого, у WordPress есть свой внутренний белый список сайтов, для которых вставка автоматически включена. На момент написания этой статьи по умолчанию поддерживались такие oEmbed провайдеры:

  • YouTube
  • Vimeo
  • DailyMotion
  • Flickr
  • Twitter
  • Hulu
  • Viddler
  • Scribd
  • wordpress.tv
  • SmugMug
  • FunnyOrDie.com
  • Qik
  • Revision3
  • blip.tv
  • Photobucket
  • PollDaddy

Список хранится в wp-includes → class-oembed.php (не редактируйте этот файл). Тем не менее, вы можете добавить больше oEmbed провайдеров, используя функцию wp_oembed_add_provider().

Добавление SlideShare как oEmbed провайдера в WordPress

SlideShare — один из популярных сайтов, которые поддерживают oEmbed и не входят в белый лист oEmbed WordPress. Так что если вы добавляете много SlideShare контента на ваш сайт, возможно, вы захотите упростить вставку контента. Чтобы сделать это, мы добавим SlideShare как oEmbed провайдера в наш WordPress. Мы будем использовать функцию wp_oembed_add_provider(). У этой функции три аргумента:

<?php
wp_oembed_add_provider( $format, $provider, $regex );
?>
  • $format — обязательный аргумент, который сообщает WordPress, какой тип структуры URL у провайдера.
  • $provider также обязательный, это основной URL провайдера, к которому будут направлены все запросы.
  • $regex — необязательный аргумент, который сообщает WordPress, что формат URL — regex string (True) или просто общая схема (False), по умолчанию значение false.

Чтобы добавить SlideShare как oEmbed провайдера, мы добавляем в файл functions.php нашей темы следующий код:

wp_oembed_add_provider( 'http://www.slideshare.net/*/*', 'http://www.slideshare.net/api/oembed/2' );

Мы получили формат URL и базовый URL с официального сайта oEmbed. Если провайдер не перечислен в списке oEmbed провайдеров, это не значит, что он не может воспользоваться oEmbed. У большинства провайдеров на сайте есть страница oEmbed API, которая описывает, что вам нужно знать для того, чтобы воспользоваться этими возможностями.

Теперь, чтобы вставить слайд SlideShare, все, что вам нужно сделать, это скопировать URL из адресной строки и вставить его при редактировании записи.

oEmbed: Как встроить SlideShare и Instagram в WordPress

Добавление Instagram как oEmbed провайдера в WordPress

Чтобы потренироваться, давайте добавим другой популярный oEmbed провайдер на наш WordPress сайт. В этот раз мы добавим Instagram. Вот код:

wp_oembed_add_provider( 'http://instagr.am/*/*', 'http://api.instagram.com/oembed' );
wp_oembed_add_provider( 'http://www.instagram.com/*/*', 'http://api.instagram.com/oembed' );

Обратите внимание, что мы добавляем instagram.com и instagr.am как разные провайдеры, чтобы убедиться, что и обычные, и сокращенные URL будут работать правильно.

oEmbed: Как встроить SlideShare и Instagram в WordPress

Плагин Embedly для вставки контента из разных источников

Embedly предоставляет простые решения вставки и для провайдеров, и для владельцев сайтов. У них есть бесплатный WordPress плагин, который позволяет вставлять контент из более чем 200 источников, просто вставляя URL. Он поддерживает такие сайты как Tumblr, Wikipedia, deviantart, twitpic, и т.п.

Мне кажется, что использовать Embedly вместо того, чтобы вручную добавлять oEmbed и не-oEmbed провайдеры, — достаточно безопасно. Я пробовал тестировать Embedly со стандартной WordPress темой TwentlyEleven, вставляя URL для популярных контент-провайдеров. Результаты были удовлетворительные. Думаю, основные переживания владельцев сайтов будут о том, чтобы вставки соответствовали их контенту и не выглядели уродливо.

oEmbed: Как встроить SlideShare и Instagram в WordPress

Заключение

Распространение контента стало важным аспектом взаимодействия людей в сети. Как владелец сайта, я чувствую себя обязанным обеспечить простые решения для распространения контента для посетителей моего сайта и для авторов. oEmbed упрощает это для меня. Но пока я писал этот пост, я спрашивал себя, знают ли пользователи WordPress, что им не нужен код вставки для некоторых провайдеров? Я думаю, не считая YouTube, пользователи WordPress не знают, какие провайдеры поддерживаются.

Источник:WPLift.com
inet.ws - Powerful VPS Hosting in the USA, Canada, UK and DE!
Алексей Шевченко
редактор wpcafe
Изучает сайтостроение с 2008 года. Практикующий вебмастер, специализирующий на создание сайтов на WordPress. Задать вопрос Алексею можно на https://profiles.wordpress.org/wpthemeus/

Комментарии к записи: 7

Ольга:

Мне так показалось, что oEmbed очень неплохой плагин. Надо будет опробовать.

WordPresso:

oEmbed это сама технология, формат для открытого «подтягивания» контента. Плагин называется Embedly.

Роман Рыбальченко:

При попытке лайкнуть на ФБ — лайкается совсем другая запись.

WordPresso:

Уже занимаемся этой проблемой, спасибо.

Web Development Company:

Thank you WPB..your articles have been so helpful!

Игорь:

Для встраивания Instagram галереи я использую BadgePLZ.com

Алексей:

Доброго дня! А как сделать чтобы в ПОХОЖИЕ МАТЕРИАЛЫ миниатюры были с закругленными краями как у вас на блоге?

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