นายแทม ดอทคอม
นายแทม ดอทคอม
นายแทม สรรสาระบทความ
พัฒนาแอพและเว็บไซต์ ›› PHP

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

 วันอังคารที่ 14 เมษายน 2558 เวลา 13:53 น.

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

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 ที่คัดลอกมาเท่านั้น นักพัฒนาจะแก้ไขปัญหาอย่างไร ? ซึ่งผมจะเขียนวิธีปรับตรงนี้ให้ในครั้งต่อไปครับ

วันที่เผยแพร่ วันที่ปรับปรุง

รับบทความใหม่กด Like facebook : นายแทม ดอทคอม | คลิกเพื่อคุยกับนายแทม


ทำไมถึงต้องสร้างเว็บไซต์ปลอม หรือ เว็บไซต์ที่มีเนื้อหาให้อยากคลิกไปอ่าน มันได้อะไร ทำไปทำไม

เพราะมีแหล่งรายได้มหาศาลอยู่บนอินเทอร์เนต โดยไม่ต้องทำอะไรมาก แต่วิธีนี้มันก็เหมือนการขายอะไหล่รถมือสองบนโลกจริง แต่คุณได้อะไหล่มาขายโดยการโจรกรรมรถมาถอดอะไหล่ขาย ซึ่งเป็นอาชีพที่ไม่สามารถรับได้บนโลกออนไลน์เช่นกัน »» อ่านต่อ ...

Facebook เริ่มบลอคเว็บไซต์ข่าวปลอม เว็บไซต์สแปมโฆษณา เว็บไซต์สแปมเนื้อหา พร้อมวิธีแก้ไขไม่ให้เว็บไซต์โดนบลอค

เว็บไซต์ข่าวปลอมแพร่ระบาดมานานจะหลายปีแล้ว วันนี้ facbeook ขึ้นบัญชีดำเรียบร้อยแล้ว นับเป็นมาตรการให้สังคม facebook ปลอดภัยมากขึ้น »» อ่านต่อ ...

วิธีตั้งค่าสำหรับ android เพื่อให้ facebook เปิดลิงค์ด้วยแอพ Chrome Firefox Opera และบราวเซอร์อื่น ๆ แทน

facebook ก็หวังดีเกินไป สำหรับผู้ใช้แอนดรอยด์ คือ เมื่อเราแตะเปิดลิงค์เว็บไซต์บน Timeline ที่เพื่อน ๆ แชร์กันมา facebook ก็โหลดเว็บไซต์มาเปิดในแอพตัวเองอัตโนมัติ ซึ่งมาตรฐานการแสดงผลของบราวเซอร์แบบ Build-in ของ facebook มักแสดงผลเพี้ยนมากครับ เรามาปิดฟังก์ชันนี้กันเถอะ »» อ่านต่อ ...

Facebook Tips วิธีจัดกลุ่มรายชื่อเพื่อนบนเฟสบุ๊ค มีประโยชน์มาก ทำเสียแต่วันนี้

การจัดกลุ่มรายชื่อเพื่อนบน facebook นั้นสำคัญมากครับ มากจนมีความสำคัญเหมือนโลกจริง ที่คุณรู้จักผู้คนในหลายฐานะ หลายบทบาท การแชร์บางสถานะอาจนำหายนะมาให้ชีวิตคุณได้ทันที มาดูวิธีจัดระเบียบความสัมพันธ์บนโลกโซเชียลกันครับ »» อ่านต่อ ...

วิธีติดต่อ Facebook ให้เก็บบัญชีบุคคลที่รักไว้ หลังจากเสียชีวิตลง

เพราะวันหนึ่ง .. ก็ต้องถึงวันนั้นของทุกคน ความทรงจำของคุณอาจมีค่ามากสำหรับหลายคนที่ต้องอยู่ต่อไป และ ยังป้องกันการแอบอ้างใช้บัญชีของคุณในทางที่ผิดด้วย »» อ่านต่อ ...

อีเมล์ หนึ่งในสิ่งสำคัญที่สุดในยุคตัวตนดิจิตอล

สิ่งที่สำคัญในการระบุ หรือ กู้ตัวตนของคุณ ในด้านธุรกรรมการเงิน, การใช้งานโซเชียล, ระบบการศึกษา แต่คนไทยละเลย หลายคนยังสมัครอีเมล์ด้วยตัวเองไม่เป็น แต่มีสมาร์ทโฟนใช้ได้ซะงั้น »» อ่านต่อ ...

ใครคือท็อปแบรนด์ผู้เชี่ยวชาญด้านโซเชี่ยลมีเดียแห่งอาเซียน

สำหรับประเทศไทย แบรนด์ดังแห่งวงการบันเทิงอย่างค่ายหนัง GTH ได้คว้าตำแหน่งสุดยอดผู้เชี่ยวชาญด้านโซเชี่ยลมีเดียไปครอง เพราะมีจำนวนผู้ติดตามเพจและช่องของแบรนด์นี้ถึงกว่า 1.1 ล้านคน รองลงมาเป็นดีแทค เป็ปซี่ เมเจอร์ซีนีเพล็ก และ อิชิตัน ที่เน้นกลยุทธ์แจกของเก๋ๆ รายวันเป็นหลัก »» อ่านต่อ ...

social media ช่วย SEO ได้อย่างไร

