Каждый блоггер стремится к эффективному продвижению своего сайта с помощью и применяет всевозможные инструменты для этого. А как сделать кнопку Вконтакте? Чтобы добавить её на блог следует зарегистрировать аккаунт на сервисе vk.com (правда людей, не имеющих здесь своей странички, осталось считанные единицы;)). Читайте также статью, . Именно из-за огромной популярности данного сервиса размещение такой приятной функции способно привлечь немало посетителей на площадку.
Как добавить кнопку Мне нравится Вконтакте на свой сайт?1. Для начала требуется войти в свой аккаунт в системе.
3. Теперь выбираем Подключить новый сайт
и заполняем ниже все строки:
– Название сайта: указываете название своего блога или сайта.
– Адрес сайта: прописываете адрес проекта.
– Основной домен сайта: вносится автоматически после заполнения адреса.
Кликнете на Сохранить
.
5. После переходим к дизайну кнопки: я выбрал Кнопка с миниатюрным счетчиком высотой 22 px и в названии указал Мне нравится (второй вариант Мне интересно показался неинтересным:smile:). Данная высота со счетчиком идеально сочетается с уже добавленными кнопочками других социальных сетей на сайте. В самом низу таблицы будет автоматически отображаться вид нашей кнопочки при внесении каких-либо изменений:
6. Сейчас необходимо скопировать предоставленный код и вставить его в блог. Итак, копируем первую часть:
Вот так она выглядит:
| of your page –> VK.init({apiId: 3144046, onlyWidgets: true}); |
7. Теперь код нужно вставить после тега . Если у вас WordPress, то в админке стоит перейти во вкладку Дизайн/Редактор , выбрать файл header.php и добавить скопированный код:
8. Идем обратно на открытую веб-страницу сайта vk.com и копируем оставшуюся вторую часть:
Я разместил сразу же за кодом от кнопки Твиттера.
Новый функционал для ботов ВК — кнопки быстрых ответов или же 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 5.6+
В блоке CONFIG укажите свой ключ доступа сообщества, ключ для подтверждения сервера а так же выбранную вами версию API.
Теперь вы знаете как работает код, и можете подстроить его под себя.
Стартуем!Заливайте свой скрипт и библиотеку на сервер. Теперь заходим в настройках во вкладку Callback API, вписываем в поле адреса путь до своего скрипта и жмем подтвердить. Если вы все сделали правильно, то рядом с адресом появится зеленая галочка.
FAQ:Вопрос: Вообще ничего не работает!
Ответ: Значит где-то накосячили. Перечитайте еще раз внимательно статью, и проверьте, все ли вы сделали. Любой шаг влево может привести к ошибке…
Вопрос: У меня все работает, но не отправляются картинки.
Ответ: Проверьте, добавили ли вы папку img с изобажениями. Так же, возможно вы используете сервер, где не поддерживается cURL.
Вопрос: Я изменил версию на 5.78 или любую другую. У меня ничего не работает.
Ответ: Используйте другие версии api кроме 5.80 на свой страх и риск. Например на версии 5.78 от ВК приходят другие названия переменных(например вместо object->text идет object->body), поэтому скрипт крашится. Все изменения api ищите
Здравствуйте, друзья! Сегодня я вам расскажу, как сделать ссылку ВКонтакте в виде кликабельной кнопки. Для постов ВКонтакте я уже предлагал здесь на блоге и на своём видеоканале в YouTube, и эта статья станет хорошим продолжением данной темы. А если Вы примените данный способ на практике, то по достоинству оцените его силу.
Все Вы знаете, что современного интернет-пользователя не так-то просто побудить что-то прочитать и тем более сделать переход по ссылке. Если на принятие решения «читать или не читать» основную роль играют заголовок, первый абзац текста и сопровождающая картинка, то в деле перехода по предлагаемым ссылкам к этим основным элементам подключаются активные элементы в виде баннеров и кабельных кнопок.
В итоге прочтения данной статьи, Вы сможете без труда сделать вот такое оформление своего поста ВКонтакте:
Техническая составляющая данного приема основана на том, что, как только в тексте поста появляется ссылка, Контакт автоматически повторяет её под текстом содержания. Одним из результатов такого алгоритма его работы является превью одной из картинок, размещенной на том веб-ресурсов, на который ведет ссылка.
Именно данное превью мы будем использовать. Если нажать на значок фотоаппарата, который появляется при наведении курсора мыши на превью, то Контакт предлагает заменить изображение на любое другое с размерами не меньше 537х240рх.
Создадим в Фотошопе файл белого цвета именно такого размера и сохраним его в виде картинки. Теперь в режиме добавления новостей на стену своего аккаунта или группы поставим любую ссылку, например, на статью своего блога, нажмем значок фотоаппарата на превью и предложим контакту загрузить наше белое изображение. Как только ВКонтакте сделает загрузку, Вы увидите вот такую картинку:
Далее, используя свой любимый скриншотер, Вам необходимо очень аккуратно сделать скриншот области, которую занимает серый фон по его внешней границе. Для этого можно использовать даже . Если Вы делаете скриншот не всего экрана сразу, а это самый лучший вариант в данном случае, то контролируйте размеры будущего скриншота. Они должны быть 537х240рх.
Теперь в Фотошопе открываете данный скриншот, берете инструмент «Прямоугольник» и создаёте на месте белой части изображения прямоугольник-заготовку для будущей кнопки.
При этом цвет данного прямоугольника Вы можете выбрать сразу перед началом этой операции, а можете изменить его позже. Удалять серое изображение или обрезать его не нужно. И в этом есть особая хитрость.
Вам останется только дать создаваемой кнопке название, подобрать цвет надписи и уточнить её расположение. При этом вполне возможно, что потребуется перед набором текста, временно отключить слой созданного прямоугольника.
У Вас получится примерно вот такая красивая кнопочка или даже ещё лучше. Кстати, можно сразу наделать несколько таких кнопок, чтобы иметь возможность оперативно выбирать кнопку, подходящую по цвету под картинку Вашего поста. После создание такого набора сохраняем каждый вариант в специально созданную для кнопок папку.
Когда кнопки готовы, Вы в процессе работы загружаете нужную кнопку вместо созданного Контактом превью. При этом не нужно регулировать никаких размеров — смело после загрузки нажимаете кнопку «Сохранить изменения» , а сам Контакт сделает всё остальное.
У Вас не останется даже намека на серую область, а будет именно кнопка.
Далее дополняете будущий пост необходимым содержанием и обязательно вставляете картинку, при необходимости уточняете надпись на ссылке и отправляете свой пост на суд читателей. Выглядеть он будет не хуже, чем показано выше на скриншоте поста по старту очередного набора в .
В принципе работа несложная, но потребует от Вас определенный аккуратности в действиях. Добавлю, что кнопки можно делать со скругленными углами, можно делать их меньшего размера, а можно просто вставлять уже готовые. Как это всё делается, Вы можете посмотреть в видео ниже. Первая его часть посвящена описанному выше способу, а вторая — всем остальным.
Если Вам понравилось создание таких кликабельных кнопок для постов ВКонтакте, дайте мне об этом знать в комментариях ниже. Естественно, если остались вопросы, то не стесняйтесь их задать там же. Желаю Вам разобраться во всём без проблем.
С уважением, Сергей Почечуев.
В этой статье есть ответ на вопрос, как делать кнопки и сниппеты для промо постов в группе ВК. Создание кнопок и сниппетов, процесс довольно простой, для Вашего удобства я пошагово расписал, что нужно делать для того чтобы создать привлекательный пост с кнопкой ВКонтакте.
Как сделать кнопку подписаться в промо посте ВК, или какую-либо другую кнопкуНачнем с добавления кнопок. Если Вы ведете трафик в свою группу ВК или на какой-либо сайт, то для того чтобы создать запись с кнопкой Вам нужно перейти в раздел «реклама» вконтакте, нажать на кнопку «создать объявление» и выбрать в открывшемся окне «запись с кнопкой» далее уже выбираете, что конкретно собираетесь рекламировать, можно запустить в рекламу действующий пост, для этого нужно вставить ссылку на пост, а можно добавить новый промо пост. Давайте я расскажу каким образом создается новый промо пост с кнопкой.
Жмите на «создать запись» в открывшемся окне, вводите адрес ссылки, куда планируете вести трафик, я для примера покажу как вести трафик на страницу ВКонтакте, но так же можно вписывать адрес какого-либо сайта.
Перед Вами откроется вот такое окно.
В котором нужно ввести текст записи, но обратите внимание на то, что текст не должен превышать 220 символов, так что длинную портянку написать не получится.
Далее Вам нужно вставить изображение Вашей будущей записи, которое должно быть в ширину 537 пикселей а в высоту 240. В идеале лучше подготовить уникальное изображение (если Вы владеете хотя бы основами фотошопа) в случае если Вы не сможете самостоятельно сделать баннер, то можно взять какое-нибудь изображение и больших размеров, а потом уже обрезать его. Изображение должно быть интересным пользователю чтобы привлечь его внимание, а так же для того чтобы по мимо рекламного охвата Вы так же смогли получить виральный охват . Кстати резать можно прямо в vk при создании записи.
Текст который расположен около кнопки, тоже можно отредактировать, для этого просто нажмите на него, и впишите тот текст, который будет дополнять Ваше объявление.
Далее Вам нужно выбрать вариант кнопки в промо посте vk. Можно выбрать кнопку «подписаться» в таком случае пользователь который будет листать свою ленту новостей, заметит Ваш пост и при нажатии на кнопку, подпишется на Вашу страницу.
Кнопка «подписаться» с одной стороны хороша, а с другой не так хороша как хотелось бы. Допустим, что человек не прочитал, что там за кнопка у нас стоит, нажал на нее, для того чтобы просто перейти в группу и посмотреть Ваши записи и даже не планировал подписываться. Вот с этой стороны кнопка не так хороша как хотелось бы, Вы в таком случае получите не заинтересованного подписчика, который через некоторое время может выйти из вашей группы.
При аналитике постов Вы увидите, что такой пост пост будет хорошо конвертировать подписки (лучше чем посты со сниппетами например) но Вы не сможете увидеть вышедших людей из группы. Т.е. допускается такой момент, что человек сначала нажимает на эту кнопку чтобы посмотреть страницу, а затем сразу отписывается изсообщества. И аналитика корявая будет. Я не говорю, что в 100% случаев это происходит, но такая ситуация имеет место быть.
Так же можно выбирать и другие варианты кнопок при создании промо-постов, например такие как: Связаться, написать, подробнее, перейти. Это в том случае если Вы ведете трафик на сообщество ВКонтакте, если же трафик льете например на сайт, то тут выбора больше, у Вас появятся варианты таких кнопок как:
- Перейти
- Открыть
- Подробнее
- Купить
- Купить билет
- В магазин
- Заказать
- Записаться
- Установить
- Свзяться
- Заполнить
А если трафик идет в группу ВК, то вот такие кнопки Вы сможете поставить
На мой взгляд интересным вариантом кнопки считается сниппет, при создании рекламных объявлений Вы не обязаны создавать баннер размерами 537*240 и использовать только 220символов в описании. Тут Вы уже можете загрузить баннер со своими размерами и использовать большое полотно текста. Сейчас расскажу как сделать сниппет для рекламы ВКонтакте. Кстати выглядит сниппет вот так, совсем скоро Вы сможете сделать такой же.
Сниппет — это кнопка которая находится под Вашим главным баннером, мелкие детали туда не нужно стараться уместить, они будут плохо заметны. Я обычно ставлю кнопку «подробнее, читать, узнать, записаться, купить» или что-то подобное. Эти изображения должны иметь размеры 537*240 ниже в статье я выложил готовые варианты сниппетов, если Вы не можете работать в фотошопе, то просто скопируйте их.
Создание и размер сниппета для поста ВКА сейчас о том как сделать сниппет вк. Для того чтобы сделать такой вариант поста, при выборе вариантов, Вам нужно выбрать «универсальная запись»
Как я уже говорил по тексту Вы не ограничены размерами и можете при желании вместить туда много информации, только нужно чтобы она была интересной, иначе, читать ее не станут. После того как Вы подготовили текст, можете загружать свой рекламный баннер.
После этого нужно вставить сниппет, для этого нажмите на «кнопка»
Выбрать изображение, которое будет использоваться в качестве сниппета и подгрузить его. Далее все как обычно, жмете на «создать» и создаете свою рекламную кампанию. Все до безобразия просто.
И еще один важный момент… Протестируйте два варианта, (особенно если трафик на сайт ведете)
1) Стандартный, где изображение размером 537*240, вся картинка кликабельна (если не используете кнопку, то текста можно добавить много и тут могут мазать нажимая на кнопку показать полностью)
2) Вариант со сниппетом.
Обязательно поставьте UTM метки. Для чего это нужно сделать? Помимо того чтобы знать с какого объявления лучше идет трафик, Вы сможем проследить показатели отказов.
Если человек сидит с мобильного телефона то он просто случайно может нажать на такое изображение (я сейчас про первый вариант) и выйти с сайта, в этом случае может быть больше переходов и намного больше отказов, но нам-то желательно нужны целевые посетители, чтоб при меньшем расходе средств получить больше лидов.
По 2-му варианту такой ошибки не будет… Человек тут уже целенаправленно жмет на кнопку.
Понимаете? т.е. Вы можем ошибочно оставить более кликабельное объявление с которого будет намного меньше целевых посетителей и отключить менее кликабельное, но с которого будет идти только целевой трафик. А в итоге по количеству привлеченных лидов может победить вариант 2. Вот такая вот херня.
Но я могу ошибаться, скажу Вам только одно, тестируйте и анализируйте.
Готовые сниппеты для ВКА теперь как и обещал, подготовил несколько вариантов сниппетов, Вы сможете не заморачиваясь скачать их и вставить в свою запись.
Чем я могу быть Вам полезен?
