В этой статье расскажем про шесть полезных виджетов для групп ВКонтакте, объясним, как их настроить, и покажем, что делать, если нужно создать виджет самому.
Что такое виджеты и зачем они нужны в группах ВКонтакте
Простыми словами виджеты — это отдельные блоки в сообществах, которые могут служить для разных целей:
- сбор заявок,
- создание базы для рассылок,
- получение отзывов,
- проведение розыгрышей,
- показ каталога товаров,
- продажи.
Ниже — несколько примеров виджетов из нашего сообщества ВКонтакте.
Благодаря виджетам оформление группы становится более приближенным к сайту, и для пользователей это удобно: проще разобраться, что и где найти. К тому же, с помощью виджетов можно персонализировать предложения для пользователей, добавив их имена в обращения — так сообщение привлечет больше внимания. Главное — чтобы в обращении сохранялся основной tone of voice бренда: общайтесь с подписчиками так же, как и в постах.
Как сделать виджет-меню ВКонтакте из кнопок
Отвечаем на популярный вопрос : виджеты для сообществ ВКонтакте — то же самое, что и приложения? И да, и нет. Виджеты устанавливаются с помощью внутренних приложений ВКонтакте. То есть приложения — это способ добавить дополнительные разделы в сообщество, а виджеты — это сами дополнительные блоки.
Максимально можно установить шесть виджетов в одном сообществе — таково ограничение по количеству установленных приложений в одной группе.
Полезные виджеты для групп ВКонтакте и как их настроить
Расскажем про шесть главных из них и объясним, как добавить и настроить виджеты в сообществе ВКонтакте:
- « Магазин товаров »
- « Сообщения сообщества »
- « Заявки »
- « Афиша »
- « Меню группы »
- « Рассылки »
Сразу ответим на вопрос, где искать бесплатные виджеты: на специальной странице приложений ВКонтакте для сообществ. За сами виджеты не нужно платить, они доступны всем. Но в некоторых из них есть платные функции.
Виджет «Магазин товаров»
Это такая онлайн-витрина вашего магазина. Виджет есть в базовых настройках группы — дополнительная установка приложения не нужна. Достаточно просто подключить «Магазин товаров» в настройках:
- Выбрать поле «Разделы».
- Перейти в блок «Товары».
- Выбрать режим работы — базовый или расширенный:
в базовом режиме доступны витрина и карточки товаров;
в расширенном — витрина, карточки товаров, корзина и заказы. - Нажать «Сохранить».
После этого в сообществе появится виджет «Магазин товаров», куда вы сможете загрузить всю информацию о ваших продуктах.
Виджет «Сообщения сообщества»
Он поможет проще и быстрее отвечать на сообщения пользователей. Окошко для общения будет показываться в правом нижнем углу группы.
Чтобы создать такой виджет, нужно:
- Зайти в настройки сообщества в раздел «Сообщения».
- Поставить галочку в поле «Разрешить использование виджета».
Источник: dzen.ru
Как сделать меню из трех кнопок ВКонтакте | Виджет меню обложки | Оформление группы ВКонтакте
Блог immedia — Главные новости Digital и SMM
Относительно недавно появилась возможность создавать навигацию по разделам меню с основной страницы группы. Ранее такая возможность была при создании WIKI-меню. У этого главным минусом было то, что для просмотра меню нужно было нажать на баннер или кнопку:
Меню нужно было верстать в Photoshop, ссылки могли вести как на разделы группы, так и на сторонние ресурсы.
Графическое меню страницы vk.com/loveandtech
С появлением конструктора виджетов появилась возможность сделать меню открытым, без использования вики-разметки (на примере сообщества vk.com/loveandtech, представляем пошаговую инструкцию создания навигации разделам группы и по хэштегам ВК, используя конструктор вижетов. Для этого нам нужно:
1. Подключить конструктор виджетов https://vk.com/widgets_constructor в группу ВК
Раздел «Приложения» в настройках сообщества
2. Разрешить доступ к разделам сообщества в настройках приложения и следовать дальнейшим инструкциям:
Настройки «Конструктора виджетов»
3. Создать первый виджет:
Настройки «Конструктора виджетов»
4. Выбрать тип «Компактный список»:
Настройки «Конструктора виджетов»
5. Переходим в рабочую область приложения и начинаем настройку виджета:
Настройки «Конструктора виджетов»
— Задаем заголовок виджета, заголовок пункта меню, добавляем иллюстрацию (150*150 px.);
— Называем кнопку, назначаем ссылку;
— Добавляем нижнюю ссылку виджета;
— При необходимости создаем еще один пункт меню и задаем заголовок, иллюстрацию, назначаем ссылку.
6. В конечном итоге, рабочая область может выглядеть вот так:
Настройки «Конструктора виджетов»
Вместо хештегов могут быть ссылки на разделы группы: видео записи, ссылки на личные профили и так далее. Единственное ограничение — все ссылки должны быть в рамках социальной сети vk.com.
Вот так может выглядеть финальный вариант:
Не забываем в настройках сделать виджет доступным для всех пользователей (по умолчанию, он доступен только администраторам):
Источник: improvemedia.blogspot.com
Как создать виджет сообщества в vk?
Подскажите пожалуйста, как создавать виджет для сообщества со своей логикой, который будет отображаться на главной странице сообщества. Как на картинке ниже:
Я прошерстил уже всю документацию в вк по этой теме. научился создавать обычные приложения для сообщества, iframe вывод этих приложений. Искал инфу в инете, но там ничего толком нет. В основном видосики и статьи о том, как взять приложение наподобие «Конструктор виджетов» и добавить его в сообщество.
Но все это не соответствует тому что мне нужно. Дело в том, что я хотел бы чтобы этот виджет брал данных с бд моего сайта и при помощи нехитрых манипуляций выводил его в том виде, в котором я хочу.
Не могли бы вы подсказать как пошагово это можно сделать и вывести хотя бы «hello world» виждет?
- Вопрос задан более трёх лет назад
- 7796 просмотров
2 комментария
Простой 2 комментария
jasonOk, Я эту документацию вдоль и поперек уже прочитал. Но я не могу понять, где же мне нужно вызвать вот этот метод:
VK.callMethod(‘showAppWidgetPreviewBox’, ‘text’, ‘return < «title»: «Цитата», «text»: «Текст цитаты» >;’);
для того, чтобы я смог сгенерировать виджет.
Решения вопроса 1
Fullstack разработчик
Итак, задачу все же удалось решить. Опишу способ решения этой задачи для тех, кто подписался и для тех, кто столкнется с аналогичной задачей.
Предварительные условия:
Необходимо создать iframe приложение и добавить его в сообщество. Насколько я понял — это необходимо только для создания ключа ( чтобы можно было управлять виджетом на стороне сервера ) и первоначального добавления виджета на страницу.
Iframe приложение должно «смотреть» на страницу где будет вот такой вот код:
index.html:
Document Создать ключ доступа к виждету сообщества
Добавить виждет в сообщество
// инициализация вк 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 ;’); // типы событий, генерируемых после выполнения запроса на установку виджета можно глянуть тут https://vk.com/dev/apps_widgets // работа с событиями вк https://vk.com/dev/Javascript_SDK?f=4.1.+VK.addCallback VK.addCallback(‘onAppWidgetPreviewSuccess’, function f(data)< alert(«Виджет успешно добавлен»); >); >); >);
После создания данных страниц у вас появится возмжность создать ключ (который будет доступен из управления сообществом) и создание простого виджета
Серверную часть я полностью описывать не буду и покажу только само тело запроса, главное запросить данные через culr по ссылке https://api.vk.com/method/ (Вот гайд)
$api = new AppApiMainVk([‘access_token’ => ‘ключ_корый_мы_сгенерировали_первой_кнопкой’]); $api->request( ‘appWidgets.update’, [ ‘type’ => ‘list’, ‘code’ => ‘ var users = API.users.get(); 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» >] >;’ ] );
Подробности о теле запроса можно узнать тут
А как его правильно писать — тут
Вышенаписанный php код можно добавить в крон, автоматизировать и наслаждаться жизнью. И на последок — вот пример рабочего кода в сообществе (сорян за стили, и некоторые замазанные части, мне лень было делать нормальный скрин):
Источник: qna.habr.com