How to create a community widget in vk?

M

Maxim Melnik2018-03-03 16:36:46

In contact with

Maxim Melnik, 2018-03-03 16:36:46

Good day!
Please tell me how to create a widget for the community with its own logic, which will be displayed on the main page of the community. As in the picture below:

I have already gone through all the documentation in VK on this topic. learned to create common applications for the community, iframe output of these applications. I searched for info on the Internet, but there really is nothing there. Mostly videos and articles on how to take an app like Widget Maker and add it to the community.
But all this does not correspond to what I need. The fact is that I would like this widget to take data from the database of my site and, with the help of simple manipulations, display it in the form in which I want.
Could you tell me how to do this step by step and display at least "hello world"

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

M

Maxim Melnik, 2018-03-06
@Gesparo

So, the problem was nevertheless solved. I will describe a way to solve this problem for those who subscribed and for those who will face a similar task.
need to create an iframe application and add it to the community. As far as I understand, this is only necessary to create a key (so that you can manage the widget on the server side) and initially add the widget to the page.
The iframe application should "look" at the page where the code will be like this:
index.html:

<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <!-- Подключаем jquery -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" defer></script>
    <!-- Подключаем VK -->
    <script src="https://vk.com/js/api/xd_connection.js?2"  type="text/javascript" defer></script>	
  
    <!-- Подключаем скрипт регулировки высоты -->
    <script src="/vk_height.js" defer></script>
  
</head>
<body style='text-align:center;padding-top:50px;' id='body'>
  <a href="javascript:void(0)" id="set-permission">Создать ключ доступа к виждету сообщества</a>
  <br>
  <br>
  <a href="javascript:void(0)" id="set-widget">Добавить виждет в сообщество</a>
</body>
</html>

vk_height.js:

// инициализация вк
VK.init(, function() { 
     console.log('Init successful');
  }, function() { 
     console.log('Error init');
}, '5.73'); 

// функция дня изменения размера окна в зависимости от содержимого страницы
function autosize(width) {
    //Проверяем элемент body на наличие.
    if (!document.getElementById('body')) {
        alert('error');
        return;
    }
    // Успешно ли подключен ВК скрипт
    if (typeof VK.callMethod != 'undefined') {
        /*
        Вызываем функцию vk js api для управления окном.
        VK.callMethod('функция', параметры)
        В данном случае у нас - VK.callMethod('изменение_размеров_окна', ширина, высота);
        Так же добавляем еще 60 пикселей что бы было небольшое расстояние.
        */
        VK.callMethod('resizeWindow', 840, document.getElementById('body').clientHeight + 60);
    } else {
        alert('error #2');
    }
}

$(document).ready( function(){
    //Вызываем функцию регулировки высоты каждые пол секунды.
    setInterval('autosize(607)', 500); 
  
  $('#set-permission').on('click', function(e) {
    e.preventDefault();
    
    // запрос прав доступа для дальнейшего обновления данных посредством крона
    // после запрса создается ключ, который можно посмотреть на странице управления сообществом
    // его и нунжно будет применить для обновления данных в виджете через сервер
    // дока прав тут https://vk.com/dev/permissions
    // дока метода тут https://vk.com/dev/clientapi?f=3.+showGroupSettingsBox
    VK.callMethod("showGroupSettingsBox", 64);
  });
  
  $('#set-widget').on('click', function(e) {
    e.preventDefault();
    
    // запрос установки виджета
    // типы виджетов можно глянуть тут https://vk.com/dev/objects/appWidget
    // как подключить виджет можно глянуть тут https://vk.com/dev/apps_widgets
    VK.callMethod('showAppWidgetPreviewBox', 'text', 'return {' + 
      '"title": "Цитата",' + 
      '"text": "Текст цитаты"' + 
    '};');
    
    // типы событий, генерируемых после выполнения запроса на установку виджета можно глянуть тут https://vk.com/dev/apps_widgets
    // работа с событиями вк https://vk.com/dev/Javascript_SDK?f=4.1.+VK.addCallback
    VK.addCallback('onAppWidgetPreviewSuccess', function f(data){ 
      alert("Виджет успешно добавлен"); 
    });
  });	
  
});

After creating these pages, you will be able to create a key (which will be available from the community management) and create a simple widget
. I will not fully describe the server part and show only the request body itself, the main thing is to request data via culr using the link https://api.vk .com/method/ ( Here is the guide )
The request itself:

$api = new \App\Api\Main\Vk(['access_token' => 'ключ_корый_мы_сгенерировали_первой_кнопкой']);
    $api->request(
        'appWidgets.update',
        [
            'type' => 'list',
            'code' => '
                var users = API.users.get({"user_ids": [11111, 22222, 33333]});
                
                return { 
                  "title": "Конкурс за призы", 
                  "rows": [
                              { 
                                  "title": users[0].first_name + " " + users[0].last_name, 
                                  "icon_id": "id11111",
                                  "descr" : "1 место - 2000 баллов",
                                  "button" : "Результаты конкурса",
                                  "button_url" : "https://vk.com/link"
                              },
                              { 
                                  "title": users[1].first_name + " " + users[1].last_name, 
                                  "icon_id": "id2222",
                                  "descr" : "2 место - 1890 баллов",
                                  "button" : "Правила и призы",
                                  "button_url" : "https://vk.com/link"
                              },
                              { 
                                  "title": users[2].first_name + " " + users[2].last_name, 
                                  "icon_id": "id22222",
                                  "descr" : "3 место - 1890 баллов",
                                  "button" : "Хочу на марафон",
                                  "button_url" : "https://vk.com/link"
                              }
                         ]
            };'
        ]
    );

Details about the request body can be found here
. And how to write it correctly - here
The above php code can be added to cron, automated and enjoy life. And finally - here is an example of a working code in the community (sorry for the styles, and some smeared parts, I was too lazy to make a normal screen):