Эпизод подкаста

Добавляйте любимые подкасты ВКонтакте на свой сайт — посетители смогут слушать их, не покидая страницу. Виджеты разных эпизодов можно добавлять в неограниченном количестве — это позволит вам создать целую подборку.

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

Подключение виджета

Чтобы добавить на свой сайт виджет эпизода подкаста ВКонтакте, выполните эти шаги:

Шаг 1. В тег <head> на странице вашего сайта добавьте подключение openapi.js:

HTML
<script src="https://vk.com/js/api/openapi.js?169" type="text/javascript"></script>

Шаг 2. В тело страницы добавьте элемент <div>, в котором будут отображаться комментарии, задайте ему уникальный id, и добавьте в него код инициализации виджета. Например:

HTML
<div id="vk_podcast"></div> <script type="text/javascript"> VK.Widgets.Podcast('vk_podcast', '-147415323_456242257', '87e3ea29cfd350c30e'); </script>

Приведённый код добавляет виджет стандартного вида. Ширина блока будет подобрана автоматически, исходя из размеров и положения элемента с id="vk_podcast".

Если на вашем сайте уже используется Open API, добавить виджет ещё проще. Достаточно просто добавить инициализацию виджета.

Дополнительные настройки

Метод VK.Widgets.Podcast принимает три обязательных параметра:

  • •
    element_id (string), обязательный параметр — id элемента, который будет контейнером для блока с виджетом. В нашем конструкторе по умолчанию используется значение vk_podcast.
  • •
    episode_id (string), обязательный параметр — идентификатор эпизода подкаста.
  • •
    hash (string), обязательный параметр — служебный параметр. Получить hash можно только в конструкторе виджета.

Пример использования

HTML
<script type="text/javascript" src="//vk.com/js/api/openapi.js?169"></script> <span class="wk_comment"> VK Widget </span> <div id="vk_podcast"></div> <script type="text/javascript"> VK.Widgets.Podcast('vk_podcast', '-147415323_456242257', '87e3ea29cfd350c30e'); </script>

Код виджета

Чтобы добавить виджет на ваш сайт, просто скопируйте код для вставки на страницу, на которой вы хотите разместить виджет.

Ссылка на эпизод
Ширина
Код виджета для вставки на сайте
HTML
<!-- Put this script tag to the <head> of your page --> <script type="text/javascript" src="https://vk.com/js/api/openapi.js?168" charset="windows-1251" ></script> <!-- Put this script tag to the place, where the Podcast block will be --> <div id="vk_podcast"></div> <script type="text/javascript"> VK.Widgets.Podcast('vk_podcast_-147415323_456242257', '-147415323_456242257', {}); </script>