วิธีเปลี่ยนสี และข้อความต้อนรับ ของ Facebook Chat Widget บนเว็บไซต์ของเรา

สวัสดีครับ หลังจากที่ได้อัพบทความ วิธีเอาแชท Facebook มาใส่บนเว็บ WordPress (Facebook Messenger on WordPress) ไปได้ระยะเวลาหนึ่ง ก็ได้รับความนิยมเป็นอย่างมาก บางคอมเม้นท์มาฝากบอกว่า แบบปลั๊กอินก็มีนะสามารถหาติดตั้งได้เลย สำหรับท่านที่ไม่สะดวกเอา Code ไปติดตั้งเองก็สามารถใช้ปลั๊กอินแทนได้ครับ แต่ว่าถ้าใช้วิธีในบทความผมก็จะปลอดภัยกว่านิดนึงเพราะผมนำ Code จาก Facebook โดยตรงไปติดตั้งเลย ช่วยลดความเสี่ยงในกรณีปลั๊กอินที่เราโหลดมาใช้มีบัค หรือช่องโหว่ต่างๆ ซึ่งอาจทำให้เว็บของเราไม่ปลอดภัยได้ ทั้งนี้ก็ขึ้นอยู่กับความสะดวกของแต่ละท่านเลยครับผม หากใครที่ยังไม่ได้อ่านบทความแรกแนะนำให้ทำตามบทความแรกก่อนครับผม วิธีเอาแชท Facebook มาใส่บนเว็บ

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

เปลี่ยนข้อความต้อนรับ Facebook แชท บน Wordpress

หากทำตามบทความจาก OPDEV ในก่อนหน้านี้ ข้อความต้อนรับจะเป็นข้อความพื้นฐานที่ facebook ตั้งไว้เป็น default ซึ่งหากเป็นภาษไทยก็จะเป็นประโยคว่า “สวัสดี มีอะไรให้ฉันช่วยไหม” หรือถ้าเป็นภาษาอังกฤษก็จะเป็นคำว่า “HI! How Can we help you ?” ในขั้นตอนนี้เราจะมาเปลี่ยนข้อความต้อนรับนี้กันครับ

ข้อความต้อนรับแบบพื้นฐาน (Default)

ให้เราไปที่ไฟล์ function.php(ที่เราได้เอา code มาใส่ไว้) จากนั้นมองหา code ที่ขึ้นต้นด้วย // Messenger Chat จากนั้นเพิ่ม ให้แทรก code เพิ่มเติมลงไปในตำแหน่งด้านหลังของ page_id=”xxxxxxxxxxxxxxxxxxx” ด้วย code นี้ logged_in_greeting=”ข้อความต้อนรับที่ต้องการจะตั้ง” และ logged_out_greeting=”ข้อความต้อนรับที่ต้องการจะตั้ง” หลังจากเติม code เรียบร้อยแล้วก็จะได้เป็นดังภาพด้านล่าง จากนั้นคลิกปุ่ม Update file เป็นอันเสร็จสิ้นขั้นตอน (สามารถแทรกEmoji ร่วมกับข้อความได้)

// Messenger Chat
if ( ! function_exists('messenger_chat') ) {
function messenger_chat() {
echo '<div class="fb-customerchat" page_id="128426217686118" logged_in_greeting="🙏 สวัสดีครับ สอบถามได้นะครับ" logged_out_greeting="🙏 สวัสดีครับ สอบถามได้นะครับ"> minimized="false"></div>';
}
}
ผลลัพท์ของ ข้อความต้อนรับ ที่ได้ปรับแต่งแล้ว

เปลี่ยนสีปุ่ม และสีกล่องข้อความ

สีพื้นฐาน ของกล่องข้อความ+ปุ่ม (Default Theme Color)
สีพื้นฐาน ของกล่องข้อความ+ปุ่ม

โดยพื้นฐานแล้วสีของปุ่ม และกล่องข้อความจะเป็นสีฟ้า เพราะเป็นสีพื้นฐานของ Facebook Messenger แต่ว่า Facebook ก็เปิดโอกาศให้เราสามารถที่จะเปลี่ยนสีในส่วนตรงนี้ได้เช่นกัน เพื่อให้เข้ากับโทนสีของเว็บไซต์เรา โดยวิธีการเปลี่ยนสีของกล่องแชท และปุ่มของ Facebook Messenger บนเว็บเรานั้น สามารถให้ใช้วิธีเหมือนกับการเปลี่ยนข้อความต้อนรับได้เลย โดยที่เราเพิ่ม theme_color=”#โค๊ดสี6หลัก” ลงไปด้านหลัง page_id=”xxxxxxxxxxxxxxxxxxx” โดยที่ตัวหนังสือสีแดงคือ code สีของปุ่มและกรอบข้อความของเรา อยากได้สีอะไรจัดไปโล๊ด (ดู code สีคลิก)

// Messenger Chat
if ( ! function_exists('messenger_chat') ) {
function messenger_chat() {
echo '<div class="fb-customerchat" page_id="128426217686118" theme_color="#13cf13" logged_in_greeting="🙏 สวัสดีครับ สอบถามได้นะครับ" logged_out_greeting="🙏 สวัสดีครับ สอบถามได้นะครับ"> minimized="false"></div>';
}
}
ผลลัพท์หลังจากเปลี่ยนสีแชท
ผลลัพท์หลังจากเปลี่ยนสีแชท

Originally published at OPDEV.MEN.