The translation was generated automatically and may contain mistakes

Recommendations

The recommendation widget creates a dynamic block on your site with the most popular materials. By placing such a block on the main page, you will make it easier for your readers to find interesting articles.

The popularity of the materials is determined using the widget Like it. which needs to be set before using the recommendation widget.

Connecting Widget

To add a community VKontakte widget to your site, follow these steps:

Step 1. In the tag <head> On your website, add a link.. openapi.js :

HTML
<script src="https://vk.ru/js/api/openapi.js?169" type="text/javascript"></script>

Step 2. Add code to the body of the site page to initialize the Open API:

HTML
<script type="text/javascript"> VK.init({ apiId: ?1?’АШ_API_ID, onlyWidgets: true }); </script>

You can find out more about transport initialization at this page .

Add an element to the body of the page <div> , which will display comments, give it a unique id, and add a widget initialization code to it. For example:

HTML
<div id="vk_recommend"></div> <script type="text/javascript"> VK.Widgets.Recommended('vk_recommend'); </script>

This code adds a block of recommendations of the standard kind. The width of the block will be selected automatically based on the position of the element vk_recommend .

If your site is already in use Open API , adding a widget is even easier. Simply add widget initialization.

Additional settings

Method VK.Widgets.Recommended It takes two parameters:

  • •
    elementid ( string ), the mandatory parameter is the id of the element that will be the container for the recommendation block.
  • •
    options ( object ) — block options with widget. An object that can contain fields:
    • •
      limit ( integer ) — the maximum number of pages displayed initially. Default value: 5 .
    • •
      max ( integer ) — the maximum number of pages displayed after clicking on the button “Show all recommendations?2?. If max ⩽ limit , the “Show all recommendations” button will not be displayed. Default value: 4 ?1?— limit .
    • •
      period ( string The length of the reporting period for statistics. Possible values: day records for the last 24 hours, week - 7 days, month - 30 days. Default value: week .
  • •
    verb ( integer , [ 0,1 ]) — a variant of the wording of the text within the block. Possible values: 1 “Interesting,” 0 “I like it.” Default value: 0 .
  • •
    sort ( string ) — a method of sorting materials. Possible values:
    • •
      friend_likes — the number of friends who left the mark “Like?2?;
    • •
      likes The total number of marks.
      Default value: friend_likes .
  • •
    target ( string ) — sets a parameter target Links to website pages. Possible values:
    • •
      blank Open on a new page;
    • •
      top Open in the full browser window;
    • •
      parent Open in a frame that contains a widget.
      Default value: parent .

Example of use

HTML
<div id="vk_recommend"></div> <script type="text/javascript"> window.onload = function () { VK.init({apiId: 111, onlyWidgets: true}); VK.Widgets.Recommended('vk_recommend', {limit: 4, max: 10, period: 'month', verb: 1}); } </script>

Widget code

To add a widget to your site, simply copy the code to paste to the page you want to place the widget on.

Number of posts
Selection period
Text
Code for embedding widget on website
HTML
<!-- Put this script tag to the <head> of your page --> <script type="text/javascript" src="https://vk.ru/js/api/openapi.js?168" charset="windows-1251" ></script> <script type="text/javascript"> VK.init({ apiId: 7794785, onlyWidgets: true }); </script> <!-- Put this script tag to the place, where the Recommended block will be --> <div id="vk_recommended"></div> <script type="text/javascript"> VK.Widgets.Recommended("vk_recommended", {limit: 5}); </script>