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



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

facebook messenger plugin สำหรับเว็บไซต์นั้นยังเป็นเวอร์ชั่นเบต้าอยู่ แต่ถึงจะยังเป็น Beta version ก็ได้รับความนิยมนำไปติดตั้งบนเว็บไซต์แล้วมากมาย สังเกตุได้จากหลาย ๆ เว็บไซต์ทั่วโลกที่ปกติจะเป็น Live Chat เจ้าอื่น ๆ ปัจจุปันจะถูกแทนที่ด้วยไอคอนของ facebook messenger

ประโยชน์ของการใช้ Facebook Messenger Plugin แทน Live Chat ตัวอื่น ๆ คือในเมื่อเราเข้า Facebook เป็นประจำอยู่แล้ว ก็ไม่จำเป็นต้องไปเปิด Admin Panel ของแชทตัวอื่น ๆ เพิ่ม ไม่เปลือง Browser Tab ไม่รกหูรกตา



เท่าที่ได้ลองใช้งาน ต้องบอกว่าฟังก์ชั่นค่อนข้างครอบคลุม ยิ่งโดยเฉพาะคนที่ทำแฟนเพจคู่กับเว็บไซต์อยู่แล้ว จะเป็นประโยชน์มาก ๆ ครับ ลองมาดูกันว่า เราจะสามารถติดตั้งเจ้า Facebook chat plugin นี้ได้อย่างไร


วิธีติดตั้ง facebook messenger plugin

  • 1. ก่อนการติดตั้ง plugin ให้ติดตั้ง Facebook javascript SDK ก่อน

    แน่นอนครับว่า ตัวเว็บต้องติดตั้ง facebook javascript SDK ก่อน ก็จะมีโค๊ดประมาณนี้ครับ

    วิธีสมัคร Facebook developer และสร้าง Facebook app เพื่อเอา app id ให้ดูได้จากกระทู้ด้านล่าง
    วิธีสมัครและใช้งาน Facebook Developer Account

  • 2. อธิบายรหัสต้นแบบของ plugin
    • รหัสต้นแบบจะมีหลักอยู่ประมาณนี้นะครับ
    • page_id=”PAGE_ID”
    • ให้เราใส่รหัสของเพจลงไป สามารถหาได้โดยไปที่เมนูเกี่ยวกับ เลื่อนลงไปล่างสุดจะมีหัวข้อชื่อว่า ID เพจ

    • ref=”OPTIONAL_WEBHOOK_PARAM”
    • ส่วนนี้จะเป็นส่วนที่เราจะใช้ปรับให้ตัว Messanger ทีความสามารถมากขึ้น แต่ถ้าเราต้องการติดตั้งแชทธรรมดาก็ไม่ต้องสนใจ ให้ลบบรรทัดนี้ออกไปได้เลย

    • theme_color=”HEX_COLOR_CODE”
    • ช่องนี้สำหรับเปลี่ยนสีพื้นหลังของไอคอน messenger ให้เราใส่รหัสสีแบบ hex เช่น #FF0000 สามารถดูรหัสสีได้ที่ www.color-hex.com

    • logged_in_greeting=”GREETING_MESSAGE_FOR_LOGGED_IN_USERS”
    • สำหรับกำหนดข้อความทักทาย กรณีที่คนเข้าเว็บไซต์เรา เข้าระบบเฟสบุ้คอยู่

    • logged_in_greeting=”GREETING_MESSAGE_FOR_LOGGED_OUT_USERS”
    • สำหรับกำหนดข้อความทักทาย กรณีที่คนเข้าเว็บไซต์เรา ไม่ได้เข้าระบบเฟสบุ้ค

  • 3. กำหนด Whitelisted Domains
    ในขั้นตอนนี้คือการกำหนดว่า โดเมนไหน หรือที่อยู่เว็บไซต์อะไรที่เราต้องการจะติดตั้ง Facebook Messenger Plugin ให้เราไปที่ facebook page ที่เราจะใช้แชทกับคนเข้าเว็บ จากนั้นไปที่เมนู การตั้งค่า -> แพลตฟอร์ม Messenger เลื่อนลงไปด้านล่างมองหาหัวข้อ Whitelisted Domains จากนั้นพิมพ์ชื่อโดเมนของเราลงไป ตัวอย่างดังภาพด้านล่าง


    ติดตั้ง-facebook-messenger-plugin-for-website

    เงื่อนไขในการใส่ Whitelisted Domains จะต้อง

    • 1. มีโดเมนที่ติดตั้ง SSL Certificates หรือใช้ HTTPS นั่นเอง เช่น https://www.codebee.co.th
    • 2. กำหนดเป็น IP Address ไม่ได้
    • 3. กำหนดเป็น localhost ไม่ได้


  • 4. นำรหัสที่พร้อมแล้วไปแปะบนเว็บไซต์
    เมื่อเราทำตามขั้นตอนดังที่กล่าวมาทั้งหมดแล้ว เราก็จะได้ code ที่สมบูรณ์ พร้อมสำหรับติดตั้งในหน้าเว็บไซต์ประมาณนี้

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


    แต่ด้วยที่ plugin เป็นการโหลดแสดงผลแบบ iframe อาจจะไปกระทบกับส่วนอื่นๆ ของเว็บไซต์ได้ แนะนำว่าให้ติดตั้งเหนือแท็กปิด body จะดีกว่า


    ทดสอบโดยการ refresh หน้าเว็บไซต์ก็จะปรากฏไอคอน Facebook Messenger ลองปรับแต่งสีให้เข้ากับธีมเว็บไซต์ตามเหมาะสมครับ

    สามารถดูตัวอย่างได้ที่หน้าเว็บไซต์หลักครับ codebee.co.th

เทคนิคเพิ่มความเร็วเว็บไซต์ Google Page Speed ด้วย... เทคนิคเพิ่มความเร็วเว็บไซต์ Google Page Speed ด้วย Google Fonts เทคนิคเพิ่มความเร็วเว็บไซต์ Google Page Speed Insight ตอน : Google Fonts ทดสอบโดยใช้ ...
6 สุดยอด WordPress Plugins สำหรับ SEO... เวิร์ดเพรส คือ เครื่องมือสำหรับทำเว็บไซต์สำเร็จรูปที่ได้รับความนิยม และทรงประสิทธิภาพมาก ๆ ทุกคนสามารถดาวน์โหลดและติดตั้ง จัดการเนื้อหาบนเว็บไซต์...
วิธี Query ข้อมูลใน MySQL แบบกำหนดช่วงเวลา... ใน MySQL เราสามารถ Query ข้อมูลมาแสดงผล แบบกำหนดช่วงเวลาที่เกิดขึ้นของข้อมูลแต่ละ row ได้ เพื่อจำกัดขอบเขตของข้อมูล ซึ่งอาจจะใช้สำหรับการออกรายงา...
ใช้งาน MySQL บน AWS ( Amazon Web Service )... AWS หรือ Amazon Web Service คือ แพลตฟอร์มคลาวด์ ( Cloud Platform ) เหตุผลที่เรียกว่า แพลตฟอร์มคลาวด์ เพราะว่า AWS มีรูปแบบการให้บริการถึง 175 บริ...

By codebee

- Programmer & Writer