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

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

Как сделать кнопку подписаться в промо посте ВК, или какую-либо другую кнопку

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

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

Перед Вами откроется вот такое окно.

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

Далее Вам нужно вставить изображение Вашей будущей записи, которое должно быть в ширину 537 пикселей а в высоту 240. В идеале лучше подготовить уникальное изображение (если Вы владеете хотя бы основами фотошопа) в случае если Вы не сможете самостоятельно сделать баннер, то можно взять какое-нибудь изображение и больших размеров, а потом уже обрезать его. Изображение должно быть интересным пользователю чтобы привлечь его внимание, а так же для того чтобы по мимо рекламного охвата Вы так же смогли получить виральный охват . Кстати резать можно прямо в vk при создании записи.

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

Далее Вам нужно выбрать вариант кнопки в промо посте vk. Можно выбрать кнопку «подписаться» в таком случае пользователь который будет листать свою ленту новостей, заметит Ваш пост и при нажатии на кнопку, подпишется на Вашу страницу.

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

При аналитике постов Вы увидите, что такой пост пост будет хорошо конвертировать подписки (лучше чем посты со сниппетами например) но Вы не сможете увидеть вышедших людей из группы. Т.е. допускается такой момент, что человек сначала нажимает на эту кнопку чтобы посмотреть страницу, а затем сразу отписывается изсообщества. И аналитика корявая будет. Я не говорю, что в 100% случаев это происходит, но такая ситуация имеет место быть.

Так же можно выбирать и другие варианты кнопок при создании промо-постов, например такие как: Связаться, написать, подробнее, перейти. Это в том случае если Вы ведете трафик на сообщество ВКонтакте, если же трафик льете например на сайт, то тут выбора больше, у Вас появятся варианты таких кнопок как:

• Перейти
• Открыть
• Подробнее
• Купить
• Купить билет
• В магазин
• Заказать
• Записаться
• Установить
• Свзяться
• Заполнить

А если трафик идет в группу ВК, то вот такие кнопки Вы сможете поставить

Как сделать сниппет в группе ВК

На мой взгляд интересным вариантом кнопки считается сниппет, при создании рекламных объявлений Вы не обязаны создавать баннер размерами 537*240 и использовать только 220символов в описании. Тут Вы уже можете загрузить баннер со своими размерами и использовать большое полотно текста. Сейчас расскажу как сделать сниппет для рекламы ВКонтакте. Кстати выглядит сниппет вот так, совсем скоро Вы сможете сделать такой же.

Сниппет — это кнопка которая находится под Вашим главным баннером, мелкие детали туда не нужно стараться уместить, они будут плохо заметны. Я обычно ставлю кнопку «подробнее, читать, узнать, записаться, купить» или что-то подобное. Эти изображения должны иметь размеры 537*240 ниже в статье я выложил готовые варианты сниппетов, если Вы не можете работать в фотошопе, то просто скопируйте их.

Создание и размер сниппета для поста ВК

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

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

После этого нужно вставить сниппет, для этого нажмите на «кнопка»

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

И еще один важный момент… Протестируйте два варианта, (особенно если трафик на сайт ведете)

1) Стандартный, где изображение размером 537*240, вся картинка кликабельна (если не используете кнопку, то текста можно добавить много и тут могут мазать нажимая на кнопку показать полностью)

2) Вариант со сниппетом.

Обязательно поставьте UTM метки. Для чего это нужно сделать? Помимо того чтобы знать с какого объявления лучше идет трафик, Вы сможем проследить показатели отказов.

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

По 2-му варианту такой ошибки не будет… Человек тут уже целенаправленно жмет на кнопку.

Понимаете? т.е. Вы можем ошибочно оставить более кликабельное объявление с которого будет намного меньше целевых посетителей и отключить менее кликабельное, но с которого будет идти только целевой трафик. А в итоге по количеству привлеченных лидов может победить вариант 2. Вот такая вот херня.

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

Готовые сниппеты для ВК

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

Чем я могу быть Вам полезен?

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

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

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

1. На странице аккаунта нажмите направленную вниз стрелочку возле миниатюры фотографии профиля;
2. В выпадающем списке кликните по разделу «Настройки»;
   
3. В открывшемся меню перейдите во вкладку «Приватность»;
   
