ผมเชื่อว่า นักการตลาด หรือ นักธุรกิจหลาย ๆ ท่านที่ทำการตลาดบน LINE Official Account  คงเคยเจอปัญหาในลักษณะนี้….. 
“แย่จัง…จำนวนช่องของ LINE Rich Menu ไม่เพียงพอ กับความต้องการ” หรือ “อยากกำหนด Action Area บน Rich Menu ได้อย่างอิสระด้วยตัวเอง” หลาย ๆ ท่านที่เคยตั้งค่าผ่านระบบเว็บไซต์หลังบ้านของ LINE (manager.line.biz) คงจะทราบกันดีว่าเทมเพลตสำเร็จรูปที่มี ให้เลือกใช้นั้นไม่เพียงพอต่อความต้องการที่เราพูดถึงมาอย่างแน่นอน

หากคุณสร้าง Rich Menu ผ่าน LINE Messaging API ตามวิธีการดังต่อไปนี้ บอกเลยว่า การสร้าง Rich Menu ของคุณจะเป็นเรื่องที่สนุก อย่างแน่นอน เพราะบน LINE Messaging API ได้ให้สิทธิแก่คุณในการออกแบบ Rich Menu ได้อย่างอิสระ ไม่ว่าจะเป็น การเพิ่มจำนวนปุ่ม หรือ กำหนด Action Area ได้ด้วยตัวเองทั้งหมด 

หมายเหตุ: บทความนี้ผมตั้งใจเขียนขึ้นมาสำหรับแนะนำนักการตลาด หรือ เจ้าของกิจการ ที่ไม่มีพื้นฐานการเขียนโค้ด สำหรับการตั้งค่า Rich Menu ผ่าน LINE Messaging API เพื่อให้ปฏิบัติตามได้ง่าย ๆ ครับผม การที่คุณจะสามารถเริ่มสร้าง LINE Rich Menu ผ่าน LINE Messaging API คุณจะต้องเตรียมตัวล่วงหน้าซักหน่อยครับ 

5 สิ่งที่คุณต้องมีก่อนเริ่มสร้าง LINE Rich Menu 8 ช่อง 

1. บัญชี LINE Official Account 

แน่นอนว่าคุณจำเป็นที่จะต้องมีบัญชี LINE Official Account ก่อน เพื่อเป็นบัญชีที่ใช้แสดงผล LINE Rich Menu ที่เรากำลังจะสร้าง 

2. บัญชี LINE Developer พร้อม สร้าง Provider และ Channel 

นอกจากคุณจะมีบัญชี LINE Official Account แล้ว คุณยังจำเป็นที่จะสมัครเป็น LINE Developer และสร้าง Provider และ Channel ของ LINE Messaging API ให้เรียบร้อย 
โดยคุณสามารถศึกษาวิธีการสมัครเป็น LINE Developer และ สร้างProvider และ Channel ผ่านคอนเทนต์ “ปฐมบทการสร้าง LINE Bot” จาก LINE Developer Thailand  
 

3. รูปสำหรับ Rich Menu 

เตรียมรูปภาพ Rich Menu สำหรับไปแสดงผลบน LINE Official Account ซึ่งในความเป็นจริงแล้ว คุณสามารถสร้าง Rich Menu ได้ 2 แบบ 

3.1 Rich Menu แบบใหญ่  

• รูปแบบไฟล์: JPG, JPEG, PNG 
• ขนาดไฟล์: ไม่เกิน 1 MB 
• ขนาดรูป: 2500×1686 พิกเซล, 1200×810 พิกเซล, 800×540 พิกเซล 

3.2 Rich Menu แบบเล็ก  

• รูปแบบไฟล์: JPG, JPEG, PNG 
• ขนาดไฟล์: ไม่เกิน 1 MB 
• ขนาดรูป: 2500×843 พิกเซล, 1200×405 พิกเซล, 800×270 พิกเซล 

4.โปรแกรม LINE Bot Designer 

LINE Bot Designer เป็นโปรแกรมคอมพิวเตอร์จาก LINE ที่ช่วยทำให้เราสามารถออกแบบข้อความประเภทต่างๆสำหรับแชทบอทบน LINE ได้ง่าย ๆ โดยที่คุณไม่ต้องเขียนโค้ดด้วยตัวเอง ซึ่งแน่นอนว่า โปรแกรมนี้จะช่วยอำนวยความสะดวกให้คุณสามารถออกแบบ Rich Menu ตามความต้องการของได้โดยไม่ต้องลงมือเขียนโค้ดนั่นเอง  

สามารถศึกษาและดาวน์โหลด “โปรแกรม LINE Bot Designer” ได้ที่ LINE Developers  โปรแกรมนี้รองรับการใช้งานทั้งระบบปฏิบัติการ Window และ Mac OS นะครับ 

5. โปรแกรม Postman 

Postman เป็นโปรแกรมคอมพิวเตอร์ ที่นักพัฒนา (Developer) ใช้งานในการส่ง Request และ ดู Response ของ API Service ซึ่งในบทความนี้ เราจะใช้ Postman เป็นเครื่องมือ ในการส่ง Request สร้าง Rich Menu ให้แก่ LINE Messaging API กัน โดยคุณสามารถดาวน์โหลด Postman ได้ผ่านลิงก์ :  https://www.postman.com/downloads/  หรือใช้งาน Postman ผ่าน Browser ได้ที่ลิงก์ : https://www.postman.com/

หมายเหตุ : สำหรับใครที่กำลังกังวลว่า “อ่าว! แล้วฉันเขียนโค้ดไม่เป็น ฉันจะใช้งาน Postman ได้ไหม” ผมจะขอตอบเลยว่า ใช้ได้ครับ เพราะ ในการใช้ Postman นั้น คุณไม่จำเป็นต้องเขียนโค้ดเลย เพราะเราจะเน้นใช้โค้ดเราเตรียมมาจาก โปรแกรม LINE Bot Designer ครับ และที่สำคัญในบทความนี้ ผมจะบอกวิธีการใช้งาน Postman กับคุณในทุกขั้นตอน ซึ่งคุณสามารถกดทำตามได้แน่นอนครับ 

ซึ่งหากตอนนี้ คุณได้เตรียมตัวสำหรับการสร้าง Rich Menu ผ่าน LINE Messaging API ครบทั้ง 5 ข้อแล้ว  ผมว่า คงถึงเวลาที่เราไปดูวิธีการตั้งค่า และ ลงมือทำ Rich Menu ผ่าน LINE API กันแล้ว 

5 STEPs การตั้งค่า Rich Menu ผ่าน LINE API  

ในการสร้าง Rich Menu ผ่าน LINE API นั้น คุณจะต้องทำตามลำดับดังต่อไปนี้ 

1. สร้าง Code ของ LINE Rich Menu ผ่าน โปรแกรม LINE Bot Designer 

ขั้นตอนที่ 1. เปิดโปรแกรม LINE Bot Designer พร้อมตั้งชื่อ Project  ด้วยข้อมูลดังต่อไปนี้  

Bot Name : ชื่อของบอท เช่น Test Bot 
Company : ชื่อของบริษัท เช่น Spark factor 
Category : หมวดธุรกิจ เช่น  Café & Restaurant หรือ Other เป็นต้น

หลังจากตั้งค่าเรียบร้อยแล้วให้กดปุ่ม OK 

ขั้นตอนที่ 2. เลือก เมนู “Rich Menu” ใน Bot Items แล้วกดเครื่องหมายบวก 

ขั้นตอนที่ 3. เลือกรูปภาพ สำหรับสร้าง Rich Menu โดยการกดปุ่ม Choose File ที่เมนู Image 

ขั้นตอนที่ 4. ตั้งค่าขนาด การแสดงผล และ ข้อความบนเมนูบาร์ ของ  Rich Menu  

Base Width : ความกว้าง ระบบจะล็อกค่าไว้ที่ 2500 px 
Base Height : ความสูง คุณจะสามารถเลือกได้ 2 ความสูงได้แก่  

• Rich Menu แบบใหญ่: 1686 px 
• Rich Menu แบบเล็ก: 843 px 

Display Menu by Default : แสดง Rich Menu เมื่อเปิดแชทหรือไม่ 

• ต้องการแสดง เมื่อเปิดแชท: Yes 
• ต้องการไม่แสดง เมื่อเปิดแชท: No 

Char Bar Title : ข้อความที่แสดงบนเมนูบาร์ ของ  Rich Menu เช่น “Open/Close” เป็นต้น 

ขั้นตอนที่ 5. กดเม้าส์ค้าง เพื่อลากสร้างพื้นที่บริเวณที่ต้องการให้กดได้ (Action Area) 

ขั้นตอนที่ 6. ตั้งค่า Action Area ว่า หากลูกค้ากดปุ่มนี้ จะให้เกิดอะไรขึ้น 

โดย LINE ให้คุณสามารถเลือก Action ที่เกิดขึ้นจากการกดพื้นที่นี้ได้ 5 แบบดังรูปตัวอย่าง 
ซึ่งเราสามารถกำหนดจุดที่ให้ผู้ใช้คลิกได้ (Action Area) ผ่าน Messaging API ได้สูงสุดถึง 20 จุด 

แต่ผมจะขออนุญาตแนะนำ 2 Actions ที่นักการตลาดสามารถนำไปใช้งานได้เองคือ 

• Message Action : เมื่อ Action Area ถูกกด จะเทียบเท่าลูกค้าพิมพ์ข้อความที่เรากำหนดเข้ามา 
• URI Action : เมื่อ Action Area ถูกกด ระบบจะเปิดหน้า Website ที่เรากำหนดในช่อง URI 

ขั้นตอนที่ 7. คัดลอก Code ในช่อง Json เพื่อนำไปใช้งานต่อ 

หลังจากคุณออกแบบ และ ตั้งค่า Action Area บน Rich Menu เสร็จเป็นที่เรียบร้อย จากนั้นให้คัดลอกโค้ด LINE Rich Menu ที่สมบูรณ์แล้ว ในช่อง Json เพื่อนำไปใช้งานต่อ 

2. สมัครใช้งาน Postman 

ขั้นตอนการสมัครใช้งาน Postman ง่าย ๆ ดังนี้

• ขั้นตอนที่ 1. เปิดเว็ปไซต์ https://www.postman.com/ และกดปุ่ม Sign up for Free 
• ขั้นตอนที่ 2. สมัครบัญชีเพื่อใช้งาน Postman 
• ขั้นตอนที่ 3. กดปุ่ม Skips for Now ที่มุมขวาบน เพื่อใช้งาน Postman บน Web Browser 
• ขั้นตอนที่ 4. เข้าสู่หน้าจัดการของ Postman เป็นอันจบขั้นตอนการสมัคร 

3. สร้าง Rich Menu ID  บน LINE Server ผ่าน Postman (ทำผ่าน Web Browser) 

ขั้นตอนที่ 1. กดปุ่ม New 

ขั้นตอนที่ 2. กดปุ่ม Http Request

ขั้นตอนที่ 3. เปลี่ยน Request Method เป็น Post และ กำหนด URL เป็น https://api.line.me/v2/bot/richmenu

ขั้นตอนที่ 4. ไปที่เมนู Headers แล้วสร้าง Key 2 ตัว 

1. Key : Authorization ในช่อง Value ให้ใส่ค่าว่า Bearer {Channel Access Token} 

2. Key : Content-Type ในช่อง Value ให้ใส่ค่าว่า application/json 

หมายเหตุ คุณสามารถเข้าไปหาค่า Channel Access Token ได้ใน LINE Developer โดยอ่านรายละเอียดได้ที่คอนเทนต์ “ปฐมบทการสร้าง LINE Bot” 

ขั้นตอนที่ 5. ไปที่เมนู Body แล้วเลือก Type เป็น Raw  จากนั้นนำโค้ด LINE Rich Menu ที่ได้จาก LINE Bot Designer มาใส่ในช่อง Body

ขั้นตอนที่ 6. เพิ่มข้อความก่อนบรรทัด  “size”: { ว่า     “name”: “ชื่อของRich Menu”, 

ขั้นตอนที่ 7. กดปุ่ม Send เพื่อเก็บ Rich Menu ID จาก Response 

4. ผูกรูปภาพ Rich Menu กับ Rich Menu ID  ผ่าน Postman 

ขั้นตอนที่ 1. กดปุ่ม New 

ขั้นตอนที่ 2. กดปุ่ม Http Request 

ขั้นตอนที่ 3. เปลี่ยน Request Method เป็น Post และ กำหนด URL เป็น https://api-data.line.me/v2/bot/richmenu/{Richmenuid}/content 

ยกตัวอย่างเช่น “richMenuId”: “richmenu-158c792fb850c7f844482d32f4906152” 
URL ก็จะต้องเป็น https://api-data.line.me/v2/bot/richmenu/richmenu-158c792fb850c7f844482d32f4906152/content

ขั้นตอนที่ 4. ไปที่เมนู Headers แล้วสร้าง Key 1 ตัว 

Key : Authorization ในช่อง Value ให้ใส่ค่าว่า Bearer {Channel Access Token} 

ขั้นตอนที่ 5. ไปที่เมนู Body > Type เป็น binary  > เลือกรูปภาพที่ต้องการ > กดปุ่ม Send 

ขั้นตอนที่ 6. ตรวจ Response เพื่อเช็คว่า Rich Menu ID ได้ถูกผูกกับ รูปภาพหรือยัง 

5. ตั้งค่าเปลี่ยน LINE Rich Menu ให้กับ LINE Follower ทั้งหมด 

ขั้นตอนที่ 1. กดปุ่ม New 

ขั้นตอนที่ 2. กดปุ่ม Http Request 

ขั้นตอนที่ 3. เปลี่ยน Request Method เป็น Post และ กำหนด URL ใหม่

โดยกำหนด URL เป็น https://api.line.me/v2/bot/user/all/richmenu/{richMenuId} 

ยกตัวอย่างเช่น “richMenuId”: “richmenu-158c792fb850c7f844482d32f4906152” 
URL ก็จะต้องเป็น  https://api.line.me/v2/bot/user/all/richmenu/richmenu-158c792fb850c7f844482d32f4906152 

ขั้นตอนที่ 4. ไปที่เมนู Headers แล้วสร้าง Key 1 ตัว  > กดปุ่ม Send > ตรวจ Response

Key : Authorization ในช่อง Value ให้ใส่ค่าว่า Bearer {Channel Access Token} 

โดยการกดปุ่ม Send ในครั้งนี้ ไม่ต้องใส่ Body เหมือนครั้งก่อน ๆ จากนั้นให้ตรวจสอบ Response เพื่อเช็คว่า Rich Menu ID ได้ถูกผูกกับ รูปภาพหรือยัง  โดยดูว่า Body ของ Response ตอบกลับมาว่า {} หรือไม่ 

เพียงเท่านี้ คุณก็สามารถสร้าง Rich Menu 8 ช่องให้กับ LINE OA ของคุณ ผ่าน LINE Messaging API ได้แล้วครับ 

หวังว่าคอนเทนต์นี้จะเป็นประโยชน์สำหรับ นักการตลาด ผู้ประกอบการ หรือ นักพัฒนา ที่กำลังเริ่มต้นศึกษา LINE API นะครับ 
 
สำหรับใครที่ชื่นชอบบทความ นี้อย่าลืมแชร์บทความนี้เพื่อส่งต่อความรู้ดี ๆ ให้กับเพื่อน ๆ ของคุณ นอกจากนี้คุณยังสามารถอ่านบทความสาระความรู้เกี่ยวกับ LINE และ LINE API ได้ที่เว็บไซต์ https://sparkth.io/ หรือ Facebook  
 
หากคุณกำลังมองหาที่ปรึกษาด้านการตลาดออนไลน์หรือ Partner ที่จะช่วยวางกลยุทธ์ทางการตลาด SPARK Factor จะพาคุณยกระดับธุรกิจ และเติบโต ไปกับเราอย่างมีประสิทธิภาพปรึกษาทำการตลาด ติดต่อได้ทาง     

📧 Email: support@sparkth.io 

📞 Tel: 085-099-2551, 086-531-8748