การเพิ่ม SDK ส่วนขยายของ Messenger

SDK ส่วนขยายของ Messenger ช่วยให้สามารถใช้ฟีเจอร์เฉพาะของ Messenger ที่มีประโยชน์บนเว็บไซต์หรือแอพเว็บที่เปิดในตัวแสดงหน้าเว็บของ Messenger ซึ่ง SDK นี้ช่วยให้คุณสามารถเรียกดูข้อมูลเกี่ยวกับผู้ใช้ที่เปิดตัวแสดงหน้าเว็บ แชร์เนื้อหาไปยังการสนทนาใน Messenger และผสานการทำงานระดับลึกเข้ากับ UI ของ Messenger ได้

ฟีเจอร์ที่ใช้งานได้

ฟีเจอร์ต่อไปนี้มีให้ใช้งานในตัวแสดงหน้าเว็บของ Messenger เมื่อคุณเพิ่ม SDK ส่วนขยายของ Messenger โปรดทราบว่าความพร้อมในการใช้งานจริงของฟีเจอร์ต่างๆ อาจแตกต่างกันไปตามเวอร์ชั่นของ Messenger และอุปกรณ์

โปรดดูรายละเอียดทั้งหมดเกี่ยวกับการใช้ฟีเจอร์ต่างๆ นี้ในข้อมูลอ้างอิงเกี่ยวกับ SDK ส่วนขยายของ Messenger

การติดตั้ง SDK

1. ไวท์ลิสต์โดเมนของคุณ

หากต้องการใช้ส่วนขยาย Messenger ในบอท คุณต้องไวท์ลิสต์โดเมนซึ่งเป็นที่มาของหน้าก่อน และคุณจะต้องเพิ่มโดเมนทั้งหมดบนเว็บเพจของคุณในโดเมนที่อยู่ในไวท์ลิสต์ เพื่อเหตุผลด้านการรักษาความปลอดภัย โปรดดูรายละเอียดเพิ่มเติมในเอกสารอ้างอิงเกี่ยวกับการไวท์ลิสต์

คุณสามารถเพิ่มโดเมนในไวท์ลิสต์ให้เป็นระบบได้อย่างง่ายดายโดยใช้ API ดังต่อไปนี้

 
curl -X POST -H "Content-Type: application/json" -d '{
  "whitelisted_domains":[
    "https://petersfancyapparel.com"
  ]
}' "https://graph.facebook.com/v21.0/me/messenger_profile?access_token=PAGE_ACCESS_TOKEN"

หากดำเนินการสำเร็จ API โปรไฟล์ของ Messenger จะตอบกลับดังนี้

{"result":"success"}

2. เพิ่ม JavaScript SDK ส่วนขยายของ Messenger

เพิ่ม JavaScript SDK ส่วนขยายของ Messenger ลงในหน้าที่โหลดในตัวแสดงหน้าเว็บด้วยโค้ดด้านล่าง โดยคุณควรแทรก SDK นี้ไว้ต่อท้ายแท็กเปิด body ในแต่ละหน้าที่คุณต้องการโหลด SDK

(function(d, s, id){
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/messenger.Extensions.js";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'Messenger'));

3. รอเหตุการณ์การโหลด SDK

window.extAsyncInit() จะได้รับการเรียกใช้เมื่อโหลด JavaScript SDK ส่วนขยายของ Messenger เรียบร้อยแล้ว โดยคุณสามารถนำมาใช้เป็นทริกเกอร์เพื่อเรียกใช้ฟังก์ชั่นอื่นๆ ที่มีอยู่ใน SDK ได้

window.extAsyncInit = function() {
  // the Messenger Extensions JS SDK is done loading 
};

การใช้ SDK ในไคลเอ็นต์เว็บของ Messenger

ระบบสามารถรองรับการใช้งาน SDK ส่วนขยายของ Messenger ทั้งบนไคลเอ็นต์สำหรับมือถือและไคลเอ็นต์สำหรับเดสก์ท็อปของ Messenger แต่คุณอาจต้องพิจารณารายละเอียดต่างๆ ต่อไปนี้เพื่อให้ SDK ทำงานได้เป็นปกติ

นอกจากนี้ คุณยังสามารถใช้คุณสมบัติ window.name เพื่อตรวจสอบตำแหน่ง iframe จากโค้ดฝั่งไคลเอ็นต์ของคุณได้อีกด้วย

เมื่อระบบทริกเกอร์ iframe บนเว็บ Messenger เราจะตั้งค่า window.name ให้เป็น "messenger_ref" ไม่เช่นนั้น เมื่อทำการโหลดบนแท็บแชทของ Facebook แล้ว window.name จะเป็น "facebook_ref"

ฟีเจอร์ที่ไม่รองรับ

ระบบไม่รองรับการตั้งค่าหรือฟีเจอร์ต่อไปนี้บนไคลเอ็นต์เว็บของ Messenger แต่ยังสามารถทำงานบนไคลเอ็นต์สำหรับมือถือของ Messenger ได้ตามปกติ

• webview_height_ratio
• webview_share_button
• ปุ่มนำทางย้อนกลับ
• ชื่อกล่องโต้ตอบ
• การปิดตัวแสดงหน้าเว็บผ่านการเปลี่ยนเส้นทาง URL

การแก้ไขปัญหา

หากคุณไม่สามารถเรียกใช้ SDK ส่วนขยายของ Messenger จากหน้าของคุณได้ ให้พิจารณาข้อต่างๆ ต่อไปนี้

• เมื่อคุณกำลังเปิดตัวแสดงหน้าเว็บจากเมนูถาวรหรือปุ่ม ให้ตรวจสอบให้แน่ใจว่าพารามิเตอร์ messenger_extensions ได้รับการตั้งค่าเป็น trueหากผู้ใช้เปิดตัวแสดงหน้าเว็บผ่านข้อความที่แชร์ ส่วนขยายของ Messenger จะสามารถทำงานได้โดยที่ผู้ใช้ไม่จำเป็นต้องเคยพูดคุยกับบอทมาก่อน

• ตรวจสอบว่าคุณได้ไวท์ลิสต์โดเมนที่ใช้โฮสต์หน้านั้นแล้ว

• ตรวจสอบว่ามี JavaScript SDK รวมอยู่ในทุกหน้าที่ใช้ส่วนขยาย

• ตรวจสอบให้แน่ใจว่าคุณไม่ได้พยายามเรียกใช้ฟังก์ชั่นใดๆ ก่อนที่ SDK จะโหลดเสร็จสิ้น ให้ใช้ window.extAsyncInitตามที่อธิบายไว้ที่นี่เพื่อแจ้งให้ทราบเมื่อโหลดเสร็จเรียบร้อยแล้ว

• ตรวจสอบให้แน่ใจว่าหน้านั้นใช้ HTTPS และไม่ได้มีพอร์ตใดๆ ที่ไม่ได้มาตรฐาน