4. Откройте блок «Связь со мной», и разрешите оповещения о входящих заявках только от друзей ваших друзей.

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

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

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

В группе

Если вы являетесь администратором сообщества, то установить кнопку «подписаться» в нем нельзя. Пользователи смогут только подать заявку на вступление. А вот на официальных страницах - можно. Поэтому, если вы захотите расширить таким способом круг аудитории, то просто измените настройки группы, сделав ее официальной страницей.

Новый функционал для ботов ВК — кнопки быстрых ответов или же keyboard.

ВАЖНО! Более свежая версия статьи

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

Писать будем используя Сallback api(отправляет каждое действие в сообществе по отдельности на сервер). Поэтому его тоже следует настроить. Переходим в
«Управление сообществом» →»Работа с API». Для работы бота нужно зарегистрировать ключ доступа. Нажимаете «Создать ключ» и выбираете необходимые права доступа, для этого бота нужны только права на сообщения. Подтверждаем номер телефона и сохраняем куда нибудь ключ доступа. Теперь переходим во вкладку Callback API. Ставим свое название сервера и выбираем последнюю версию API(на данный момент она 5.80, и именно с ней ниже представленный бот будет работать 100%) . Во вкладке «Типы запросов» выбираем только входящие сообщения.

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

Теперь вам понадобится сервер для хостинга своего бота. Вы можете использовать бесплатные хостинги, например 000webhost.

Если вы будете использовать дешевые/бесплатные хостинги, то вероятнее всего на них будет отключен cURL(вы не сможете отправлять ботом медиа файлы, только текст), и его нельзя включить. У 000webhost все с этим нормально, можете использовать. Если у вас свой сервер или хороший купленный, то вам надо подключить cURL для полноценной работы бота из нашего примера.

Как работает Callback API и keyboard

Проведу краткий экскурс как все работает. Сallback API отсылает на ваш сервер любое событие, которое происходит в группе виде JSON. Полный список событий можно посмотреть во вкладке «Сallback API» → «Типы событий». Вот так выглядит JSON запрос когда пользователь отправляет сообщение, в данном случае он нажал на кнопку:

{"type":"message_new","object":{"date":1529668584,"from_id":89846036,"id":1522,"out":1,"peer_id":89846036,"text":"Золотая рыбка","conversation_message_id":305,"fwd_messages":,"important":false,"random_id":0,"attachments":,"payload":"{\"animals\":\"Goldfish\"}","is_hidden":false},"group_id":101461081}

Тут есть несколько интересных полей, которые можно обработать: id пользователя, текст сообщения(text), полезная нагрузка кнопки(payload).

Отправка сообщений пользователю происходит с помощью метода messages.send . Если вы отправляете клавиатуру, то после всех стандартных параметров вы добавляете параметр keyboard, который содержит json кнопок, вот как он выглядит:

