Telegram Bot: สร้างปุ่มเมนู (Inline & Reply Keyboard)
05/07/2026 อ่าน 199 ครั้ง
สร้างปุ่มให้บอท Telegram ใช้งานง่ายขึ้น ทั้ง Inline Keyboard (ปุ่มใต้ข้อความ + callback) และ Reply Keyboard (ปุ่มแทนแป้นพิมพ์) พร้อมวิธีจับการกดปุ่มด้วย callback_query
แทนที่จะให้ผู้ใช้พิมพ์คำสั่งเอง เราสามารถสร้าง "ปุ่ม" ให้กดได้ ทำให้บอทใช้งานง่ายและดูโปรขึ้นมาก บทความนี้จะสอนสร้างปุ่มทั้ง 2 แบบ พร้อมวิธีจับการกดปุ่ม
═══════════════════════════════════════
📌 1. ปุ่มใน Telegram มี 2 แบบ
═══════════════════════════════════════
• Inline Keyboard → ปุ่มติดอยู่ "ใต้ข้อความ" กดแล้วส่งค่าซ่อน (callback)
เหมาะกับเมนู ตัวเลือก ยืนยัน/ยกเลิก
• Reply Keyboard → ปุ่มแทน "แป้นพิมพ์" ด้านล่าง กดแล้วส่งเป็นข้อความ
เหมาะกับเมนูหลักที่ใช้บ่อย
═══════════════════════════════════════
🔘 2. สร้าง Inline Keyboard
═══════════════════════════════════════
ใส่ reply_markup พร้อม inline_keyboard ตอนส่งข้อความ
```javascript
function sendMenu(chatId) {
var token = "วาง_BOT_TOKEN";
var url = "https://api.telegram.org/bot" + token + "/sendMessage";
var keyboard = {
"inline_keyboard": [
[
{ "text": "✅ ยืนยัน", "callback_data": "confirm" },
{ "text": "❌ ยกเลิก", "callback_data": "cancel" }
],
[
{ "text": "🌐 เปิดเว็บไซต์", "url": "https://example.com" }
]
]
};
UrlFetchApp.fetch(url, {
"method": "post",
"contentType": "application/json",
"payload": JSON.stringify({
"chat_id": chatId,
"text": "กรุณาเลือกรายการ:",
"reply_markup": keyboard
})
});
}
```
โครงสร้าง:
• inline_keyboard = array ของแถว, แต่ละแถวเป็น array ของปุ่ม
• text → ข้อความบนปุ่ม
• callback_data → ค่าที่ส่งกลับเมื่อกด (ซ่อนจากผู้ใช้)
• url → เปิดลิงก์แทน (ปุ่มลิงก์)
═══════════════════════════════════════
👆 3. จับการกดปุ่ม (Callback Query)
═══════════════════════════════════════
เมื่อผู้ใช้กดปุ่ม inline Telegram จะส่ง callback_query มาที่ webhook
```javascript
function doPost(e) {
var update = JSON.parse(e.postData.contents);
// ตรวจว่าเป็นการกดปุ่มหรือไม่
if (update.callback_query) {
var chatId = update.callback_query.message.chat.id;
var data = update.callback_query.data; // ค่า callback_data ที่ตั้งไว้
var reply = "";
if (data == "confirm") {
reply = "คุณกดยืนยันแล้ว ✅";
} else if (data == "cancel") {
reply = "ยกเลิกเรียบร้อย ❌";
}
sendTelegram(chatId, reply);
}
return ContentService.createTextOutput("ok");
}
```
═══════════════════════════════════════
⌨️ 4. สร้าง Reply Keyboard (เมนูแทนแป้นพิมพ์)
═══════════════════════════════════════
```javascript
function sendReplyKeyboard(chatId) {
var token = "วาง_BOT_TOKEN";
var url = "https://api.telegram.org/bot" + token + "/sendMessage";
var keyboard = {
"keyboard": [
[{ "text": "📋 ดูรายการ" }, { "text": "➕ เพิ่มข้อมูล" }],
[{ "text": "ℹ️ ช่วยเหลือ" }]
],
"resize_keyboard": true, // ปรับขนาดปุ่มพอดี
"one_time_keyboard": false // แสดงค้างไว้
};
UrlFetchApp.fetch(url, {
"method": "post",
"contentType": "application/json",
"payload": JSON.stringify({
"chat_id": chatId,
"text": "เลือกเมนู:",
"reply_markup": keyboard
})
});
}
```
*** Reply Keyboard กดแล้วส่งเป็น "ข้อความ" ธรรมดา (เช่น "📋 ดูรายการ")
จับได้ที่ update.message.text เหมือนการพิมพ์ปกติ ***
═══════════════════════════════════════
🗑️ 5. ซ่อนปุ่ม Reply Keyboard
═══════════════════════════════════════
```javascript
// ส่ง remove_keyboard เพื่อซ่อนแป้นเมนู
var payload = {
"chat_id": chatId,
"text": "ซ่อนเมนูแล้ว",
"reply_markup": JSON.stringify({ "remove_keyboard": true })
};
```
═══════════════════════════════════════
✅ 6. สรุป
═══════════════════════════════════════
• Inline Keyboard → ปุ่มใต้ข้อความ ส่ง callback_data (ซ่อน) จับที่ callback_query
• Reply Keyboard → ปุ่มแทนแป้นพิมพ์ ส่งเป็นข้อความ จับที่ message.text
• ใส่ผ่าน reply_markup ตอนส่งข้อความ
• ปุ่มแบบ url เปิดลิงก์เว็บได้ทันที
จำไว้: ปุ่มเมนูทำให้บอทใช้ง่ายขึ้นมาก ผู้ใช้ไม่ต้องจำคำสั่ง แค่กด 👆
ดาวน์โหลดเอกสาร
ไม่มีไฟล์แนบในบทความนี้