Adding VK content to the Turbo page
- 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.
- 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 More about debugging.
page in Yandex.Webmaster.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:
- 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>
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:
- In VK, create a survey.
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.
- 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>
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. |
- Generate the embed code. Examples:
<script type="text/javascript"> VK.Widgets.ContactUs("vk_contact_us", {text: "Contact us", height: 22}, -20003922); </script>
- 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> ...
Subscribe to the author
- 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>
- 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
- 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>
- 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
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>
- 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
- In VK, create a widget.
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>
- 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>
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> ...
Recommendation widget
- In VK, create a widget.
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 Like block --> <div id="vk_recommended"/> <script type="text/javascript"> VK.Widgets.Recommended("vk_recommended", {limit: 3, period: 'day'}); </script>
- 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.Recommended("vk_recommended", {limit: 3, period: 'day'}); </script>
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.Recommended("vk_recommended", {limit: 3, period: 'day'}); </script> ]]> </turbo:content> ...
Comments widget
- In VK, create a widget.
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>
- 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>
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
*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>
...