Adding content from the VK social network to the Turbo page

  1. Go to the Vkontakte site and create an app. At creation:
    • Choose the Web site platform type.
    • In the Home domain field, specify yastatic.net.
  2. Select the widget you want to add to the Turbo page from the list below and follow the instructions.

After adding the embed code to the RSS feed, check how the content is displayed on the Turbo page. You can do this in Yandex.Webmaster, on the Turbo pages → Debug page. More about debugging.

To embed widgets on a Turbo page, use the JavaSrcipt code.

  • Wall post. Allows you to add a user or community post or comment in VK to the Turbo page.
  • Survey. The widget allows the users to take part in surveys on your site's Turbo page.
  • Contact us. Lets the user contact the community owner.
  • Publishing links. Users can share a link.
  • Subscribe to the author. The Turbo page users can subscribe to a user or a group you specified in one click.
  • Allow writing to the community. Allows users to quickly subscribe to notifications in the community's private messages.
  • Communities. The widget shows the news from the community or photos of the participants.
  • I like it. Allows the users to evaluate the content of your Turbo page.
  • Recommendations. Allows users to find the most popular content on your site. Uses the data of the “Like” widget.
  • Comments. Helps users comment on the content of your pages.
  • Video. Lets you add videos posted in VK to the text.

The “Wall post” widget

You can use the following parameters in code:

Parameter Type Description
owner_id * Integer Numeric ID of the owner of the wall where the post is published.
post_id * Integer Numeric ID of the wall post on the wall or the comment
hash * String Service parameter. You can get its value in the widget constructor or in the “Share” window for the chosen post.
options Object Widget options
width Integer The block width in pixels. By default, the post block is stretched to the page width

* Required parameter.

To add the widget to the Turbo page, follow these steps:

  1. In VK, generate the widget embed code and add supported parameters to it. To embed the widget on the Turbo page, you need the widget code:
    <script type="text/javascript">
        VK.Widgets.Post("vk_post_1_45616", -11283947, 104942, 'DbGToYsmsvszY9IBlPFwaXOqEAuv', {width: 300});
    </script>
  2. Add code to the <![CDATA[]]> tag inside the turbo:content element.

    ...
    <turbo:content>
        <![CDATA[
            <script type="text/javascript">
                VK.Widgets.Post("vk_post_1_45616", -11283947, 104942, 'DbGToYsmsvszY9IBlPFwaXOqEAuv', {width: 300});
            </script>
        ]]>
    </turbo:content>
    ...

The survey widget

You can use the following parameters and elements:

Parameter Type Description
api_id * Integer Numeric ID of your VK application
poll_id * String The survey ID. To get it, use the widget constructor or the Get the code button in the existing survey.
options Object Widget options
width Integer The block width in pixels. By default, the post block is stretched to the page width

* Required parameter.

To add the widget to the Turbo page, follow these steps:

  1. On the survey creation page, click Get the code and copy the code from the Embed code field. For example:

    <!-- 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: <your VK application ID>, 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}, '<the survey ID>');
    </script>

    You need the VK app ID and the survey ID to generate the embed code.

  2. Generate the embed code:
    <script type="text/javascript">
        VK.init({apiId: <your VK app ID>});
        VK.Widgets.Poll('vk_poll', {width: 300}, '<the survey ID>');
    </script>
  3. Add code to the <![CDATA[]]> tag inside the turbo:content element.

    ...<turbo:content>    <![CDATA[
            <script type="text/javascript">
                VK.init({apiId: <Your VKontakte app ID>});
                VK.Widgets.Poll('vk_poll', {width: 300}, '<the survey ID>');
            </script>
        ]]>
    </turbo:content>
    ...

The“Contact us” widget

Use the following parameters in the code to embed the widget:

Parameter Type Description
owner_id * Integer The ID of the user or community for which you are creating the widget. The community ID must have the “minus” sign.
text String The text label on the button, 140 characters maximum. The default text is Contact us
height Integer Button height in pixels. Possible values: 18, 20, 22, 24, 30. The default value is 24.
  1. Generate the embed code. For example:
    <script type="text/javascript">
        VK.Widgets.ContactUs("vk_contact_us", {text: "Ask a question", height: 22}, -20003922);
    </script>
  2. Add code to the <![CDATA[]]> tag inside the turbo:content element.
    ...<turbo:content>    <![CDATA[
            <script type="text/javascript">
                VK.Widgets.ContactUs("vk_contact_us", {text: "Ask a question", height: 22}, -20003922);
            </script>
        ]]>
    </turbo:content>
    ...

Publishing links

Turbo pages support using HTML and JavaScript code for connecting widgets to Turbo pages.

  1. Use the a element with a link to the source page for which the Turbo page is generated.
    <a href="https://vk.com/share.php?url=http://example.com/page/">Share in VK</a>
  2. Add code to the <![CDATA[]]> tag inside the turbo:content element.
    ...<turbo:content>    <![CDATA[
            <a href="https://vk.com/share.php?url=http://example.com/page/">Share in VK</a>
        ]]>
    </turbo:content>
    ...

