Facebook, บทความ, ,

Facebook Messenger on Website แปะ Facebook chat บนเว็บไซต์

หลังจากที่ Facebook ได้เปิดตัว Messenger Platform เวอร์ชั่น 2.2  อย่างเป็นทางการ ก็ได้มีการเพิ่มความสามารถใหม่ๆ ให้กับ Messenger มากมาย อาธิเช่น media template ที่เป็นเท็มเพลตสำหรับการสร้างสื่อ และการปฎิสัมพันธ์กับผู้ใช้ในแชท Messenger หรือจะเป็น  Broadcast API (beta) ซึ่งเป็น API สำหรับการบรอดแคสของ Facebook โดยเฉพาะ และอื่นๆอีกมากมาย ซึ่งสามารถเข้าไปอ่าน Blog ของทางผู้พัฒนาได้ ทาง https://messenger.fb.com/blog

หนึ่งความสามารถใหม่ ที่มาพร้อมกับ Messenger Platform เวอร์ชั่น 2.2 นั่นคือ Customer Chat Plugin ซึ่งเป็นปลั๊กอินสำหรับเว็บไซต์ โดยเราสามารถที่จะนำ Facebook Messenger Chat Plugin มาติดตั้งบนเว็บไซต์ของเราได้ทันที ซึ่งข้อดีก็คือผู้ใช้งานเว็บไซต์ สามารถ Inbox หาแฟนเพจของเราได้ทันทีผ่านหน้าเว็บไซต์ อีกทั้งสามารถพูดคุยโต้ตอบกันกับแฟนเพจได้บนหน้าเว็บไซต์ได้เลย ไม่จำเป็นต้องเข้าไปคุยกันใน Messenger หรือเว็บ Facebook อีกต่อไป สำหรับตัวอย่างวันนี้ผมจะแนะนำวีธีติดตั้ง Customer Chat Plugin บนเว็บ  นะครับ ส่วนใครที่เป็นเว็บที่เขียนเอง หรือเป็น CMS อื่นๆ ก็สามารถลองใช้วิธีนี้ได้ครับ ซึ่งจะแตกต่างกันไม่มาก ว่าแล้วก็ไปลงมือกัน !

วิธีเอาแชท Facebook มาใส่บนเว็บ WordPress

1.หา Facebook Fanpage ID ของเรา โดยให้เข้าไปที่ https://www.facebook.com/pg/ชื่อเพจของเรา/about/ หรือเข้าตามรูปภาพก้ได้นะครับ

คลิกดูทั้งหมด ในช่องเกี่ยวกับ ของแฟนเพจ

เมื่อเข้าไปหน้า About หรือ เกี่ยวกับ ให้มองหารูปธงที่มีคำว่า ‘ID เพจ’ แบบในภาพเลยครับ ให้เราทำการ Copy รหัส ID เพจ ของเราเก็บไว้ครับ

ID เพจ

2.เพิ่ม White List Domain เพื่อ อนุญาติใหม้เว็บไซต์ที่เราระบุ สามารถใช้ Customer Chat Plugin บนเว็บนั้นได้ ให้เราเข้าไปที่ การตั้งค่า>แพลตฟอร์ม Messenger>Whitelisted Domains และทำการกรอกชื่อเว็บไซต์ของเราลงไป จากนั้นกด Save ได้เลย

กำหนด Whitelisted Domains บนแฟนเพจ

3.ตั้งค่า WordPress ของเรา โดยให้เข้าไปที่ http://ชื่อเว็บของเรา/wp-admin/theme-editor.php หรือเมนู Appearance>Editor จากนั้นคลิกเลือกไฟล์ function.php ในเมนูด้านขวา

เปิดไฟล์ function.php ของ WordPress

เมื่อเลือกไฟล์แล้ว ให้เราทำการ เพิ่ม Code ลงไปในไฟล์นี้ โดยทำแหน่งที่นำ Code ไปวาง ต้องอยู่บรรทัดถัดจาก <?php ดังภาพตัวอย่าง ส่วนที่ตีกรอบสีแดง คือ Code ที่ผมนำไปวาง

นำ code แชท facebook ไปวาง

ในส่วนของ Code ด้านล่างนี้ ให้ก็ปปี้ไปวางตำแหน่งที่ผมได้กล่าวไว้ได้เลยครับผม โดยจะมีหนึ่งจุดที่ต้องแก้ไข คือ page_id=”เลข ID เพจของคุณ” ให้เรานำเลขเพจของเรา ที่ได้มาในขั้นตอนที่ 1 มาแทนที่ตรงนี้ อย่างเช่นเพจของผมก็จะได้เป็น page_id=”128426217686118”

  1. // Messenger Chat
  2. if ( ! function_exists(‘messenger_chat’) ) {
  3. function messenger_chat() {
  4. echo ‘<div class=”fb-customerchat” page_id=”เลข ID เพจของคุณ” minimized=”false”></div>’;
  5. }
  6. }
  7. // FB SDK
  8. if ( ! function_exists(‘fb_sdk’) ) {
  9. function fb_sdk() {
  10. echo ‘<script>window.fbAsyncInit=function(){FB.init({appId : “1678638095724206”, autoLogAppEvents : true, xfbml : true, version : “v2.11″});}; (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=”https://connect.facebook.net/en_US/sdk.js”; fjs.parentNode.insertBefore(js, fjs);}(document, “script”, “facebook-jssdk”));</script>’;
  11. }
  12. }
  13. add_action(‘wp_footer’, ‘messenger_chat’);
  14. add_action(‘wp_head’, ‘fb_sdk’);

เมื่อนำ Code ไปวาง และแก้ไข ‘IDเพจ’ เสร็จแล้ว ก็คลิกที่ปุ่ม Save ได้เลยครับผม หากไม่มีอะไรผิดพลาด ก็จะได้แชทเฟสบุคในเว็บไซต์ หน้าตาประมาณในภาพเลยครับผม

แชท Facebook เมื่ออยู่บนเว็บ

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

เริ่มการแชทเฟสบุค บนเว็บ

เจ๋งใช่มั้ยหละ หากใครที่ทำตามแล้วไม่ได้ หรือต้องการสอบถามเรื่องต่างๆจากทีมงาน  ก็สามารถ ทดลองใช้งาน Customer Chat Plugin ที่ผมได้ติดตั้งบน OPDEV ได้เลยนะครับ จะมีแชทบอทน่ารักๆ เคยต้อนรับทุกๆท่านเลย วันนี้ก็ขอจบบทความแรกในหมวดหมู่ Tips&Tricks ไว้เพียงเท่านี้นะครับ สวัสดีครับ

@Imakeplus รับทำเฟสบุ๊คบอท Facebook chat bot api