Как связать виджет приветствия с кнопкой Подписаться ВКонтакте

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

К сожалению, не возможно поставить кнопку подписки в виджет, которая бы позволяла вступать в группу в 1 клик. Это реализуется только через wiki-страницу. Перед тем, как приступить к изучению материала, рекомендую почитать статью на похожую тему Как оформить пост через wiki-страницу ВКонтакте.

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

Оформление картинки подписки в Photoshop

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

Хотите научиться работать в программе Photoshop профессионально, рекомендую пройти обучение для новичков у Зинаиды Лукьяновой. Подробности по этой ссылке >>>

В программе Photoshop через ФайлСоздать задайте размеры для заготовки. Для меня оптимальным вариантом стала картинка размером 550х220 рх. Вы выставляете размеры только по собственному желанию. Остальные настройки по умолчанию. Смотрите скриншот:

размеры картинки для виджета приветствия

Теперь прозрачный фон зальем белым цветом. В левом меню выставляем основной цвет белый и кликаем по инструменту «Заливка». Клик по фону делает его белым.

настройка инструментов в photoshop

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

Предполагаю, что логотип вашей группы у вас сохранен на компьютере: просто перетащите мышкой его в открытую программу Photoshop, а дальше на заготовку. Если необходимо увеличить или уменьшить картинку, сделайте это через функцию Редактирование ТрансформированиеМасштабирование. Важно, чтобы картинка не меняла свои пропорции: для этого сначала зажмите на клавиатуре клавишу Shift.

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

горизонтальный текст

В верхней панели вам будут доступны настройки для текста: шрифт, величина шрифта. Вы можете поэкспериментировать, или ориентируйтесь на мой пример.

настройки для инструмента текст

Теперь на заготовку осталось добавить кнопку Подписаться. Найти ее можно через Яндекс картинки в Интернете. Скопируйте правой кнопкой мыши и вставьте в программу с помощью сочетания клавиш Ctrl+V. Величина кнопки редактируется так же через функцию Трансформирование. Результат:

как связать виджет приветствия с кнопкой подписки вк

Чтобы заинтриговать потенциального подписчика, завладеть его вниманием, вы можете придумать свой вариант картинки. С помощью Photoshop можно создавать подобные заготовки и круглые, и квадратные, с разным фоном и текстом, – все, что позволяет вам ваша фантазия.

Подключение wiki-разметки в группе

Если вы ни разу не работали с wiki-разметкой, необходимо эту функцию в группе сначала подключить. Управление сообществомРазделыМатериалы (ограниченные).

как подключить wiki-разметку

Теперь обратите внимание, что в группе появилась рядом с Информацией новая вкладка Свежие новости. И она доступна для редактирования.

свежие новости

Оформление подписки через wiki-страницу  ВКонтакте

После клика по кнопке Редактировать, вам откроется пустая wiki-страница под название Свежие новости.

В режиме wiki-разметки (а она подключается через соответствующую иконку справа <>) введите название для этой формы. Например, виджет приветствия. Важно! Слово или фраза должна быть заключена в двойные квадратные скобки: [[Виджет приветствия]]

Смотрите на скриншоте:

режим wiki-разметки

Далее Предпросмотр. Если вы все сделали правильно, ссылка ниже будет активной. Для перехода кликните по ней. Но перед этим сохраните страницу.

предпросмотр

Наполнить содержанием.

наполнить содержанием

На этом шаге у нас появилась возможность добавить на страницу готовую картинку для подписки. Делается это через панель инструментов – Добавить фотографию.

как добавить фотографию на wiki-страницу

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

А вот теперь необходимо перейти в режим wiki-разметки: кликните по иконке <>.

Отобразится код, в который нужно вставить вот эту ссылку https://vk.com/widget_community.php?act=a_subscribe_box&oid=-idгруппы&state=1

Будьте внимательны: ссылка вставляется перед закрывающимися квадратными скобками после прямого слеша. Здесь образуется лишний пробел – его нужно удалить. Только не удаляйте символы: так у вас не будет работать форма.

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

где посмотреть id группы вконтакте

Скопируйте этот код и замените в ссылке. У каждой группы id собственный.

В результате у вас получится следующее:

готовая ссылка для виджета приветствия

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

окно с активной кнопкой подписки

Добавление кнопки Подписаться в виджет приветствия

Прежде чем закрыть wiki-страницу, скопируйте полностью ссылку из браузерной строки.

ссылка в браузерной строке

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

пост вконтакте

Откройте данный пост и снова скопируйте ссылку полностью из браузерной строки.

новая ссылка

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

установка кнопки подписки в виджет приветствия

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

изменения в кнопке

Установите виджет. Если он у вас уже установлен – подтвердите обновление.

обновить виджет в группе

Теперь в виджете приветствия отображается кнопка Подписаться.

готовый виджет приветствия с кнопкой подписки

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

Вот таким образом можно связать виджет приветствия с кнопкой подписки ВКонтакте. Я бы не сказала, что это очень удобно. Реализация функции в 1 клик для подписчиков была бы более комфортна. Тем не менее, это еще один способ привлекать новых участников в свою группу ВКонтакте.

Если возникли вопросы в ходе изучения статьи, думаю, что видеоурок “расставит все точки над i”.

Денежные ручейки

 
   
Я пишу о том, что проверила на собственном опыте. Подпишитесь на обновления, чтобы не упускать полезные знания!
 

Комментарии 4

  • Спасибо за статью. Вставила эту ссылку –
    https://vk.com/widget_community.php?act=a_subscribe_box&oid=-idгруппы&state=1
    непосредственно в виджет, минуя вики страницу. Работает.

    • Алина, ну здОрово! Если действительно работает, то с вики-страницей мучиться не нужно). Спасибо большое за подсказку!

      • Ольга, единственный минус этой ссылки – из мобильного приложения перекидывает в браузер. Те если ты не авторизован в браузере, придется еще вводить логин и пароль. Далеко не каждый пользователь захочет это делать.
        Ищу решение… 85% пользователей ВК сидят с мобильников.
        Я кстати эту ссылочку внедрила в меню группы. https://vk.com/v_prok?w=page-50152225_55577523 вот так получилось (картинка с предложением подписаться)

        • Алина, действительно, есть такой нюанс… Если найдете решение, поделитесь! А группа в ВК у Вас очень симпатичная: находка для настоящих хозяек!)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Нажимая кнопку «Отправить комментарий», я принимаю Пользовательское соглашение и подтверждаю, что ознакомлен и согласен с Политикой конфиденциальности этого сайта.