Skip to content

Instantly share code, notes, and snippets.

@sergiks

sergiks/readme.md

Last active August 7, 2023 09:53
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save sergiks/83c8bd5d8790ce2a03fe6bc78580916e to your computer and use it in GitHub Desktop.
Save sergiks/83c8bd5d8790ce2a03fe6bc78580916e to your computer and use it in GitHub Desktop.
Download ZIP
VK Group Widget starter page
Raw
readme.md

Widgeteer

HTML + JavaScript для прототипирования виджета Сообщества в ВКонтакте.

ВНИМАНИЕ – код устарел

Теперь ВКонтакте изменили схему: требуется получать токен через VK Mini App, а не как раньше через xd_connection.

Пример получения токена для редактирования виджета сообщества ВКонтакте: https://github.com/Deserter-io/vk-group-widget/blob/gh-pages/index.html и его работающее демо мини-апп: https://vk.com/app7463429

0. Получение ключа доступа

Для работы с виджетами в сообществе необходимо получить токен сообщества с правом доступа app_widget при помощи события VK Connect: VKWebAppGetCommunityAuthToken в приложении с типом VK Mini Apps.

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

Документация ВК

  • Документация по созданию виджетов сообществ ВК.
  • Какие бывают типы виджетов см. на странице документации по объекту appWidget.

Вкратце

  1. создать приложение – Встраиваемое приложение – Приложение сообщества
  2. адресом iframe укажите ссылку на приложенный widgeteer.html на вашем сервере
  3. зайдите в ваше Сообщество – меню Управление сообществом – Приложения – выберите там ваше свежесозданное приложение
  4. дайте ему разрешение на добавление виджетов
  5. вставьте код вашего виджета и сделайте его предпросмотр – если в коде виджета нет ошибок, во всплывающем окошке покажут, как он выглядит и предложат установить его в сообщество.
Raw
widgeteer.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title>Widgeteer</title>
<meta name="description" content="Создание виджета для сообщества ВКонтакте">
<meta name="keywords" content="Sergei Sokolov,ВК,виджет,конструктор">
<meta name="robots" content="noindex,nofollow">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<h3>Виджет для сообщества ВК</h3>
<div id="b-alerts"></div>
<div class="form-group">
<button id="btn-permission" class="btn btn-primary" type="button">Дать разрешение</button>
</div>
<div class="form-group">
<label for="in-type">Тип виджета:</label>
<select class="form-control" id="in-type">
<option value="text">text</option>
<option value="list">list</option>
<option value="table">table</option>
<option value="tiles">tiles</option>
<option value="compact_list">compact_list</option>
<option value="cover_list">cover_list</option>
<option value="match">match</option>
<option value="matches">matches</option>
</select>
</div>
<div class="form-group">
<label for="in-code">Код виджета:</label>
<textarea rows="7" class="form-control" id="in-code">return {
"title": "Цитата",
"text": "Текст цитаты"
};</textarea>
</div>
<button id="btn-preview" class="btn btn-primary" type="button">Предпросмотр виджета</button>
</div><!-- /.container -->
<!-- Bootstrap JavaScript -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<!-- /Bootstrap JavaScript -->
<!-- main script -->
<script>
function callback(event, className, e){
console.log(event, e);
showAlert(className, event, e);
}
function setVkCallback( event, className) {
VK.addCallback(event, callback.bind(null, event, className));
}
function onReady() {
// Слушать события предпросмотра виджета
setVkCallback('onAppWidgetPreviewFail', 'warning');
setVkCallback('onAppWidgetPreviewCancel', 'info');
setVkCallback('onAppWidgetPreviewSuccess', 'success');
// События нажатия на кнопки
$('#btn-permission').on('click', function(){
console.log('showGroupSettings');
VK.callMethod("showGroupSettingsBox", 64);
});
$('#btn-preview').on('click', function(){
var type = $('#in-type').val()
, code = $('#in-code').val()
;
VK.callMethod("showAppWidgetPreviewBox", type, code);
});
}
function showAlert(className, header, text) {
var html = [
'<div class="alert alert-dismissible alert-'+className+'" role="alert">',
'<h4 class="alert-heading">' + header + '</h4>',
text,
'<button type="button" class="close" data-dismiss="alert" aria-label="Close">',
'<span aria-hidden="true">&times;</span>',
'</button>',
'</div>',
].join('\n');
$('#b-alerts').append(html);
}
</script>
<!-- /main script -->
<!-- VK scripts -->
<script src="https://vk.com/js/api/xd_connection.js?2" type="text/javascript"></script>
<script type="text/javascript">
VK.init(function() {
// API initialization succeeded
onReady();
}, function() {
// API initialization failed
// Can reload page here
console.error('VK init error', arguments);
}, '5.74');
</script>
<!-- /VK scripts -->
</body>
</html>
@sergiks
Copy link
Author

sergiks commented May 14, 2018

Для вопроса на Тостере: Как создать виджет сообщества VK?

@Globik
Copy link

Globik commented Nov 22, 2018

То бишь получается, что нужно отдельное приложение для сообщества вк создавать только лишь ради виджета некоего? Нельзя ли в одном приложении весь доступный функционал использовать?

@alekstar79
Copy link

А нет, свежего мануала по написанию виджета? Где рассматривались бы запросы к api!

@sergiks
Copy link
Author

sergiks commented Dec 17, 2019 •
edited

@alekstar79 пока нет. Лучше попробуйте готовые приложения сообществ — там сейчас есть, например, Виджет в сообществе, Конструктор виджетов, LiveWidget – просмотрите весь список внимательно.

@Screamiz
Copy link

Здравствуйте. Есть код хотя бы на получение токена? Очень помогло бы

@sergiks
Copy link
Author

sergiks commented May 12, 2020

@Screamiz в «Настройках» сообщества — «Работа с API» — «Ключи доступа»

@Screamiz
Copy link

Screamiz commented May 12, 2020 •
edited

@Screamiz в «Настройках» сообщества — «Работа с API» — «Ключи доступа»

Спасибо за ответ.

Но я про токен для виджета.
VKWebAppGetCommunityToken
https://vk.com/dev/vk_bridge_events_8

Абсолютно не могу разобраться

Нашёл приложение, которое позволяет его получить, но хотелось бы иметь своё

@sergiks
Copy link
Author

sergiks commented May 13, 2020

@Screamiz вот набросал пример с мини-аппом, берите за основу.
github

@Sereegkaa
Copy link

выдает ошибку
vk_api.exceptions.ApiError: [15] Access denied: app must be installed in group as community app
как установить приложение в группу?

@sergiks
Copy link
Author

sergiks commented Feb 5, 2021

@Sereegkaa установить – в группе – Управление - Приложения - найти этот апп. Или в самом аппе либо есть большая кнопка что-то типа «ДОбавить в сообщество», либо ниже под ним, справа – Действия – Добавить в сообщество.

@Sereegkaa
Copy link

@sergiks так это же самописный виджет, его нельзя установить из магазина виджетов

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment