URI Action แอคชั่นสารพัดประโยชน์สำหรับ LINE Rich Menu
จากบทความที่แล้ว เราได้ไปสร้าง Rich Menu API ด้วย Postmanกันมา จะเห็นว่านอกจากเราจะสามารถใส่ URI เป็นแอคชั่นใน Rich Menu ให้ผู้ใช้ (users) คลิกที่ภาพเพื่อลิงก์ไปยังหน้าเว็บต่าง ๆ ได้แล้ว เรายังสามารถใช้แอคชั่น URI เปิดกล้องเพื่อให้ ผู้ใช้ถ่ายรูปส่งมาให้เราได้ด้วย
แต่ แต่ แต่ … URI actions ยังทำได้มากกว่านี้อีก!
โดยวันนี้เราจะมานำเสนอ URI ของ LINE scheme 4 ตัว และ URI อื่นอีก 2 ตัวที่สามารถใช้กับ URI actions ของ LINE ได้ค่ะ
มาเริ่มที่ LINE URI Scheme กันเลย
1. URI สำหรับแนะนำ LINE Official Account ไปให้เพื่อน
line://nv/recommendOA/{LINE_id}
เมื่อผู้ใช้คลิกที่พื้นที่ของแอคชั่น หน้าจอจะเด้งไปที่หน้า share with ให้ผู้ใช้เลือกเพื่อน, กรุ๊ป หรือแชทที่จะส่งเจ้า LINE OA นี้ไปให้ ซึ่งเราสามารถหา {LINE_id}
ที่หน้าตาแบบนี้ @123XXXXX ได้ที่ LINE Official Account Manager
2. URI สำหรับแชร์หน้า Timeline ของ LINE Official Account
line://home/public/main?id={LINE_id_without_@}
เมื่อผู้ใช้คลิกที่พื้นที่ของแอคชั่น มันจะเด้งไปที่หน้า Timeline ของบัญชี (Account) ที่เราใส่ LINE ID นั้นเข้าไป ซึ่งในขั้นตอนนี้ก็ใช้ LINE ID ตัวเดียวกับข้อก่อนหน้าเลย แต่ ให้ใส่ LINE ID แบบไม่มี @
นอกจากนี้ เรายังสามารถทำให้มันเด้งไปที่แต่ละโพสท์ใน Timeline ได้ด้วย สามารถอ่านรายละเอียดเพิ่มเติมได้ ที่นี่
3. URI สำหรับให้ LINE Official Account ส่งข้อความให้เพื่อน
line://msg/text/?{text_message}
พอผู้ใช้คลิกปุ๊ป หน้าจอจะเด้งไปที่หน้า share with ให้เราเลือกเพื่อน กรุ๊ป หรือแชทที่ต้องการจะส่ง{text_message}
ให้ พอเราเลือกเสร็จ เจ้าข้อความก็จะไปปรากฏในช่องข้อความรอให้ผู้ใช้กดส่ง
Tips&Tricks
ถ้าเราอยากส่งข้อความที่มีการเว้นวรรค การขึ้นบรรทัดใหม่ หรือตัวอักขระอื่น ๆ เช่น \, +, : ที่มักพบในที่อยู่เว็บไซต์ เราต้อง encode URL ก่อน เพื่อให้สามารถเข้าสู่ระบบอินเทอร์เน็ตได้ ซึ่งแต่ละตัวก็จะมีรหัสของตัวเอง เช่น ให้ใช้ %20
แทน “เว้นวรรค” หรือใช้ %0A
แทน “การขึ้นบรรทัดใหม่” เป็นต้น
สามารถดูวิธี URL encoding ได้ ที่นี่ หรือเพื่อความสะดวก ก็มีเว็บสำหรับ URL encoding ไว้ให้เราวางข้อความที่เราต้องการจะ encode ลงไปได้เลย เช่น https://www.urlencoder.org/ เป็นต้น
{text_message} ที่ต้องการส่ง
Contact usTel. +66971485893
Visit us on https://incubate.co.th
{text_message} ที่ผ่าน URL Encoding แล้ว
Contact%20us%0A%0ATel.%20%2B66971485893%0AVisit%20us%20on%20https%3A%2F%2Fincubate.co.th%2F
4. URI สำหรับเปิดหน้า LIFF
line://app/{liffId}
เมื่อผู้ใช้คลิกปั๊ป ก็จะมีหน้าเว็บขึ้นมาในแอพไลน์แทนที่จะเด้งไปเปิดด้วยบราวเซอร์ในโทรศัพท์ ซึ่งการเปิดหน้าเว็บในลักษณะนี้ เรียกว่า LINE Front-end Framework (LIFF) นั่นเอง เราสามารถหา URI สำหรับ LIFF ได้จาก https://developers.line.biz/en/ เมื่อล็อกอินแล้วก็ไปที่ Provider List>Provider>Channel>LIFF แล้วให้ copy ตัว “LIFF URL” มาก็เป็นอันเรียบร้อย
นอกจาก URI 4 ตัวที่ LINE มีให้แล้ว URI อีก 2 ตัวที่จะพามารู้จักต่อไปเป็น URI อื่นที่สามารถใช้กับ URI actions ของ LINE ได้เหมือนกัน
5. URI สำหรับเปิดหน้า Call ของโทรศัพท์
tel:{phone-number}
URI ตัวนี้เมื่อผู้ใช้คลิกที่ภาพโทร หน้าจอจะเด้งไปที่หน้า Call ของโทรศัพท์ พร้อมให้ผู้ใช้กดโทรไปที่{phone-number}
ได้เลย ทั้งนี้ใน LINE ก็มี URI Scheme สำหรับการโทรเหมือนกัน แต่จะเป็นการโทรผ่าน LINE
เจ้าตัว {phone-number}
สามารถกรอกด้วยรูปแบบ 0971485893 หรือรูปแบบที่มีรหัสประเทศ +66971485893 ก็ได้
6. URI สำหรับเปิด Messenger ของเพจเฟซบุ๊ก
https://m.me/{username}
พอผู้ใช้กดรูป Messenger หน้าจอจะเด้งไปที่ Messenger ของเพจเฟซบุ๊กที่เราใส่ username นั้นลงไปใน URI โดยเราสามารถไปหา {username}
ได้ที่หน้าเพจเฟซบุ๊ก>การตั้งค่า (Settings)>แพลตฟอร์ม Messenger (Messenger platform)>ลิงก์ Messenger ของคุณ (Your Messenger link)
หลังจากที่เรารู้จัก URI ทุกตัวแล้ว เราก็นำ URI นี้ไปใส่ใน Body ของ Request เพื่อสร้าง Rich Menu ได้เลย
{
"size":{
"width":2500,
"height":1686
},
"selected":false,
"name":"Chat bar",
"chatBarText":"Rich Menu",
"areas":[
{
"bounds":{
"x":0,
"y":0,
"width":833,
"height":843
},
"action":{
"type":"uri",
"uri":"line://nv/recommendOA/{LINE_id}"
}
},
{
"bounds":{
"x":833,
"y":0,
"width":834,
"height":843
},
"action":{
"type":"uri",
"uri":"line://msg/text/?{text_message}"
}
},
{
"bounds":{
"x":1667,
"y":0,
"width":833,
"height":843
},
"action":{
"type":"uri",
"uri":"tel:{phone-number}"
}
},
{
"bounds":{
"x":0,
"y":843,
"width":833,
"height":843
},
"action":{
"type":"uri",
"uri":"https://m.me/{username}"
}
},
{
"bounds":{
"x":833,
"y":843,
"width":834,
"height":843
},
"action":{
"type":"uri",
"uri":"line://home/public/main?id={LINE_id_without_@}"
}
},
{
"bounds":{
"x":1667,
"y":843,
"width":833,
"height":843
},
"action":{
"type":"uri",
"uri":"line://app/{liffId}"
}
}
]
}
References
Using the LINE URL scheme : https://developers.line.biz/en/docs/messaging-api/using-line-url-scheme/