Adding VK content to the Turbo page

  1. Go to the VK site and create an app. When creating it, do the following:
    • 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 on the Turbo pages for content sites → Debugging page in Yandex.Webmaster. 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 Block width in pixels. By default, the post block is stretched to the page width
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 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:

  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 the embed 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 Block width in pixels. By default, the post block is stretched to the page width
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 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:

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

    <!-- 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 app ID>, onlyWidgets: true});
    </script>
    
    <!-- Put this div tag in the place reserved for the Poll block -->
    <div id="vk_poll"></div>
    <script type="text/javascript">
    VK.Widgets.Poll('vk_poll', {width: 300}, '<poll 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}, '<poll ID>');
    </script>
  3. Add the embed code to the <![CDATA[]]> tag inside the turbo:content element.

    ...
    <turbo:content>
        <![CDATA[
            <script type="text/javascript">
                VK.init({apiId: <your VK app ID>});
                VK.Widgets.Poll('vk_poll', {width: 300}, '<poll 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.
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. Examples:
    <script type="text/javascript">
        VK.Widgets.ContactUs("vk_contact_us", {text: "Contact us", height: 22}, -20003922);
    </script>
  2. Add the embed code to the <![CDATA[]]> tag inside the turbo:content element.
    ...
    <turbo:content>
        <![CDATA[
            <script type="text/javascript">
                VK.Widgets.ContactUs("vk_contact_us", {text: "Contact us", 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 the embed 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 VKontakte</a>
        ]]>
    </turbo:content>
    ...
Note.

When setting up the widget, configure links to open in a new tab (target="_blank"), otherwise there is a risk that the user won't be able to open the link.

Example of the problem in Chromium

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 the embed 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 the embed 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 the embed 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. Examples:

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

    <!-- 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 app ID>, onlyWidgets: true});
    </script>
    
    <!-- Put this div tag in the place reserved for the Comments block -->
    <div id="vk_comments"/>
    <script type="text/javascript">
        VK.Widgets.Comments('vk_comments',
            {attach: 'audio', autoPublish: 1, norealtime: 1, limit: 15, pageUrl: 'https://ya.ru'}, 1);
    </script>
  2. Create an embed fragment from the copied code to place the widget on the Turbo page and add supported 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 the embed 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

You can embed videos on a Turbo page using the iframe element. The element can contain the following attributes:
  • oid* — OID of the video.
  • id* — 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>
...