วิธีใส่ code ช่องแสดงความเห็น (comment) ของ facebook ลงในเว็บไซต์

web developper สามารถนำส่วนเสริม (Plugins) ของ facebook มาใส่ในเว็บไซต์ของเราได้ ฟรี และ ง่าย เพื่อให้ผู้เข้าชม สามารถแสดงความเห็นด้วยบัญชีผู้ใช้ facebook ของตัวเองได้ทันที และความเห็นของผู้เข้าชมจะแชร์ไปบน timeline ของผู้เข้าชม เป็นการเพิ่มการเข้าชม (Traffic) ให้เว็บไซต์ของเราอีกทางหนึ่งด้วย

ขั้นตอนมี ดังนี้ ครับ

1. เข้าระบบด้วยบัญชี facebook ของนักพัฒนาเอง (บัญชี facebook ปกติของเราเองนี่แหละครับ) แล้วไปที่ลิงค์นี้ https://developers.facebook.com/
    
2. เนื่องจาก facebook ปรับปรุงหน้าเว็บสำหรับนักพัฒนาอยู่เป็นระยะ ทำให้หน้าแสดงผลจะเปลี่ยนไปเสมอ ผมจึงขอละวิธีที่จะเข้าไปเอาโค้ดแบบละเอียดนะครับ
   
   แต่สามารถอธิบายคร่าว ๆ ได้ คือ นักพัฒนาจะต้องสร้าง App ID ก่อน เพื่อจะผูก Plugin นี้ไว้ใน App ID (ผมขอละวิธีการสร้าง App ID ซึ่งสามารถค้นหาบน Google ได้ มีผู้เขียนสอนไว้เยอะครับ)
   
   มองหาลิงค์ ที่มีคำว่า "Social Plugins" เมื่อเข้าไปแล้ว มองหาลิงค์ที่มีคำว่า Comments (ไม่ใช่ให้เราไปแสดงความเห็นนะครับ แต่มัน คือ ส่วนที่จะให้ระบบของ facebook ทำการสร้างโค้ดกล่องความเห็นให้นักพัฒนานำไปใช้ครับ)
   
   หลังจากนั้น มองหาลิงค์ที่มีคำว่า "Get Started" (ซึ่ง facebook ออกแบบส่วนนี้ให้นักพัฒนา แค่เลือก options ตามต้องการ แล้วระบบจะสร้าง code ให้นักพัฒนาโดยอัตโนมัติ
   
   แต่อย่างไรก็ตาม ถ้า facebook ไม่ได้เปลี่ยนแปลงรูปแบบการแสดงผล ในลิงค์ส่วนนี้ สามารถเข้าไปตามลิงค์นี้ https://developers.facebook.com/docs/plugins และ มองหาที่เมนูซ้ายมือ จะเห็นลิงค์คำว่า Social Plugins ให้คลิ๊ก และ จะแสดงรายการ Plugins ที่มีให้เห็นครับ
   
    
3. นักพัฒนาจะเข้ามาในหน้า Comments Plugin โดย facebook ตระเตรียม options ให้นักพัฒนาง่าย ๆ แค่ 4 options (โดยเมื่อเลือกแต่ละ option เสร็จ facebook จะแสดงตัวอย่างด้านล่างให้เห็นทันทีด้วย) ดังนี้ครับ
   
   3.1 URL to comment on : ส่วนนี้ให้นักพัฒนากรอก URL ของเว็บไซต์ที่แสดงบทความนั้น ๆ (ไม่ใช่ URL ของหน้าหลัก) ที่ต้องการให้กล่องแสดงความเห็นของ facebook แสดงขึ้นมา
   
   3.2 Width : คือ ความกว้างของกล่องความเห็น ผมแนะนำให้เว้นว่างไว้
   
   3.3 Number of Posts : คือ จำนวนของความเห็นที่จะให้แสดงทันที (ถ้ามีคนแสดงความเห็นในบทความนั้น ๆ) เช่น กำหนดไว้ 15 ความเห็น เมื่อ facebook โหลดความเห็นที่มีมาแสดง จะจำกัดไว้แค่ 15 ความเห็น
   
   ถ้ามีมากกว่า 15 ความเห็น facebook ก็จะแสดงคำว่า "Load comments more" ต่อท้ายความเห็นสุดท้าย
   
   3.4 Color Scheme : คือ ธีมของสี ผมแนะนำให้เลือกเป็น light
   
    
4. เมื่อเลือกค่าในข้อที่สามได้ตามที่ต้องการแล้ว ก็สกอลลงมา ถัดจากกล่องความเห็นตัวอย่าง จะเห็นปุ่ม "Get Code"
    
5. facebook จะแสดง code ให้นักพัฒนาคัดลอกไปวางไว้ในหน้าเว็บไซต์ของตัวเอง ซึ่งแยกออกเป็น 2 ส่วน ดังรูป
   
   
   
   ในทางปฏิบัติจริง , ผมแนะนำว่า ให้ใส่ code ทั้ง 2 ส่วนต่อกันได้เลยครับ โดยใส่ในบรรทัดไหนก็ได้ที่ต้องการให้แสดงกล่องความเห็น แต่ต้องอยู่ภายในระหว่างแทค html < body > ... < /body > นะครับ
   
   เพราะสะดวกในการตรวจสอบ , แก้ไข และ ที่ผมจะเขียนวิธ๊ Advance ในการประยุกต์ใช้กับ css เพื่อให้กรอบแสดงความเห็นนั้นดูกลมกลืนกับธีมของเว็บไซต์
   
    
6. บันทึกไฟล์ และ ทำการ upload ขึ้น server และ Refresh หน้าเว็บเพจดูครับ

ปัญหาที่จะพบเจอหลังจากใส่ Code :

• ถ้าจำลอง server ไว้บนเครื่องตัวเอง และ เรียกผ่าน localhost กล่องความเห็นจะไม่แสดงผลนะครับ เพราะ facebook ไม่ถือว่า localhost เป็น DNS ที่ถูกต้อง ดังนั้น ต้องมีโดเมนเป็นของตัวเอง ที่ระบบเครือข่ายสามารถคืนค่าเลข DNS ได้
   
• กล่องความเห็นไม่แสดงผล ซึ่งมีหลายสาเหตุมาก แต่ที่พบเจอบ่อย คือ แคชของบราวเซอร์เอง ให้เคลียร์แคช ปิดบราวเซอร์และเปิดใหม่ , รหัส App ID ไม่ตรงกับที่สมัครเอาไว้
   
• กล่องความเห็นแสดงผลชิดซ้าย หรือ เต็มจอจนทำให้หน้าจอยืดทางขวาง และ ปรับเปลี่ยนสีพื้นได้แค่ 2 สี คือ ขาวกับดำ (ซึ่งผมจะมาเขียนวิธ๊ปรับด้วย CSS) ในครั้งต่อไปนะครับ
   
• กล่องความเห็น จะแสดงผลเฉพาะหน้าบทความนั้น ๆ ที่ URL ตรงกับที่ระบุไว้ใน code ของ facebook ที่คัดลอกมาเท่านั้น ปัญหานี้มักจะเกิดกับนักพัฒนาที่เขียนเว็บไซต์เอง และ รับค่าตัวแปรผ่าน URL
  
  เช่น ถ้าใช้ php เขียน และ มีลิงค์แบบนี้ yourweb.com/webboard/show.php?id=1
  
  จากตัวอย่างลิงค์ id=1 เป็นตัวกำหนดให้ไปเรียกข้อมูลจากฐานข้อมูล (หรือ ไฟล์ .txt) เรคคอร์ที่ 1 มาแสดงผล หากไม่มีค่าตัวแปร id แล้ว ก็จะไม่แสดงผล ซึ่ง ถ้ามีกระทู้สัก 100 กระทู้ ตัวเลขก็จะรันไปเป็น id=1 จนถึง id=100 ซึ่ง facebook มองว่าเป็นลิงค์ต่างกัน นักพัฒนาจะแก้ไขปัญหาอย่างไร ? ซึ่งผมจะเขียนวิธีปรับตรงนี้ให้ในครั้งต่อไปครับ
   
• ถ้านักพัฒนาออกแบบเว็บไซต์ 2 เวอร์ชั่น คือ
  - เวอร์ชั่นสำหรับหน้าจอที่ใหญ่กว่าอุปกรณ์พกพา เช่น พีซี , โน๊ตบุ๊ค ฯลฯ ก็จะเรียกไปที่ yourweb.com/webboard/ 
  - เวอร์ชั่นสำหรับอุปกรณ์พกพา ก็จะเรียกไปที่ yourweb.com/m-webboard/
  
  กล่องความเห็น จะแสดงผลเฉพาะหน้าบทความนั้น ๆ ที่ URL ตรงกับที่ระบุไว้ใน code ของ facebook ที่คัดลอกมาเท่านั้น ซึ่งตรงนี้มีวิธีการแก้ได้หลายวิธี ตั้งแต่การกำหนดการเรียกใช้ css เพื่อให้เรียกไปที่ yourweb.com/webboard/ เพียงที่เดียว สำหรับ "ทุกอุปกรณ์" ซึ่งมักใช้ในระบบ CMS (Content Management System) ที่แจกให้ มาใช้ฟรี เช่น Wordpress , Joomla ฯลฯ และ มักจะไม่มีปัญหาอะไร เพียงแค่ติดตั้ง Plugin ผ่านระบบของ CMS เองเลย
  
  แต่มักเกิดปัญหากับนักพัฒนา ที่พัฒนาเว็บไซต์ขึ้นเอง ซึ่งส่วนใหญ่ มักทำการแยก path แล้วให้ทำการ redirect ไปยัง path ที่ออกแบบให้เหมาะสมกับหน้าจอของผู้เข้าชม ตรงนี้ก็จะเกิดปัญหา คือ กล่องความเห็นจะไม่แสดงผล นักพัฒนาจะแก้ไขปัญหาอย่างไร ? ซึ่งผมจะเขียนวิธีปรับตรงนี้ให้ในครั้งต่อไปครับ
   
• ความเห็นของผู้เข้าชมที่เขียนไว้ในเวอร์ชั่นสำหรับอุปกรณ์พกพา กลับไม่แสดง เมื่อผู้เข้าชมเปลี่ยนไปเข้าเว็บไซต์ด้วยพีซี สาเหตุเดิม คือ กล่องความเห็น จะแสดงผลเฉพาะหน้าบทความนั้น ๆ ที่ URL ตรงกับที่ระบุไว้ใน code ของ facebook ที่คัดลอกมาเท่านั้น นักพัฒนาจะแก้ไขปัญหาอย่างไร ? ซึ่งผมจะเขียนวิธีปรับตรงนี้ให้ในครั้งต่อไปครับ