<Proger/> Про мене
ProProger

Telegram Bot API > Telegram buttons

Автор: / Час публікації: 09/10/2018 21:00

Всім привіт! Давно вже я не писав статей і тепер вирішив знов оживити свій блог. Сьогодні я розкажу про кнопки в телеграм ботах та про їх застосування.

Мабуть, кожен, хто створював telegram-бота знає про можливість додавати кнопки різних типів до свого проекту. І ці кнопки додають більшого функціоналу вашому боту. Сьогодні я розкажу про наступні їх види:

  • URL-buttons
  • Inline buttons
  • Keyboard buttons

#1 Keyboard buttons

Щоб додати будь-яку з цих кнопок, потрібно передати JSON-масив з даними кнопок параметром reply_markup при відправленні повідомлення ботом. Ось простенький приклад:

$keyboard = [
    'keyboard'=>[                
        [['text'=>'Button 1.1'],['text'=>'Button 1.2']],
        [['text'=>'Button 2.1'],['text'=>'Button 2.2']],
        [['text'=>'Button 3.1'],['text'=>'Button 3.2']]
    ]
]; 
$replyMarkup = json_encode($keyboard);
$params = [
    'chat_id' => 'USER_ID',
    'text' => "Amazing text",
    'reply_markup' => $replyMarkup     
];
$query = http_build_query($params);
$url = "https://api.telegram.org/bot".TELEGRAM_TOKEN."/sendMessage?".$query;
file_get_contents($url);

У результаті виконання цього коду ми отримаємо звичайне повідомлення і випадну клавіатуру під рядком для вводу тексту, яка складається з кнопок, розміщених у 2 стовпцях та 3 рядках.

ProProger | proproger.com | telegram-keyboard-buttons

#2 Inline buttons

Також існують кнопки, які вставляються прямо під повідомленням і використовують вже для взаємодії з сервером callback-запити. Зворотнє посилання для callback задається в тих же Webhooks.(Якщо Ви раніше підключали Webhooks доя бота, то цього повторно робити не потрібно!). Inline-кнопки передаються також параметром "reply_markup", але дещо відрізняється масив.

$keyboard = [
    'inline_keyboard'=>[                
        [['text'=>'Button 1.1','callback_data'=>'/button1_1func'],['text'=>'Button 1.2','callback_data'=>'/button1_2func']],
        [['text'=>'Button 2.1','callback_data'=>'/button2_1func'],['text'=>'Button 2.2','callback_data'=>'/button2_2func']],
        [['text'=>'Button 3.1','callback_data'=>'/button3_1func'],['text'=>'Button 3.2','callback_data'=>'/button3_2func']]
    ]
];

Ось так має виглядати сам масив. Можна побачити, що появився новий параметр - callback_data. Він відповідає за дані, які прийдуть на Ваш сервер пісня натискання на відповідну кнопку. Як приймати ці дані я розкажу вже в наступній статті. Ми знову ж отримаєм таке ж розміщення кнопок, тільки вони будуть під повідомленням.

ProProger | proproger.com | telegram-inline-keyboard-buttons

#3 URL-buttons

І тепер розглянемо кнопки з посиланнями. URL-buttons - це ті ж inline-buttons, але у них не є обов'язковим параметр callback_data, але є url. Сама кнопка відрізняється від звичайної стрілкою в куті. При натисканні на неї вам Telegram запропонує перейти за посиланням. Розглянемо простий приклад:

$keyboard = [
    'inline_keyboard'=>[                
        [['text'=>'ProProger','url'=>'https://pproger.com']],        
    ]
];

Також можна комбінувати з inline-кнопками:

$keyboard = [
    'inline_keyboard'=>[                
        [['text'=>'ProProger','url'=>'https://pproger.com']],
	[['text'=>'Сallback button','callback_data'=>'/callback']],       
    ]
];

Ось як це буде виглядати:

ProProger | proproger.com | telegram-url-keyboard-buttons
Inline Keyboard Markup - core.telegram.org/bots/api#inlinekeyboardmarkup
Inline Keyboard Button - core.telegram.org/bots/api#inlinekeyboardbutton SeoBot - бот для заробітку і просування каналів в Telegram @seobbot
Не забувай написати коментар і поширити посилання в соц. мережах за допомогою кнопок нижче! Дякую за увагу!

Коментарі(2)

Administrator
09/10/2018 22:44
Дуже приємно читати такі коментарі!!! Тут можете пропонувати нові теми для статей і я обов'язково напишу про це.
Bond
09/10/2018 21:52
Дякую за статтю :)