Subscribe to the author

  1. In VK, generate the embed code. To embed the widget on the Turbo page, you need the widget code:
    <script type="text/javascript">
        VK.Widgets.Subscribe('vk_subscribe', {mode: 1, soft: 1}, -11283947);
    </script>
  2. Add code to the <![CDATA[]]> tag inside the turbo:content element.
    ...
    <turbo:content>
        <![CDATA[
            <script type="text/javascript">
                VK.Widgets.Subscribe('vk_subscribe', {mode: 1, soft: 1}, -11283947);
            </script>
        ]]>
    </turbo:content>
    ...

Allow writing to the community

  1. In VK, generate the embed code. To embed the widget on the Turbo page, you need the widget code:
    <script type="text/javascript">
        VK.Widgets.AllowMessagesFromCommunity("vk_send_message", {height: 30}, 1);
    </script>
    Note. Turbo pages don't support tracking special events with VK.Observer.
  2. Add code to the <![CDATA[]]> tag inside the turbo:content element.
    ...
    <turbo:content>
        <![CDATA[
            <script type="text/javascript">
                VK.Widgets.AllowMessagesFromCommunity("vk_send_message", {height: 30}, 1);
            </script>
        ]]>
    </turbo:content>
    ...

Community widget

  1. In VK, generate the embed code and add supported parameters to it. To embed the widget on the Turbo page, you need the widget code:

    <script type="text/javascript">
        VK.Widgets.Group("vk_groups", { no_cover: 1, wide: 1, mode: 3, width: "300", height: "450"}, 11283947);
    </script>
    Note. Turbo pages don't support tracking special events with VK.Observer.
  2. Add code to the <![CDATA[]]> tag inside the turbo:content element.
    ...
    <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>
    ...

The “Like” widget

  1. On the widget creation page, copy the code from the Embed code field. For example:

    <!-- 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: <your VK application ID>, onlyWidgets: true});
    </script>
    
    <!-- Put this div tag to the place, where the Like block will be -->
    VK.Widgets.Like(        'vk_like',        {            pageUrl: 'https://ya.ru',            pageTitle: 'Yandex',            type: 'mini',            verb: 1        },        321);
  2. Create an embed fragment from the copied code to place the widget on the Turbo page and addsupported parameters to it:
    <script type="text/javascript">
        VK.init({apiId: <Your VKontakte app ID>, onlyWidgets: true});
        VK.Widgets.Like(
            'vk_like',
            {
                pageUrl: 'https://ya.ru',
                pageTitle: 'Yandex',
                type: 'mini',
                verb: 1
            },
            321);
    </script>
    Note. Turbo pages don't support tracking special events with VK.Observer.
  3. Add code to the <![CDATA[]]> tag inside the turbo:content element.

    ...<turbo:content>    <![CDATA[
            <script type="text/javascript">
                VK.init({apiId: <your VK app ID>, onlyWidgets: true});
                VK.Widgets.Like(
                    'vk_like',
                    {
                        pageUrl: 'https://ya.ru',
                        pageTitle: 'Yandex',
                        type: 'mini',
                        verb: 1
                    },
                    321);
            </script>
        ]]>
    </turbo:content>
    ...

Comments widget

  1. On the widget creation page, copy the code from the Embed code field. For example:

    <!-- 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: <your VK application ID>, onlyWidgets: true});
    </script>
    
    <!-- Put this div tag to the place, where the Comments block will be -->
    VK.Widgets.Comments('vk_comments',        {attach: 'audio', autoPublish: 1, norealtime: 1, limit: 15, pageUrl: 'https://ya.ru'}, 1);
  2. Create an embed fragment from the copied code to place the widget on the Turbo page and addsupported parameters to it:
    <script type="text/javascript">
        VK.init({apiId: <your VK app ID>, onlyWidgets: true});
        VK.Widgets.Comments('vk_comments',
            {attach: 'audio', autoPublish: 1, norealtime: 1, limit: 15, pageUrl: 'https://ya.ru'}, 1);
    </script>
    Note. Turbo pages don't support tracking special events with VK.Observer.
  3. Add code to the <![CDATA[]]> tag inside the turbo:content element.

    ...<turbo:content>    <![CDATA[
            <script type="text/javascript">
                VK.init({apiId: <your VK app ID>, onlyWidgets: true});
                VK.Widgets.Comments('vk_comments',
                    {attach: 'audio', autoPublish: 1, norealtime: 1, limit: 15, pageUrl: 'https://ya.ru'}, 1);
            </script>
        ]]>
    </turbo:content>
    ...

Video

To embed video clips in a Turbo page, use the iframe element. The element can contain the following attributes:
  • oid * — OID video.
  • id * — The ID of the video.
  • hash * — The hash of the video.
  • hd — The video resolution (a number from 0 to 3 inclusive).
  • width — Width.

*Required attribute.

Add the embed code to the <![CDATA[]]> tag inside the turbo:content element.

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