URI Action แอคชั่นสารพัดประโยชน์สำหรับ LINE Rich Menu

Published in

incubate.co.th

3 min readAug 23, 2019

จากบทความที่แล้ว เราได้ไปสร้าง Rich Menu API ด้วย Postmanกันมา จะเห็นว่านอกจากเราจะสามารถใส่ URI เป็นแอคชั่นใน Rich Menu ให้ผู้ใช้ (users) คลิกที่ภาพเพื่อลิงก์ไปยังหน้าเว็บต่าง ๆ ได้แล้ว เรายังสามารถใช้แอคชั่น URI เปิดกล้องเพื่อให้ ผู้ใช้ถ่ายรูปส่งมาให้เราได้ด้วย

(ซ้าย/บน) URI ไปเปิดเว็บไซต์ (ขวา/ล่าง) URI ไปเปิดกล้องถ่ายรูป

แต่ แต่ แต่ … URI actions ยังทำได้มากกว่านี้อีก!

โดยวันนี้เราจะมานำเสนอ URI ของ LINE scheme 4 ตัว และ URI อื่นอีก 2 ตัวที่สามารถใช้กับ URI actions ของ LINE ได้ค่ะ

กรอบสีเหลือง คือ พื้นที่ที่ใช้ Line URL Scheme

มาเริ่มที่ 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

ให้ LINE Official Account ส่งข้อความให้เพื่อน

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” มาก็เป็นอันเรียบร้อย

กล่อง LIFF จะปรากฏหลังจากที่เรา Add LIFF แล้ว

หน้า LIFF หลังจากกดพื้นที่ที่ฝัง 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/