Карусели для бота ВК

Статьи / PHP

Карусели в ВК - это шаблонные сообщения, которые могут формироваться из заголовка, описания, иллюстрации и кнопок. О создании таких штуковин с помощью библиотеки SimpleVK 3 пойдет речь в нашей сегодняшней статье.

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

Также стоит иметь в виду ещё несколько вещей:

1. Элемент карусели обязательно должен содержать в себе:
   • Кнопку (или несколько кнопок);
   • Картинку или заголовок (либо и то, и другое);
   • Описание, если есть заголовок.
2. Заголовок и описание имеют ограничение по длине в 80 символов;
3. Пропорции изображения - 13/8, минимальный размер - 221х136;
4. Максимальное количество кнопок - 3.

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

Шаг 1: Пишем бота

Для работы с каруселями нам потребуется библиотека SimpleVK 3.x, она будет в архиве в исходниками. Можно также воспользоваться composer'ом:

В корне создаю файл index.php, подключаю библиотеку и создаю три константы. Пока оставлю их пустыми, на втором шаге заполним:

<?php

require_once __DIR__ . '/vendor/digitalstars/simplevk/autoload.php';



const VK_KEY = '***********************'; // Токен сообщества
const ACCESS_KEY = '********'; // Строка, которую должен вернуть сервер
const VERSION = '5.131'; // Версия VK API

Создаю экземпляры классов \DigitalStars\SimpleVK\SimpleVK и \DigitalStars\SimpleVK\Message. Тут же инициализирую переменные $type и $text:

$vk = \DigitalStars\SimpleVK\SimpleVK::create( VK_KEY, VERSION )
    ->setConfirm( ACCESS_KEY )
    ->setUserLogError( /* ID страницы ВК */ ) // Включаем лог ошибок в личку себе (нужно вставить айди своей страницы)
    ->initType( $type ) // Инициализация перменной $type (тип события)
    ->initText( $text ); // Инициализация переменной $text (текст сообщения)
$msg = \DigitalStars\SimpleVK\Message::create( $vk ); // Экземпляр класса Message в перменную $msg

Чтобы бот отправлял карусель по команде '/карусель' - создаю двойную проверку на событие и текст сообщения:

if ( $type == 'message_new' )
{


    if ( $text == '/карусель' )
    {    

        // Тут будем работать с каруселью
        
    }


}

В моей карусели будет 2 кнопки, генерирую их:

$btn_link = $vk->buttonOpenLink( 'https://kotoff.net' ); // Генерация кнопки-ссылки
$btn_donate = $vk->buttonDonateToUser( /* ID страницы ВК */ ); // Генерация кнопки для доната конкретному юзеру, нужно указать его айди

Метод carousel() создаёт саму карусель, а с помощью методов title(), description(), action(), kbd() и img() создаю начинку. Я также предварительно я добавил в корень сайта картинку (img.jpg):

/* --- Создание самой карусели, можно продублировать нужное количество раз для добавления нескольких элементов в карусель --- */
$msg->carousel()
    ->title( 'Заголовок' ) // Заголовок элемента карусели
    ->description( 'Описание 123 456 789' ) // Описание элемента карусели
    // ->action( 'https://kotoff.net' ) // URL, на который перекинет юзера по клику на элемент карусели
    ->kbd( [ $btn_link, $btn_donate ] ) // Кнопки для элемента карусели
    ->img( 'img.jpg' ); // Картинка для элемента карусели
/* --- */

Осталось только отправить всё это дело пользователю:

$msg->text( 'Держи карусельку' )->send(); // Указываем текст сообщения с каруселью и отправляем

Но пока ничего работать не будет, ведь мы ещё не настроили сообщество и не получили токен.

Шаг 2: Настройка сообщества

1 - Создайте токен сообщества и поставьте галочки напротив сообщений сообщества и фотографий. Доступ к фото нужен для загрузки картинки каруселей. Полученный токен необходимо вставить в константу VK_KEY.

2. Укажите ссылку на своего бота (у меня лежит он в индексном файле, поэтому просто указываю ссылку на свой сайт), скопируйте и вставьте в константу ACCESS_KEY строку, которую должен вернуть сервер. После сохранения бота нажмите кнопку 'Подтвердить':

3. В типах событий поставьте галочку у входящих:

4. Включите сообщения сообщества и возможности ботов:

Всё! Теперь пробуем написать боту:

carousel.zip