สวัสดีครับ หลังจากที่ Facebook ได้เปิดตัว Messenger Platform เวอร์ชั่น 2.2 อย่างเป็นทางการ เมื่อวันที่ 7 พฤศจิกาที่ผ่านมา ก็ได้มีการเพิ่มความสามารถใหม่ๆ ให้กับ 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 บนเว็บ WordPress นะครับ ส่วนใครที่เป็นเว็บที่เขียนเอง หรือเป็น CMS อื่นๆ ก็สามารถลองใช้วิธีนี้ได้ครับ ซึ่งจะแตกต่างกันไม่มาก ว่าแล้วก็ไปลงมือกัน !
วิธีเอาแชท Facebook มาใส่บนเว็บ WordPress
1.หา Facebook Fanpage ID ของเรา โดยให้เข้าไปที่ https://www.facebook.com/pg/ชื่อเพจของเรา/about/ หรือเข้าตามรูปภาพก้ได้นะครับ
เมื่อเข้าไปหน้า About หรือ เกี่ยวกับ ให้มองหารูปธงที่มีคำว่า ‘ID เพจ’ แบบในภาพเลยครับ ให้เราทำการ Copy รหัส ID เพจ ของเราเก็บไว้ครับ
2.เพิ่ม White List Domain เพื่อ อนุญาติใหม้เว็บไซต์ที่เราระบุ สามารถใช้ Customer Chat Plugin บนเว็บนั้นได้ ให้เราเข้าไปที่ การตั้งค่า>แพลตฟอร์ม Messenger>Whitelisted Domains และทำการกรอกชื่อเว็บไซต์ของเราลงไป จากนั้นกด Save ได้เลย
3.ตั้งค่า WordPress ของเรา โดยให้เข้าไปที่ http://ชื่อเว็บของเรา/wp-admin/theme-editor.php หรือเมนู Appearance>Editor จากนั้นคลิกเลือกไฟล์ function.php ในเมนูด้านขวา
เมื่อเลือกไฟล์แล้ว ให้เราทำการ เพิ่ม Code ลงไปในไฟล์นี้ โดยทำแหน่งที่นำ Code ไปวาง ต้องอยู่บรรทัดถัดจาก <?php ดังภาพตัวอย่าง ส่วนที่ตีกรอบสีแดง คือ Code ที่ผมนำไปวาง
ในส่วนของ Code ด้านล่างนี้ ให้ก็ปปี้ไปวางตำแหน่งที่ผมได้กล่าวไว้ได้เลยครับผม โดยจะมีหนึ่งจุดที่ต้องแก้ไข คือ page_id=”เลข ID เพจของคุณ” ให้เรานำเลขเพจของเรา ที่ได้มาในขั้นตอนที่ 1 มาแทนที่ตรงนี้ อย่างเช่นเพจของผมก็จะได้เป็น page_id=”128426217686118”
// Messenger Chat
if ( ! function_exists(‘messenger_chat’) ) {
function messenger_chat() {
echo ‘<div class=”fb-customerchat” page_id=”เลข ID เพจของคุณ” minimized=”false”></div>’;
}
}
// FB SDK
if ( ! function_exists(‘fb_sdk’) ) {
function fb_sdk() {
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>’;
}
}
add_action(‘wp_footer’, ‘messenger_chat’);
add_action(‘wp_head’, ‘fb_sdk’);
ให้เป็นภาษาไทย
https://connect.facebook.net/th_TH/sdk.js
เมื่อนำ Code ไปวาง และแก้ไข ‘IDเพจ’ เสร็จแล้ว ก็คลิกที่ปุ่ม Save ได้เลยครับผม หากไม่มีอะไรผิดพลาด ก็จะได้แชทเฟสบุคในเว็บไซต์ หน้าตาประมาณในภาพเลยครับผม
หากผู้ชมเว็บไซต์ของเรา คลิกที่ปุ่ม Chat Now ก็จะมีกล่องข้อความขึ้นมาเหมือนใน Facebook เลยครับผม สามารถพูดคุยโต้ตอบระหว่างแอดมินเพจกับผู้ชมเว็บไซต์ ได้สดๆ บนหน้าเว็บไซต์ของเราได้ทันทีเลย
CR:opdev.men
