Добавление на Турбо‑страницу контента сети ВКонтакте

  1. Перейдите на сайт ВКонтакте и создайте приложение. При создании:
    • выберите тип платформы Веб-сайт;
    • в поле Базовый домен укажите yastatic.net.
  2. Выберите из списка ниже виджет, который хотите добавить на Турбо‑страницу, и следуйте указаниям.

После добавления кода встраивания в 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 Ширина блока в пикселях. По умолчанию блок с записью растягивается на всю ширину страницы

* Обязательный параметр.

Чтобы добавить виджет на Турбо‑страницу:

  1. Во ВКонтакте сформируйте код для встраивания виджета и дополните его поддерживаемыми параметрами. Для встраивания виджета на Турбо‑страницу вам нужен код вызова виджета:
    <script type="text/javascript">
    VK.Widgets.Post("vk_post_1_45616", -11283947, 104942, 'DbGToYsmsvszY9IBlPFwaXOqEAuv', {width: 300});
</script>

  2. Добавьте код в тег <![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 Ширина блока в пикселях. По умолчанию блок с записью растягивается на всю ширину страницы

* Обязательный параметр.

Чтобы добавить виджет на Турбо‑страницу:

  1. Во ВКонтакте создайте опрос.

  2. На странице создания опроса нажмите кнопку Получить код и скопируйте код из поля Код вставки. Например:

    <!-- 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>

    Идентификатор вашего приложения ВКонтакте и идентификатор созданного опроса понадобятся при формировании кода для встраивания.

  3. Сформируйте код для встраивания: 
    <script type="text/javascript">
    VK.init({apiId: <идентификатор вашего приложения ВКонтакте>});
    VK.Widgets.Poll('vk_poll', {width: 300}, '<идентификатор опроса>');
</script>

  4. Добавьте код в тег <![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
  1. Сформируйте код для встраивания. Например:
    <script type="text/javascript">
    VK.Widgets.ContactUs("vk_contact_us", {text: "Задайте вопрос", height: 22}, -20003922);
</script>
  2. Добавьте код в тег <![CDATA[ ]]> внутри элемента turbo:content.
    ...
<turbo:content>
    <![CDATA[
        <script type="text/javascript">
            VK.Widgets.ContactUs("vk_contact_us", {text: "Задайте вопрос", height: 22}, -20003922);
        </script>
    ]]>
</turbo:content>
...

Публикация ссылок

Турбо‑страницы поддерживают подключение виджета с помощью HTML- и JavaScript-кода.

  1. Используйте элемент a со ссылкой на страницу-источник, для которой формируется Турбо‑страница.
    <a href="https://vk.com/share.php?url=http://example.com/page/">Поделиться ВКонтакте</a>
  2. Добавьте код в тег <![CDATA[ ]]> внутри элемента turbo:content.
    ...
<turbo:content>
    <![CDATA[
        <a href="https://vk.com/share.php?url=http://example.com/page/">Поделиться ВКонтакте</a>
    ]]>
</turbo:content>
...
Примечание.

При конфигурации виджета настраивайте ссылки с открытием в новой вкладке (target="_blank"), иначе есть риск, что пользователь не сможет открыть ссылку.

Пример проблемы в Chromium

Подписаться на автора

  1. Во ВКонтакте сформируйте код для встраивания. Для встраивания виджета на Турбо‑страницу вам нужен код вызова виджета:
    <script type="text/javascript">
    VK.Widgets.Subscribe('vk_subscribe', {mode: 1, soft: 1}, -11283947);
</script>
  2. Добавьте код в тег <![CDATA[ ]]> внутри элемента turbo:content.
    ...
<turbo:content>
    <![CDATA[
        <script type="text/javascript">
            VK.Widgets.Subscribe('vk_subscribe', {mode: 1, soft: 1}, -11283947);
        </script>
    ]]>
</turbo:content>
...

Разрешить писать сообществу

  1. Во ВКонтакте сформируйте код для встраивания. Для встраивания виджета на Турбо‑страницу вам нужен код вызова виджета:
    <script type="text/javascript">
    VK.Widgets.AllowMessagesFromCommunity("vk_send_message", {height: 30}, 1);
</script>
    Примечание. Турбо‑страницы не поддерживают отслеживание специальных событий, реализуемое с помощью VK.Observer.
  2. Добавьте код в тег <![CDATA[ ]]> внутри элемента turbo:content.
    ...
<turbo:content>
    <![CDATA[
        <script type="text/javascript">
            VK.Widgets.AllowMessagesFromCommunity("vk_send_message", {height: 30}, 1);
        </script>
    ]]>
</turbo:content>
...

Виджет для сообществ

  1. Во ВКонтакте сформируйте код для встраивания и дополните его поддерживаемыми параметрами. Для встраивания виджета на Турбо‑страницу вам нужен код вызова виджета:

    <script type="text/javascript">
    VK.Widgets.Group("vk_groups", { no_cover: 1, wide: 1, mode: 3, width: "300", height: "450"}, 11283947);
</script>
    Примечание. Турбо‑страницы не поддерживают отслеживание специальных событий, реализуемое с помощью VK.Observer.
  2. Добавьте код в тег <![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>
...

Виджет «Мне нравится»

  1. Во ВКонтакте создайте виджет.

  2. На странице создания виджета скопируйте код из поля Код для вставки. Например:

    <!-- 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>
  3. Сформируйте из скопированного кода фрагмент для встраивания виджета на Турбо‑страницу и дополните его поддерживаемыми параметрами: 
    <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.

  4. Добавьте код в тег <![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>
...

Виджет рекомендаций

  1. Во ВКонтакте создайте виджет.

  2. На странице создания виджета скопируйте код из поля Код для вставки. Например:

    <!-- 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>
  3. Сформируйте из скопированного кода фрагмент для встраивания виджета на Турбо‑страницу и дополните его поддерживаемыми параметрами: 
    <script type="text/javascript">
    VK.init({apiId: <идентификатор вашего приложения ВКонтакте>, onlyWidgets: true});
    VK.Widgets.Recommended("vk_recommended", {limit: 3, period: 'day'});
</script>

  4. Добавьте код в тег <![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>
...

Виджет для комментариев

  1. Во ВКонтакте создайте виджет.

  2. На странице создания виджета скопируйте код из поля Код для вставки. Например:

    <!-- 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>
  3. Сформируйте из скопированного кода фрагмент для встраивания виджета на Турбо‑страницу и дополните его поддерживаемыми параметрами: 
    <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.

  4. Добавьте код в тег <![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>
...

Видео

Видеоролики можно встраивать на Турбо‑страницу с помощью элемента iframe. Элемент может содержать следующие атрибуты:
  • oid* — OID видео;
  • id* — ID видео;
  • hash* — хэш видео;
  • hd — разрешение видео (число от 0 до 3 включительно);
  • width — ширина.

* Обязательный атрибут.

Добавьте код для вставки в тег <![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>
...