วิธีติดตั้ง Facebook messenger plugin สำหรับเว็บไซต์

<h1>วิธีติดตั้ง Facebook messenger plugin สำหรับเว็บไซต์<&sol;h1>&NewLine;<p><&sol;br><br &sol;>&NewLine;<strong>วิธีติดตั้ง facebook messenger plugin สำหรับเว็บไซต์<&sol;strong><&sol;p>&NewLine;<p>facebook messenger plugin สำหรับเว็บไซต์นั้นยังเป็นเวอร์ชั่นเบต้าอยู่ แต่ถึงจะยังเป็น Beta version ก็ได้รับความนิยมนำไปติดตั้งบนเว็บไซต์แล้วมากมาย สังเกตุได้จากหลาย ๆ เว็บไซต์ทั่วโลกที่ปกติจะเป็น Live Chat เจ้าอื่น ๆ ปัจจุปันจะถูกแทนที่ด้วยไอคอนของ facebook messenger<&excl;--more--><&sol;p>&NewLine;<blockquote><p>ประโยชน์ของการใช้ Facebook Messenger Plugin แทน Live Chat ตัวอื่น ๆ คือในเมื่อเราเข้า Facebook เป็นประจำอยู่แล้ว ก็ไม่จำเป็นต้องไปเปิด Admin Panel ของแชทตัวอื่น ๆ เพิ่ม ไม่เปลือง Browser Tab ไม่รกหูรกตา<&sol;p><&sol;blockquote>&NewLine;<p><&sol;br><br &sol;>&NewLine;เท่าที่ได้ลองใช้งาน ต้องบอกว่าฟังก์ชั่นค่อนข้างครอบคลุม ยิ่งโดยเฉพาะคนที่ทำแฟนเพจคู่กับเว็บไซต์อยู่แล้ว จะเป็นประโยชน์มาก ๆ ครับ ลองมาดูกันว่า เราจะสามารถติดตั้งเจ้า Facebook chat plugin นี้ได้อย่างไร<&sol;p>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>วิธีติดตั้ง facebook messenger plugin<&sol;h4>&NewLine;<ul>&NewLine;<li><strong>1&period; ก่อนการติดตั้ง plugin ให้ติดตั้ง Facebook javascript SDK ก่อน<&sol;strong>&NewLine;<p>แน่นอนครับว่า ตัวเว็บต้องติดตั้ง facebook javascript SDK ก่อน ก็จะมีโค๊ดประมาณนี้ครับ<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " > &NewLine;window&period;fbAsyncInit &equals; function&lpar;&rpar; &lbrace; &NewLine; FB&period;init&lpar;&lbrace; &NewLine; appId &colon; 'app&lowbar;id'&comma; &sol;&sol; app id สามารถหาได้จากการสร้าง fb apps ดูลิงค์ด้านล่าง &NewLine; autoLogAppEvents &colon; true&comma; &NewLine; xfbml &colon; true&comma; &NewLine; version &colon; 'v2&period;12' &NewLine; &rcub;&rpar;&semi; &NewLine; &rcub;&semi; &NewLine; &NewLine; &lpar;function&lpar;d&comma; s&comma; id&rpar;&lbrace; &NewLine; var js&comma; &fjlig;s &equals; d&period;getElementsByTagName&lpar;s&rpar;&lbrack;0&rsqb;&semi; &NewLine; if &lpar;d&period;getElementById&lpar;id&rpar;&rpar; &lbrace;return&semi;&rcub; &NewLine; js &equals; d&period;createElement&lpar;s&rpar;&semi; js&period;id &equals; id&semi; &NewLine; js&period;src &equals; "https&colon;&sol;&sol;connect&period;facebook&period;net&sol;th&lowbar;TH&sol;sdk&period;js"&semi; &NewLine; &fjlig;s&period;parentNode&period;insertBefore&lpar;js&comma; &fjlig;s&rpar;&semi; &NewLine; &rcub;&lpar;document&comma; 'script'&comma; 'facebook-jssdk'&rpar;&rpar;&semi;<&sol;pre>&NewLine;<p>วิธีสมัคร Facebook developer และสร้าง Facebook app เพื่อเอา app id ให้ดูได้จากกระทู้ด้านล่าง<br &sol;>&NewLine;<a href&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;วิธีสมัครและใช้งาน-facebook-developer-account&sol;" target&equals;"&lowbar;blank">วิธีสมัครและใช้งาน Facebook Developer Account<&sol;a><&sol;p>&NewLine;<&sol;li>&NewLine;<li><strong>2&period; อธิบายรหัสต้นแบบของ plugin<&sol;strong>&NewLine;<ul>&NewLine;<li><strong>รหัสต้นแบบจะมีหลักอยู่ประมาณนี้นะครับ<&sol;strong><&sol;li>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&lt&semi;div class&equals;"fb-customerchat" &NewLine; page&lowbar;id&equals;"&lt&semi;PAGE&lowbar;ID&gt&semi;" &NewLine; ref&equals;"&lt&semi;OPTIONAL&lowbar;WEBHOOK&lowbar;PARAM&gt&semi;" &NewLine; theme&lowbar;color&equals;"&lt&semi;HEX&lowbar;COLOR&lowbar;CODE&gt&semi;" &NewLine; logged&lowbar;in&lowbar;greeting&equals;"&lt&semi;GREETING&lowbar;MESSAGE&lowbar;FOR&lowbar;LOGGED&lowbar;IN&lowbar;USERS&gt&semi;" &NewLine; logged&lowbar;out&lowbar;greeting&equals;"&lt&semi;GREETING&lowbar;MESSAGE&lowbar;FOR&lowbar;LOGGED&lowbar;OUT&lowbar;USERS&gt&semi;"&gt&semi; &NewLine;&lt&semi;&sol;div&gt&semi;<&sol;pre>&NewLine;<li><strong>page&lowbar;id&equals;&&num;8221&semi;PAGE&lowbar;ID&&num;8221&semi;<&sol;strong><&sol;li>&NewLine;<p>ให้เราใส่รหัสของเพจลงไป สามารถหาได้โดยไปที่เมนูเกี่ยวกับ เลื่อนลงไปล่างสุดจะมีหัวข้อชื่อว่า ID เพจ<&sol;p>&NewLine;<li><strong>ref&equals;&&num;8221&semi;OPTIONAL&lowbar;WEBHOOK&lowbar;PARAM&&num;8221&semi;<&sol;strong><&sol;li>&NewLine;<p>ส่วนนี้จะเป็นส่วนที่เราจะใช้ปรับให้ตัว Messanger ทีความสามารถมากขึ้น แต่ถ้าเราต้องการติดตั้งแชทธรรมดาก็ไม่ต้องสนใจ ให้ลบบรรทัดนี้ออกไปได้เลย<&sol;p>&NewLine;<li><strong>theme&lowbar;color&equals;&&num;8221&semi;HEX&lowbar;COLOR&lowbar;CODE&&num;8221&semi;<&sol;strong><&sol;li>&NewLine;<p>ช่องนี้สำหรับเปลี่ยนสีพื้นหลังของไอคอน messenger ให้เราใส่รหัสสีแบบ hex เช่น &num;FF0000 สามารถดูรหัสสีได้ที่ <a href&equals;"http&colon;&sol;&sol;www&period;color-hex&period;com" target&equals;"&lowbar;blank">www&period;color-hex&period;com<&sol;a><&sol;p>&NewLine;<li><strong>logged&lowbar;in&lowbar;greeting&equals;&&num;8221&semi;GREETING&lowbar;MESSAGE&lowbar;FOR&lowbar;LOGGED&lowbar;IN&lowbar;USERS&&num;8221&semi;<&sol;strong><&sol;li>&NewLine;<p>สำหรับกำหนดข้อความทักทาย กรณีที่คนเข้าเว็บไซต์เรา เข้าระบบเฟสบุ้คอยู่<&sol;p>&NewLine;<li><strong>logged&lowbar;in&lowbar;greeting&equals;&&num;8221&semi;GREETING&lowbar;MESSAGE&lowbar;FOR&lowbar;LOGGED&lowbar;OUT&lowbar;USERS&&num;8221&semi;<&sol;strong><&sol;li>&NewLine;<p>สำหรับกำหนดข้อความทักทาย กรณีที่คนเข้าเว็บไซต์เรา ไม่ได้เข้าระบบเฟสบุ้ค&NewLine;<&sol;ul>&NewLine;<&sol;li>&NewLine;<li><strong>3&period; กำหนด Whitelisted Domains<&sol;strong><br &sol;>&NewLine;ในขั้นตอนนี้คือการกำหนดว่า โดเมนไหน หรือที่อยู่เว็บไซต์อะไรที่เราต้องการจะติดตั้ง Facebook Messenger Plugin ให้เราไปที่ facebook page ที่เราจะใช้แชทกับคนเข้าเว็บ จากนั้นไปที่เมนู การตั้งค่า -> แพลตฟอร์ม Messenger เลื่อนลงไปด้านล่างมองหาหัวข้อ Whitelisted Domains จากนั้นพิมพ์ชื่อโดเมนของเราลงไป ตัวอย่างดังภาพด้านล่าง<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2018&sol;02&sol;ติดตั้ง-facebook-messenger-plugin-for-website&period;jpg" alt&equals;"ติดตั้ง-facebook-messenger-plugin-for-website" &sol;><br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<p><strong>เงื่อนไขในการใส่ Whitelisted Domains จะต้อง<&sol;strong><&sol;p>&NewLine;<ul>&NewLine;<li>1&period; มีโดเมนที่ติดตั้ง SSL Certificates หรือใช้ HTTPS นั่นเอง เช่น https&colon;&sol;&sol;www&period;codebee&period;co&period;th<&sol;li>&NewLine;<li>2&period; กำหนดเป็น IP Address ไม่ได้<&sol;li>&NewLine;<li>3&period; กำหนดเป็น localhost ไม่ได้<&sol;li>&NewLine;<&sol;ul>&NewLine;<p><&sol;br>&NewLine;<&sol;li>&NewLine;<li><strong>4&period; นำรหัสที่พร้อมแล้วไปแปะบนเว็บไซต์<&sol;strong><br &sol;>&NewLine;เมื่อเราทำตามขั้นตอนดังที่กล่าวมาทั้งหมดแล้ว เราก็จะได้ code ที่สมบูรณ์ พร้อมสำหรับติดตั้งในหน้าเว็บไซต์ประมาณนี้<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&lt&semi;div class&equals;"fb-customerchat" &NewLine; page&lowbar;id&equals;"230843647112794" &NewLine; theme&lowbar;color&equals;"&num;d8322b" &NewLine; logged&lowbar;in&lowbar;greeting&equals;"สวัสดีครับ" &NewLine; logged&lowbar;out&lowbar;greeting&equals;"สวัสดีครับ"&gt&semi; &NewLine;&lt&semi;&sol;div&gt&semi;<&sol;pre>&NewLine;<p>จะสังเกตุว่าส่วนไหนที่เราไม่ใช้งาน เราก็ลบทิ้งไปเลย จากนั้นให้นำไปติดตั้งในส่วนเหนือแท็กปิด body หรือจะติดตั้งที่อื่นก็ได้เช่นกันครับ ตัวแชทจะสามารถใช้งานได้เหมือนกัน<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;แต่ด้วยที่ plugin เป็นการโหลดแสดงผลแบบ iframe อาจจะไปกระทบกับส่วนอื่นๆ ของเว็บไซต์ได้ แนะนำว่าให้ติดตั้งเหนือแท็กปิด body จะดีกว่า<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;ทดสอบโดยการ refresh หน้าเว็บไซต์ก็จะปรากฏไอคอน Facebook Messenger ลองปรับแต่งสีให้เข้ากับธีมเว็บไซต์ตามเหมาะสมครับ<&sol;p>&NewLine;<blockquote><p>สามารถดูตัวอย่างได้ที่หน้าเว็บไซต์หลักครับ <a href&equals;"http&colon;&sol;&sol;www&period;codebee&period;co&period;th" target&equals;"&lowbar;blank">codebee&period;co&period;th<&sol;a><&sol;p><&sol;blockquote>&NewLine;<&sol;li>&NewLine;<&sol;ul>&NewLine;