October 18, 2019

Как подключить виджет, который будет показывать собранную сумму на DonationAlerts.

1.Подключение приложения

Первым делом нам нужно подключить приложение, которое будет отвечать за обновление виджета. Для того, чтобы подключить приложение, достаточно перейти по ссылке 

vk.com/add_community_app?aid=6242731

, выбрать нужное сообщество и подтвердить добавление.

Дальше следует зайти в настройки и скрыть приложение для посторонних глаз, так как само оно не несет никакой функциональности, а нужно лишь для настройки виджета и дальнейшего его обновления.

После того, как вы скрыли приложение от посторонних глаз, нужно его открыть со страницы вашего сообщества. Это очень важно, так как само по себе оно не будет работать без привязки сообществу.

Дальше просто жмем две клавиши подряд.

  • Set default widget — отвечает за установку первоначального виджета, который будет обновляться в дальнейшем. Без него приложение не будет обновлять.
  • Get group permission — создает ключ доступа к API, который нужен для обновления виджета.

На этом этапе установка приложения в сообщество закончена, осталось лишь перейти в настройки приложения и забрать ваш API ключ, который потребуется для скрипта.

2.Настройка виджета

Первым делом нам нужно создать виджет на DonationAlerts. Переходим на страницу со сборами (

donationalerts.ru/dashboard/donation-goal

), где создаем новую цель сбора. Вписываем любое название (оно не влияет на отображение), сумму, которую нужно собрать, начальную сумму и сохраняем.

На этом виджет создан. От виджета вам понадобится ссылка, которую мы вставим в скрипт, чтобы он мог узнавать актуальные данные по сборам.

2.Настройка сервера

Для сервера был написал небольшой php-скрипт, который ответственный за обновление виджета в сообществе.

<?php$group_token = 'YOUR_TOKEN';$link = 'http://widget.link';$donate_title = 'Текст в шапке';$donate_text = 'Название сбора';$donate_link = 'https://vk.com/vikeyzen'; ////////////////////////////////////////$donate_content = curl($link);preg_match('/\\"goal_amount\\\\":\\\\"([0-9\.]+)\\\\"/', $donate_content, $goal_amount);preg_match('/\\"raised_amount\\\\":\\\\"([0-9\.]+)\\\\"/', $donate_content, $raised_amount);$code = 'return '.json_encode(array('title' => $donate_title,'text' => $donate_text,'button_url' => $donate_link,'currency' => 'RUB','goal' => intval($goal_amount[1]),'funded' => intval($raised_amount[1])), JSON_UNESCAPED_UNICODE).';';$api_url = 'https://api.vk.com/method/appWidgets.update';$api_parameters = array('type' => 'donation','code' => $code,'access_token' => $group_token,'v' => 5.78);echo curl($api_url, $api_parameters);function curl($link, $post = null) {$ch = curl_init();curl_setopt($ch, CURLOPT_URL, $link);curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);if ($post) {curl_setopt($ch, CURLOPT_POST, 1);curl_setopt($ch, CURLOPT_POSTFIELDS, $post);}$response = curl_exec($ch);curl_close($ch);return $response;}

Перед установкой нужно настроить скрипт. Все поля, которые нужно заменить, вынесены вверх скрипта для удобной настройки. Все они обязательны, без них виджет работать не будет.

  • $group_token — ключ для работы с API, который мы получили ранее.
  • $link — ссылка на виджет, которую мы получили ранее.
  • $donate_title — название, отображающееся вверху виджета (до 100 символов).
  • $donate_text — название цели сбора (до 80 символов).
  • $donate_link — ссылка кнопки виджета. Важно отметить, что ссылка может быть только в пределах vk.com, поэтому заранее придумайте, что там разместить.

Если вы все сделали правильно, то при открытии скрипта API ВКонтакте вернет вам единицу

Если ответ иначе, значит сделано что-то не так.

Автоматическое обновление виджета

1.Найти хостинг

2.Залить скрипт

3.Поставить скрипт на крон к примеру раз в 20 минут.

/usr/bin/wget pavel.im/widget_cron.php