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

  1. Перейдите на сайт ВКонтакте и создайте приложение. При создании:

    • выберите тип платформы Веб-сайт;

    • в поле Базовый домен укажите yastatic.net.

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

После добавления кода встраивания в RSS-канал, посмотрите, как контент отображается на Турбо‑странице. Сделать это можно в Вебмастере на странице Турбо‑страницы для контентных сайтов → Отладка. Подробнее об отладке.

Для встраивания виджетов на Турбо‑страницы используется JavaSrcipt-код.

  • Запись на стене. Позволяет добавить на Турбо‑страницу отдельную запись или комментарий пользователя или сообщества ВКонтакте.

  • Опросы. Виджет позволяет пользователям проголосовать на Турбо‑странице вашего сайта.

  • Напишите нам. Дает возможность пользователю связаться с владельцем сообщества.

  • Публикация ссылок. Пользователи смогут поделиться ссылкой.

  • Подписаться на автора. Посетители Турбо‑страницы смогут в один клик подписаться на заданного вами пользователя или группу.

  • Разрешить писать сообществу. Позволяет пользователям быстро подписаться на уведомления в личных сообщениях от сообщества.

  • Сообщества. Виджет покажет новости сообщества или фотографии участников.

  • Мне нравится. Пользователи смогут оценить контент вашей Турбо‑страницы.

  • Рекомендации. Позволяет пользователям найти самые популярные материалы вашего сайта. Используются данные виджета «Мне нравится».

  • Комментарии. Помогает пользователям комментировать содержимое ваших страниц.

  • Видео. Вы можете добавлять в текст видеоматериалы, размещенные во ВКонтакте.

Виджет «Запись на стене»

В коде вы можете использовать следующие параметры:

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

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

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

  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

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

Поддерживаются следующие параметры:

Параметр

Тип

Описание

url*

String

URL страницы, ссылка на которую должна быть опубликована. Кириллические адреса нужно передавать в Punycode.

title

String

Заголовок публикации. Если параметр не указан, заголовок будет взят со страницы публикации автоматически

image

String

URL изображения для публикации. Если параметр не указан, изображение будет взято со страницы публикации автоматически

noparse

Boolean

Если в этом параметре передано значение true, то сервер ВКонтакте не будет отправлять дополнительный запрос для загрузки недостающей информации с публикуемой страницы. Если же значение false, то запрос будет отправляться всегда

no_vk_links

Если в этом параметре передано значение 1, в окне публикации не будет активных ссылок на профиль пользователя

button_options

Object

Опции кнопки

type

Boolean

Тип кнопки. Возможные значения:

  • round — кнопка со скругленными углами и со счетчиком;

  • round_nocount — кнопка со скругленными углами без счетчика;

  • button — кнопка с прямыми углами и со счетчиком;

  • button_nocount — кнопка с прямыми углами без счетчика ссылок;

  • link — текстовая ссылка с иконкой ВКонтакте;

  • link_noicon — текстовая ссылка без иконки.

По умолчанию: round.

text

String

Позволяет задать текст на кнопке

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

    <script>
    VK.Share.button(
        {url: 'https://ya.ru', title: 'Заголовок', noparse: true, no_vk_links: 1},
        {type: 'button_nocount', text: 'Поделиться'})
</script>

  2. Добавьте код в тег <![CDATA[ ]]> внутри элемента turbo:content.

    ...
<turbo:content>
    <![CDATA[
        <script>
            VK.Share.button(
                {url: 'https://ya.ru', title: 'Заголовок', noparse: true, no_vk_links: 1},
                {type: 'button_nocount', text: 'Поделиться'})
        </script>
    ]]>
</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>
...
Написать в службу поддержки
Предыдущая
Facebook
Следующая
Одноклассники