Keyboard: { "one_time": false, "buttons": [ [{ "action": { "type": "text", "payload": "{\"button\": \"1\"}", "label": "Red" }, "color": "negative" }, { "action": { "type": "text", "payload": "{\"button\": \"2\"}", "label": "Green" }, "color": "positive" }]

Работа с библиотекой

Для работы бота мы используем самописную библиотеку на PHP. (Если ссылка не работает, то вот архив)вы можете найти документацию к библиотеке и скачать саму библиотеку. Вот короткий листинг готовых функций для написания бота, подробнее ищите по ссылке выше. Если вы хотите узнавать об изменениях в библиотеке, то напишите хотя бы одно сообщение нашему боту в ВК , через него мы будет вас оповещать об изменениях.

$vk = new vk_api(vk_key, version_api) — инициализация бота. Параметры: ключ сообщества(vk_key), версия API(version_api).

sendMessage(id, text) — функция отправки сообщений юзеру. Параметры: id пользователя(id), текст сообщения(text).

sendImage(id, patch) — функция отправки изображений. Параметры: id пользователя(id), путь до изображения(patch).

sendButton(id, text, buttons, one_time) — функция отправки сообщения с кнопками. Параметры: id пользователя(id), текст сообщения(не может быть пустым)(text), массив с кнопками(buttons), не обязательный параметр one_time, по дефолту false, если поставить true, то после нажатия на любую кнопку клавиатура скроется.

request(method, array_arguments) — универсальная функция работы с методами. Параметры: method — название метода из официального api, array_arguments — массив параметров.

sendOK() — Бета функция. Используется вместо echo «ok», помогает в тех случаях, когда время работы скрипта долгое, и бот начинает повторять сообщения по несколько раз.
ВАЖНО: есть использовать эту функцию, то у вас не будет отображаться вывод ошибок. Во время дебага заменяйте на echo «ok»

Полный код бота на PHP

Теперь перейдем собственно к коду, где прокомментирована почти каждая строка.
Данный код поддерживается на PHP 5.6+
В блоке CONFIG укажите свой ключ доступа сообщества, ключ для подтверждения сервера а так же выбранную вами версию API.

"Fish"], "А какие бывают?", "blue"]; //Код кнопки "Fish" const BTN_BACK = [["command" => "start"], "<< Назад", "red"]; // Код кнопки "<< Назад" const BTN_SALMON = [["animals" => "Pink_salmon"], "Горбуша", "white"]; // Код кнопки "Горбуша" const BTN_GOLDFISH = [["animals" => "Goldfish"], "Золотая рыбка", "blue"]; // Код кнопки "Золотая рыбка" const BTN_PLOTVA = [["animals" => "Plotva"], "Плотва", "green"]; // Код кнопки "Плотва" $vk = new vk_api(VK_KEY, VERSION); // создание экземпляра класса работы с api, принимает ключ и версию api $data = json_decode(file_get_contents("php://input")); //Получает и декодирует JSON пришедший из ВК if ($data->type == "confirmation") { //Если vk запрашивает ключ exit(ACCESS_KEY); //Завершаем скрипт отправкой ключа } $vk->sendOK(); //Говорим vk, что мы приняли callback if (isset($data->type) and $data->type == "message_new") { //Проверяем, если это сообщение от пользователя $id = $data->object->from_id; //Получаем id пользователя, который написал сообщение $message = $data->object->text; if (isset($data->object->peer_id)) $peer_id = $data->object->peer_id; // Получаем peer_id чата, откуда прилитело сообщение else $peer_id = $id; if (isset($data->object->payload)){ //получаем payload $payload = json_decode($data->object->payload, True); } else { $payload = null; } if (isset($payload["command"]) or mb_strtolower($message) == "начать") { //Если нажата кнопка начать или << назад $vk->sendButton($peer_id, "Хочешь посмотреть на рыбок?", []); //Отправляем кнопку пользователю } else { if ($payload != null) { // если payload существует switch ($payload["animals"]) { //Смотрим что в payload кнопках case "Fish": //Если это Fish $vk->sendButton($peer_id, "Вот такие, выбирай", [ //Отправляем кнопки пользователю , ]); break; case "Pink_salmon": //Если это Горбуша $vk->sendMessage($peer_id, "Держи свою горбушу!"); //отправляем сообщение $vk->sendImage($peer_id, "img/pink_salmon.jpg"); //отправляем картинку break; case "Goldfish": //Если это Золотая рыбка $vk->sendMessage($peer_id, "Она исполнит твои желания..."); $vk->sendImage($peer_id, "img/goldfish.jpg"); break; case "Plotva": //Если это Плотва $vk->sendMessage($peer_id, "Ой, похоже картинку перепутали)"); $vk->sendImage($peer_id, "img/plotva.jpg"); break; default: break; } } } } ?>

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

Стартуем!

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

FAQ:

Вопрос: Вообще ничего не работает!
Ответ: Значит где-то накосячили. Перечитайте еще раз внимательно статью, и проверьте, все ли вы сделали. Любой шаг влево может привести к ошибке…

Вопрос: У меня все работает, но не отправляются картинки.
Ответ: Проверьте, добавили ли вы папку img с изобажениями. Так же, возможно вы используете сервер, где не поддерживается cURL.

Вопрос: Я изменил версию на 5.78 или любую другую. У меня ничего не работает.
Ответ: Используйте другие версии api кроме 5.80 на свой страх и риск. Например на версии 5.78 от ВК приходят другие названия переменных(например вместо object->text идет object->body), поэтому скрипт крашится. Все изменения api ищите