มีผลการวิจัยล่าสุดว่า การโพสต์แนะนำลิงค์ไปเว็บใดๆใน social media จะช่วยเพิ่มอันดับในผลเสิร์ชกูเกิ้ล (SEO) ให้เว็บนั้นได้อย่างมีนัยสำคัญ อันดับจะดีเป็นพิเศษในสายตา Google Plus friends ทั้งหลายของเรา เพราะระบบ “Search Plus Your World” ที่นำความสัมพันธ์มาใช้จัดอันดับผลเสิร์ชให้ต่างๆกันไปในสายตาแต่ละคนที่ ล็อกอิน Google Plus ไว้ตอนที่เสิร์ชด้วย »» อ่านต่อ ...

BBM (Blackberry Messengers) for Android / iOS พร้อมให้ดาวโหลดทั่วโลก 21 กันยายน 2013 นี้

จุดเด่นของ Server ของ Blackberry นั้นเข้ารหัส ตั้งแต่แอพบนเครื่องเลย นี่ก็จะกลายเป็นจุดเด่นของ BBM ขึ้นมาทันที สำหรับไว้คุยเรื่องที่ต้องห้ามสำหรับประเทศไทย »» อ่านต่อ ...

Apple ปลื้ม !! ตลาด Application iOS ของไทยมียอดดาวโหลดอยู่อันดับที่ 5 ของเอเชียใต้

บุคคลิกของคนแต่ละประเภทสะท้อนมาที่หมวดของแอปฯ ที่มีคนดาวน์โหลดมากที่สุด โดยที่ตลาดรัสเซีย ที่คนเงียบขรึม ซีเรียส และเก็บตัว ส่งผลให้พวกเขาชอบที่จะอยู่กับตัวเองมากกว่า จึงทำให้แอปฯ ประเภทหนังสือขึ้นอันดับหนึ่งแอปฯ ขายดี ตรงกันข้ามกับประเทศรักสนุกอย่างบราซิลที่ยอดขายแอปฯ หนังสือต่ำมาก ส่วนประเทศไทย แอปฯ ยอดนิยมหนีไม่พ้นแอปฯ ที่ให้ความบันเทิง ไม่ว่าจะเป็น เกม แอปฯ ถ่ายรูป แอปฯ แชต เป็นต้น »» อ่านต่อ ...

PHP สอน funtion ค้นหาเลขไอพี (ip) ผู้เข้าชมเว็บไซต์

เลขไอพีช่วยให้เว็บมาสเตอร์สามารถนำไปใช้เชิงสถิติได้มากมาย เช่น การกำหนดการแสดงผลโฆษณา , การนับจำนวนผู้ใช้งาน ฯลฯ แม้ฟังก์ชั่นนี้จะไม่ได้แม่นยำ 100% เพราะไม่ได้อิง geolocation โดยตรง ซึ่งต้องเสียค่าบริการ แต่ก็พอช่วยให้ได้เลขไอพีผู้เข้าชมเว็บไซต์ได้ »» อ่านต่อ ...

Pace เว็บไซต์สร้าง Ajax Loader เพื่อแสดงสถานะ Loading เว็บไซต์แบบง่ายสุด ๆ

แม้ว่านักพัฒนาจะเขียน Code ให้เล็กเท่าไหร่ก็ตาม แต่ปัญหาบางครั้งอยู่ที่เครือข่าย คือ อัตราดาวโหลดต่ำมาก ๆ ทำให้ผู้ใช้ไม่ทนรอและปิดเว็บไซต์เราไป การเพิ่ม Ajax Loader จะช่วยบอกสถานะการดาวโหลดไฟล์เว็บไซต์ให้ผู้ใช้รู้ เพื่อให้ผู้ใช้ไม่เปลี่ยนใจปิดหน้าเว็บไซต์ของเราที่ขาวโพลนในขณะที่กำลังดาวโหลดไฟล์เว็บเพจนั้น ๆ »» อ่านต่อ ...

ภาพรวมองค์ความรู้พื้นฐานที่ต้องมีในการสร้างเว็บไซต์

ขอให้คุณเริ่มต้นศึกษาภาพรวมก่อนจะลงมือทำเว็บไซต์ เพราะความรู้ในทุกส่วนมีความลึกลงไปเรื่อย ๆ ในเชิงเทคนิค และเกี่ยวข้องกันเสมอไม่มากก็น้อย คุณจะรู้อย่างเดียวไม่ได้ครับ แต่ขณะเดียวกันสัดส่วนความรู้ก็ไม่ต้องเท่ากันทั้งหมดครับ ผมขอให้รู้เกี่ยวกับ "ภาษา" ให้มากไว้ก่อน ยิ่งมาก ยิ่งดี รองลงมา คือ การออกแบบกราฟฟิคครับ ส่วนที่เหลือ ก็ค่อยเก็บตกระหว่างการสร้างเว็บไซต์ไปเรื่อย ๆ ครับ »» อ่านต่อ ...
 
นายแทม นายแทม ดอทคอม ™ 2007 - 2017
อนุญาตให้คัดลอกเนื้อหา ยกเว้นเพื่อการค้า

 นายแทม ดอทคอม |  นายแทม ดอทคอม
 นายแทม ดอทคอม |  @naitam

โดย ห้างหุ้นส่วนสามัญ นายแทม เว็บดีไซน์
ปณจ. 26 หางดง เชียงใหม่ 50230
052-081830