Как настроить виджеты вконтакте

Виджет представляет собой отрисованный в соответствии с формальным описанием блок с информацией: например, список ресторанов или кинотеатров, результаты футбольного матча или киберспортивного поединка, перечень цен на услуги или объекты недвижимости. Блок с виджетом будет находиться в верхней части сообщества и доступен как в полной версии сайта, так и в мобильных клиентах.

Установка виджетов доступна из приложений, которые поддержали у себя эту возможность. Например: «Рассылки», «Тесты», «Пожертвования», «Заявки», «Анкеты», «Магазин товаров» и «Цитаты» (Все они доступны в официальном каталоге приложений: https://vk.com/community_apps).

Виджет Cover List

В виджете можно отображать список матчей, таблицу, цитату и многое другое. Все доступные типы виджетов подробно описаны на этой странице.

Для генерации виджета и его обновления используйте метод API appWidgets.update. В качестве аргументов он принимает:

type (string) — тип виджета. Может принимать значения text, list, table, tiles, compact_list, cover_list, match, matches, donation.
code (string) — код виджета. Аналог параметра code в методе execute.

Синтаксис вызова методов API можно найти здесь.

Структура объекта widget зависит от типа виджета, подробное описание Вы найдёте на этой странице.

Обновлять данные виджета через приложение можно не чаще 1 раза в 30 секунд.

Чтобы скрыть виджет у пользователя, передайте в code значение «return false;».

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

Для загрузки изображений нужно использовать соответственно методы API appWidgets.getGroupImageUploadServer, appWidgets.getAppImageUploadServer, appWidgets.saveGroupImage, appWidgets.saveAppImage. Необходимо загружать изображения в утроенном размере (например, для картинки с конечным размером 160×160 нужно загружать изображение размером 480×480).

Обратите внимание — Вы можете использовать главные фотографии профилей, сообществ и других приложений внутри виджета. Для этого передайте в поле icon_id для квадратного изображения значение id123456 — для главной фотографии профиля пользователя с id 123456, club123456 — для сообщества или app123456 — для приложения. В этом случае во всех аналогичных полях виджета также должны использоваться главные фотографии (соответственно, пользователей, сообществ или приложений).

Источник

Что такое виджеты ВК

Телеграм-канал Программист и бизнес.
Каждый день интересные истории, как программист строит бизнес.

Соцсетью «ВКонтакте» пользуются миллионы людей, особенно это касается русскоязычного населения стран СНГ. Здесь ежедневно появляется множество различных групп разнообразной тематики. Независимо, крупное это или мелкое сообщество, большинство из них используют виджеты ВК. Без них сегодня не обойтись, особенно если паблик коммерческой направленности, реализующий товары и услуги. Сегодня мы расскажем, как создавать, настраивать, добавлять, удалять программы. Также вы узнаете об их видах.

Что такое виджет в ВК

Многих интересует вопрос, что такое Виджет? Его можно назвать небольшим приложением, выполняющим полезную функцию. Они бывают разными. К примеру, могут показывать погодные условия на экране телефона либо часы на ПК. Такие утилиты в «ВК» связывают ваш ресурс с определенной группой либо страничкой «ВКонтакте». Благодаря им, пользователи могут подписываться на новости группы, не уходя со страницы, узнавать об акциях, получать личное обращение.

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

Зачем нужен виджет

Главной задачей, выполняемой небольшой программой, является связь сайта и группы «ВК». Неважно, какой направленности ресурс и сообщество, им необходима синхронизация. Вам не нужно разбираться в программировании, достаточно следовать простой инструкции для установки программы. Приложения обеспечивают двустороннюю связь между сайтом и группой. Например, пользователь, кликнув по кнопке «Мне нравится», поставит отметку со своего профиля на ресурсе. Утилита помогает выделить паблик, страницу из множества конкурентов и привлечь посетителей.

Создание виджета

Для создания программы «ВК» требуется открыть собственную страничку в соцсети. Далее нужно внизу в левой части экрана под объявлениями кликнуть по клавише «Разработчикам». Вам откроется страница разработки программ. Нажмите клавишу «Подключения сайтов, а также виджетов». Теперь выберите пункт «Виджеты для сайтов» и нажмите на клавишу «Сообщества». Далее нужно произвести специальные настройки.

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

Теперь вашему взору предстанут пять блоков различной направленности, как на скриншоте. Разберем их подробно, согласно нумерации:

№1. В первой графе вам необходимо указать адрес собственной группы.

№2. Здесь вы можете выбрать одну из интересующих вас опций:

«Участники» – приложение будет показывать аватары всех, кто участвует в группе.
«Новости» – показывается последний новостной контент сообщества.
«Только название» – на ресурсе будет показано лишь название паблика.

№3. Здесь настраивается размер приложения – ширина и высота.

№4. В этом блоке меняется цвет фона, клавиш и текста.

№5. Здесь расположен код для вставки на ресурс.

Изменяйте настройки на свое усмотрение, здесь все зависит от вас. Потом их нужно сохранить.

Добавление виджета

Для добавления небольшой программы на сайт на «Вордпрессе», нужно войти в админпанель сайта и кликнуть по «Внешнему виду». Теперь нажмите «Виджеты». Переместите блок «Текст» в сайдбар. Можете придумать заголовок, установить код и кликнуть «Сохранить». Придумывать заголовок необязательно. Теперь зайдя на собственный сайт, в сайдбаре вы увидите свою программу.

Удаление виджета

Чтобы удалить приложение из сообщества требуется:

Кликните по вкладке «Управление».
Выберите подлежащее удалению приложение и кликните «Изменить».
Далее нажмите «Удалить приложение».

Процедура удаления проста, и с ней справится любой пользователь.

Полезные виджеты для группы ВК

Для групп «ВК» есть такие полезные программы, как «Виджет в сообществе» и «Spycat — виджет для продаж». Они очень просто редактируются, требуется только в настройках подобрать необходимый стиль, вписать текст и установить ссылку в клавишу, если нужно.

Источник

«Виджет в сообществе» инструкция

Используйте для удобной навигации кликабельные ссылки ниже.

Как установить приложение в свое сообщество

Для установки приложения «Виджет в сообществе» потребуется ссылка на приложение – vk.com/app6244292. После перехода по ссылке нажмите на кнопку «Установить в моем сообществе» и перейдите к установке.

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

Максимальное количество приложений в одном сообществе – 3.

Настройка виджета Стиль №1

Заголовок виджета обычно используется для приветствия пользователя в своем сообществе и настраивается по клику на него. К пользователю можно обращаться по имени или имени и фамилии, для этого используйте теги [name] или [all_name].

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

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

2. Подзаголовок виджета можно использовать, а можно нет. Для настройки кликните на него и введите текст. Если вы не хотите использовать подзаголовок, то просто удалите текст и нажмите «Сохранить».

3. Основной текст виджета настраивается по клику на него. В появившемся окне введите текст. Здесь мы можете также обращаться к пользователю по имени или имени и фамилии используя теги [name] или [all_name].

Вы можете показывать разный текст парням и девушкам. Кликните в «окошко» и у вас появится дополнительно поле для ввода текста.

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

Как настроить кнопку для парней и девушек чуть ниже.

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

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

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

4. Кнопка виджета настраивается по клику на нее. Вам нужно настроить название кнопки и ссылку.

Вы можете вести парней и девушку на разные материалы. Кликните в «окошко» и у вас появится дополнительно поле для ввода дополнительной ссылки.

По умолчанию, ссылка ведет всех на один материал. Если вы используете эту настройку, то первое поле настраивается для парней, второе для девушек.

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

Какие ссылки можно использовать? Можно использовать ссылки на любой материал внутри ВКонтакте (vk.com/): приложение, опубликованный пост или статья, альбомы фотографий, обсуждения (обсуждение), товары (товар), ссылка на сообщения сообщества, ссылка на сообщения личной страницы и так далее.

Нельзя использовать ссылки типа vk.cc и www.kupiapp.ru. Используя данную ссылку у вас не установится виджет и он не будет отображаться в сообществе.

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

! Существует ссылка на подписку в сообщество. Мы можем предоставить вам такую ссылку. Для этого напишите нам в сообщения сообщества.

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

Кликните на кнопку «Загрузить картинку» и выберите картинку на вашем компьютере.

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

После всех необходимых настроек нажмите «Установить виджет». Готово.

Настройка виджета Стиль №2

Заголовок виджета обычно используется для приветствия пользователя в своем сообществе и настраивается по клику на него. К пользователю можно обращаться по имени или имени и фамилии, для этого используйте теги [name] или [all_name].

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

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

2. По клику на поле с картинкой, вы переходите в окно загрузки картинки. Размеры загружаемой картинки 510х128 пикселей.

После загрузки картинки на нее накладывается небольшое затемнение и справить это нельзя.

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

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

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

Можно настроить виджет таким образом, чтобы не отображался подзаголовок и описание, для этого используйте скрытый символ. Все что вам нужно – скопировать символ внутри скобок «⠀».

5. Кнопка виджета настраивается по клику на нее. Вам нужно настроить название кнопки и ссылку.

После всех необходимых настроек нажмите «Установить виджет». Готово.

Настройка виджета Стиль №3

Заголовок виджета обычно используется для приветствия пользователя в своем сообществе и настраивается по клику на него. К пользователю можно обращаться по имени или имени и фамилии, для этого используйте теги [name] или [all_name].

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

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

2. Основной текст виджета настраивается по клику на него. В появившемся окне введите текст. Здесь мы можете также обращаться к пользователю по имени или имени и фамилии используя теги [name] или [all_name].

Как настроить кнопку для парней и девушек чуть ниже.

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

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

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

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

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

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

После всех необходимых настроек нажмите «Установить виджет». Готово.

Настройка виджета Стиль №4

Заголовок виджета обычно используется для приветствия пользователя в своем сообществе и настраивается по клику на него. К пользователю можно обращаться по имени или имени и фамилии, для этого используйте теги [name] или [all_name].

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

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

2. По клику на поле с картинкой, вы переходите в окно загрузки картинки. Размеры загружаемой картинки 320х480 пикселей.

3. Заголовок карточки настраивается по клику на него. К пользователю можно обращаться по имени или имени и фамилии, для этого используйте теги [name]или [all_name].

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

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

4. Описание карточки настраивается по клику на нее. К пользователю можно обращаться по имени или имени и фамилии, для этого используйте теги [name]или [all_name].

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

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

5. Кликабельный текст карточки настраивается по клику на него. Вам нужно настроить название и ссылку.

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

После всех необходимых настроек нажмите «Установить виджет». Готово.

Самые частые проблемы при установке виджета

Если виджет не устанавливается, то вероятней всего вы делаете что-то не так. Чтобы решить проблему быстро, следуйте ниже перечисленным инструкциям.

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

Пример ссылок для виджета и как они выглядят:

Пост (обязательно должна быть опубликована) – https://vk.com/wall-146172145_1558
Статья (обязательно должна быть опубликована) — https://vk.com/@
Приложение – https://vk.com/app6244292_-146172145
Обсуждение – https://vk.com/topic-59800369_32892854
Сообщения сообщества – https://vk.me/kupiapp
Сообщения в личку – https://vk.com/write212705339

Использование ссылки на сайт возможна, но ссылка имеет совершенно другой вид. Не допустимо использовать короткие ссылки vk.cc

Проверьте количество введенных символов в текстовое поле. Если вы не превысили допустимое количество, то все равно проверьте. Попробуйте в каждую строку ввести «тест» и установить виджет. Вы заметили, что проблема оказалась в этом, просто начните поочередно заполнять все поля и устанавливать виджет – перебором вы вычислите ошибку при установке.

Бывает, что Стиль №4 не устанавливается, хотя вы все сделали правильно, в этом случае просто перезалейте картинки (размер картинок 320х480 пикселей).

Используя Стиль №4, нет смысла писать длинный текст в строках карточки, пользователь все равно ваш не увидит текст.

Текст Стилей №1 и №2 на мобильных версии немного урезается (это ограничение ВКонтакте). После установки виджета проверяйте виджет с разных устройств (ПК, телефон).

Настройки приватности

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

Перейдите в «Управление». Далее во вкладку «Приложения». Выберите приложение «Виджет в сообществе» и нажмите «Изменить».

Найдите строку «Видимость виджета приложения» и задайте настройку «Все пользователи».

Если вы хотите скрыть видимость приложения, то настройте строку «Видимость» (находится чуть выше).

Как отключить виджет

Вариант 1

Чтобы отключить виджет, зайдите в настройки любого из стилей виджета и нажмите на красную кнопку «Убрать виджет»

Виджет можно также отключить в настройках приложения

Вариант 2

Зайдите в «Управление», далее в «Приложения», выберите нужное приложение и перейдите к настройкам. Следайте настройку как на скрине и виджет пропадет в сообществе.

Если вы захотите вернуть виджет, повторите процесс и настройте видимость «Все пользователи».

Как удалить приложение

Зайдите в «Управление», далее в «Приложения», выберите нужное приложение и перейдите к настройкам.

Нажмите на кликабельную ссылку «Удалить приложение».

Источник