Добавление на Турбо‑страницу контента сети ВКонтакте
- Перейдите на сайт ВКонтакте и создайте приложение. При создании:
- выберите тип платформы Веб-сайт;
- в поле Базовый домен укажите yastatic.net.
- Выберите из списка ниже виджет, который хотите добавить на Турбо‑страницу, и следуйте указаниям.
После добавления кода встраивания в RSS-канал, посмотрите, как контент отображается на Турбо‑странице. Сделать это можно в Вебмастере на странице Подробнее об отладке.
.Для встраивания виджетов на Турбо‑страницы используется JavaSrcipt-код.
- Запись на стене. Позволяет добавить на Турбо‑страницу отдельную запись или комментарий пользователя или сообщества ВКонтакте.
- Опросы. Виджет позволяет пользователям проголосовать на Турбо‑странице вашего сайта.
- Напишите нам. Дает возможность пользователю связаться с владельцем сообщества.
- Публикация ссылок. Пользователи смогут поделиться ссылкой.
- Подписаться на автора. Посетители Турбо‑страницы смогут в один клик подписаться на заданного вами пользователя или группу.
- Разрешить писать сообществу. Позволяет пользователям быстро подписаться на уведомления в личных сообщениях от сообщества.
- Сообщества. Виджет покажет новости сообщества или фотографии участников.
- Мне нравится. Пользователи смогут оценить контент вашей Турбо‑страницы.
- Рекомендации. Позволяет пользователям найти самые популярные материалы вашего сайта. Используются данные виджета «Мне нравится».
- Комментарии. Помогает пользователям комментировать содержимое ваших страниц.
- Видео. Вы можете добавлять в текст видеоматериалы, размещенные во ВКонтакте.
Виджет «Запись на стене»
В коде вы можете использовать следующие параметры:
Параметр | Тип | Описание |
---|---|---|
owner_id * | Integer | Числовой идентификатор владельца стены, на которой размещена запись |
post_id * | Integer | Числовой идентификатор записи на стене или комментария |
hash * | String | Служебный параметр. Получить его значение можно в конструкторе виджета или в окне «Поделиться» для выбранной записи |
options | Object | Опции виджета |
width | Integer | Ширина блока в пикселях. По умолчанию блок с записью растягивается на всю ширину страницы |
Параметр | Тип | Описание |
---|---|---|
owner_id * | Integer | Числовой идентификатор владельца стены, на которой размещена запись |
post_id * | Integer | Числовой идентификатор записи на стене или комментария |
hash * | String | Служебный параметр. Получить его значение можно в конструкторе виджета или в окне «Поделиться» для выбранной записи |
options | Object | Опции виджета |
width | Integer | Ширина блока в пикселях. По умолчанию блок с записью растягивается на всю ширину страницы |
* Обязательный параметр.
Чтобы добавить виджет на Турбо‑страницу:
- Во ВКонтакте сформируйте код для встраивания виджета и дополните его поддерживаемыми параметрами. Для встраивания виджета на Турбо‑страницу вам нужен код вызова виджета:
<script type="text/javascript"> VK.Widgets.Post("vk_post_1_45616", -11283947, 104942, 'DbGToYsmsvszY9IBlPFwaXOqEAuv', {width: 300}); </script>
Добавьте код в тег <![CDATA[ ]]> внутри элемента turbo:content.
... <turbo:content> <![CDATA[ <script type="text/javascript"> VK.Widgets.Post("vk_post_1_45616", -11283947, 104942, 'DbGToYsmsvszY9IBlPFwaXOqEAuv', {width: 300}); </script> ]]> </turbo:content> ...
Виджет опросов
В коде вы можете использовать следующие параметры и элементы:
Параметр | Тип | Описание |
---|---|---|
api_id * | Integer | Числовой идентификатор вашего приложения ВКонтакте |
poll_id * | String | Идентификатор опроса. Вы можете получить его с помощью конструктора виджета или с помощью кнопки Получить код в уже существующем опросе |
options | Object | Опции виджета |
width | Integer | Ширина блока в пикселях. По умолчанию блок с записью растягивается на всю ширину страницы |
Параметр | Тип | Описание |
---|---|---|
api_id * | Integer | Числовой идентификатор вашего приложения ВКонтакте |
poll_id * | String | Идентификатор опроса. Вы можете получить его с помощью конструктора виджета или с помощью кнопки Получить код в уже существующем опросе |
options | Object | Опции виджета |
width | Integer | Ширина блока в пикселях. По умолчанию блок с записью растягивается на всю ширину страницы |
* Обязательный параметр.
Чтобы добавить виджет на Турбо‑страницу:
- Во ВКонтакте создайте опрос.
На странице создания опроса нажмите кнопку Получить код и скопируйте код из поля Код вставки. Например:
<!-- Put this script tag to the <head> of your page --> <script type="text/javascript" src="https://vk.com/js/api/openapi.js?154"></script> <script type="text/javascript"> VK.init({apiId: <идентификатор вашего приложения ВКонтакте>, onlyWidgets: true}); </script> <!-- Put this div tag to the place, where the Poll block will be --> <div id="vk_poll"></div> <script type="text/javascript"> VK.Widgets.Poll('vk_poll', {width: 300}, '<идентификатор опроса>'); </script>
Идентификатор вашего приложения ВКонтакте и идентификатор созданного опроса понадобятся при формировании кода для встраивания.
- Сформируйте код для встраивания:
<script type="text/javascript"> VK.init({apiId: <идентификатор вашего приложения ВКонтакте>}); VK.Widgets.Poll('vk_poll', {width: 300}, '<идентификатор опроса>'); </script>
Добавьте код в тег <![CDATA[ ]]> внутри элемента turbo:content.
... <turbo:content> <![CDATA[ <script type="text/javascript"> VK.init({apiId: <идентификатор вашего приложения ВКонтакте>}); VK.Widgets.Poll('vk_poll', {width: 300}, '<идентификатор опроса>'); </script> ]]> </turbo:content> ...
Виджет «Напишите нам»
Вы можете использовать следующие параметры в коде для встраивания виджета:
Параметр | Тип | Описание |
---|---|---|
owner_id * | Integer | Идентификатор пользователя или сообщества, для которого вы создаете виджет. Идентификатор сообщества необходимо указывать со знаком «минус» |
text | String | Текст надписи на кнопке, максимум 140 символов. По умолчанию принимает значение Напишите нам |
height | Integer | Высота кнопки в пикселях. Возможные значения: 18, 20, 22, 24, 30. По умолчанию принимает значение 24 |
Параметр | Тип | Описание |
---|---|---|
owner_id * | Integer | Идентификатор пользователя или сообщества, для которого вы создаете виджет. Идентификатор сообщества необходимо указывать со знаком «минус» |
text | String | Текст надписи на кнопке, максимум 140 символов. По умолчанию принимает значение Напишите нам |
height | Integer | Высота кнопки в пикселях. Возможные значения: 18, 20, 22, 24, 30. По умолчанию принимает значение 24 |
- Сформируйте код для встраивания. Например:
<script type="text/javascript"> VK.Widgets.ContactUs("vk_contact_us", {text: "Задайте вопрос", height: 22}, -20003922); </script>
- Добавьте код в тег <![CDATA[ ]]> внутри элемента turbo:content.
... <turbo:content> <![CDATA[ <script type="text/javascript"> VK.Widgets.ContactUs("vk_contact_us", {text: "Задайте вопрос", height: 22}, -20003922); </script> ]]> </turbo:content> ...
Подписаться на автора
- Во ВКонтакте сформируйте код для встраивания. Для встраивания виджета на Турбо‑страницу вам нужен код вызова виджета:
<script type="text/javascript"> VK.Widgets.Subscribe('vk_subscribe', {mode: 1, soft: 1}, -11283947); </script>
- Добавьте код в тег <![CDATA[ ]]> внутри элемента turbo:content.
... <turbo:content> <![CDATA[ <script type="text/javascript"> VK.Widgets.Subscribe('vk_subscribe', {mode: 1, soft: 1}, -11283947); </script> ]]> </turbo:content> ...
Разрешить писать сообществу
- Во ВКонтакте сформируйте код для встраивания. Для встраивания виджета на Турбо‑страницу вам нужен код вызова виджета:
<script type="text/javascript"> VK.Widgets.AllowMessagesFromCommunity("vk_send_message", {height: 30}, 1); </script>
Примечание. Турбо‑страницы не поддерживают отслеживание специальных событий, реализуемое с помощью VK.Observer. - Добавьте код в тег <![CDATA[ ]]> внутри элемента turbo:content.
... <turbo:content> <![CDATA[ <script type="text/javascript"> VK.Widgets.AllowMessagesFromCommunity("vk_send_message", {height: 30}, 1); </script> ]]> </turbo:content> ...
Виджет для сообществ
Во ВКонтакте сформируйте код для встраивания и дополните его поддерживаемыми параметрами. Для встраивания виджета на Турбо‑страницу вам нужен код вызова виджета:
<script type="text/javascript"> VK.Widgets.Group("vk_groups", { no_cover: 1, wide: 1, mode: 3, width: "300", height: "450"}, 11283947); </script>
Примечание. Турбо‑страницы не поддерживают отслеживание специальных событий, реализуемое с помощью VK.Observer.- Добавьте код в тег <![CDATA[ ]]> внутри элемента turbo:content.
... <turbo:content> <![CDATA[ <script type="text/javascript"> VK.Widgets.Group("vk_groups", { no_cover: 1, wide: 1, mode: 3, width: "300", height: "450"}, 11283947); </script> ]]> </turbo:content> ...
Виджет «Мне нравится»
- Во ВКонтакте создайте виджет.
На странице создания виджета скопируйте код из поля Код для вставки. Например:
<!-- Put this script tag to the <head> of your page --> <script type="text/javascript" src="https://vk.com/js/api/openapi.js?154"></script> <script type="text/javascript"> VK.init({apiId: <идентификатор вашего приложения ВКонтакте>, onlyWidgets: true}); </script> <!-- Put this div tag to the place, where the Like block will be --> <div id="vk_like"></div> <script type="text/javascript"> VK.Widgets.Like( 'vk_like', { pageUrl: 'https://ya.ru', pageTitle: 'Яндекс', type: 'mini', verb: 1 }, 321); </script>
- Сформируйте из скопированного кода фрагмент для встраивания виджета на Турбо‑страницу и дополните его поддерживаемыми параметрами:
<script type="text/javascript"> VK.init({apiId: <идентификатор вашего приложения ВКонтакте>, onlyWidgets: true}); VK.Widgets.Like( 'vk_like', { pageUrl: 'https://ya.ru', pageTitle: 'Яндекс', type: 'mini', verb: 1 }, 321); </script>
Примечание. Турбо‑страницы не поддерживают отслеживание специальных событий, реализуемое с помощью VK.Observer. Добавьте код в тег <![CDATA[ ]]> внутри элемента turbo:content.
... <turbo:content> <![CDATA[ <script type="text/javascript"> VK.init({apiId: <идентификатор вашего приложения ВКонтакте>, onlyWidgets: true}); VK.Widgets.Like( 'vk_like', { pageUrl: 'https://ya.ru', pageTitle: 'Яндекс', type: 'mini', verb: 1 }, 321); </script> ]]> </turbo:content> ...
Виджет рекомендаций
- Во ВКонтакте создайте виджет.
На странице создания виджета скопируйте код из поля Код для вставки. Например:
<!-- Put this script tag to the <head> of your page --> <script type="text/javascript" src="https://vk.com/js/api/openapi.js?154"></script> <script type="text/javascript"> VK.init({apiId: <идентификатор вашего приложения ВКонтакте>, onlyWidgets: true}); </script> <!-- Put this div tag to the place, where the Like block will be --> <div id="vk_recommended"></div> <script type="text/javascript"> VK.Widgets.Recommended("vk_recommended", {limit: 3, period: 'day'}); </script>
- Сформируйте из скопированного кода фрагмент для встраивания виджета на Турбо‑страницу и дополните его поддерживаемыми параметрами:
<script type="text/javascript"> VK.init({apiId: <идентификатор вашего приложения ВКонтакте>, onlyWidgets: true}); VK.Widgets.Recommended("vk_recommended", {limit: 3, period: 'day'}); </script>
Добавьте код в тег <![CDATA[ ]]> внутри элемента turbo:content.
... <turbo:content> <![CDATA[ <script type="text/javascript"> VK.init({apiId: <идентификатор вашего приложения ВКонтакте>, onlyWidgets: true}); VK.Widgets.Recommended("vk_recommended", {limit: 3, period: 'day'}); </script> ]]> </turbo:content> ...
Виджет для комментариев
- Во ВКонтакте создайте виджет.
На странице создания виджета скопируйте код из поля Код для вставки. Например:
<!-- Put this script tag to the <head> of your page --> <script type="text/javascript" src="https://vk.com/js/api/openapi.js?154"></script> <script type="text/javascript"> VK.init({apiId: <идентификатор вашего приложения ВКонтакте>, onlyWidgets: true}); </script> <!-- Put this div tag to the place, where the Comments block will be --> <div id="vk_comments"></div> <script type="text/javascript"> VK.Widgets.Comments('vk_comments', {attach: 'audio', autoPublish: 1, norealtime: 1, limit: 15, pageUrl: 'https://ya.ru'}, 1); </script>
- Сформируйте из скопированного кода фрагмент для встраивания виджета на Турбо‑страницу и дополните его поддерживаемыми параметрами:
<script type="text/javascript"> VK.init({apiId: <идентификатор вашего приложения ВКонтакте>, onlyWidgets: true}); VK.Widgets.Comments('vk_comments', {attach: 'audio', autoPublish: 1, norealtime: 1, limit: 15, pageUrl: 'https://ya.ru'}, 1); </script>
Примечание. Турбо‑страницы не поддерживают отслеживание специальных событий, реализуемое с помощью VK.Observer. Добавьте код в тег <![CDATA[ ]]> внутри элемента turbo:content.
... <turbo:content> <![CDATA[ <script type="text/javascript"> VK.init({apiId: <идентификатор вашего приложения ВКонтакте>, onlyWidgets: true}); VK.Widgets.Comments('vk_comments', {attach: 'audio', autoPublish: 1, norealtime: 1, limit: 15, pageUrl: 'https://ya.ru'}, 1); </script> ]]> </turbo:content> ...
Видео
* Обязательный атрибут.
Добавьте код для вставки в тег <![CDATA[ ]]> внутри элемента turbo:content.
...
<turbo:content>
<![CDATA[
<iframe src="//vk.com/video_ext.php?oid=-11283947&id=456239389&hash=8e5946d6492de97d&hd=2" width="300" height="480" frameborder="0" allowfullscreen></iframe>
]]>
</turbo:content>
...