วิธีแทนที่ระบบ Blogger Comments ด้วย Facebook Comments Plugin

วิธีสร้าง facebook comments
บทความนี้ผมจะสอนแทนที่ระบบ Blogger Comments ซึ่งก็คือระบบ Comments ใน Blogger ด้วยระบบ Comments ที่สร้างจาก Facebook plugins ที่ผมได้นำเสนอไปแล้วในบทความ วิธีนำ Facebook Social Plugins มาติดตั้งบน Blogger โดยในบทความนี้ผมจะเน้นกล่าวถึง Facebook Comments Plugin โดยเฉพาะและลงรายละเอียดในการติดตั้งให้ชัดเจนขึ้น

ก่อนติดตั้งผมจะให้ทดสอบการทำงานของ Facebook Comments Plugin ที่ได้นำมาติดตั้งแทนระบบ Comments ใน Blogger โดยเข้าไปตาม URL ที่ให้ไว้ด้านล่าง

DEMO หน้าแรก
http://9facebook.blogspot.com/2010/06/replace-blogger-comments-with-fackbook.html
DEMO หน้าที่ 2
http://9facebook.blogspot.com/2010/06/facebook.html

การสอนของผมจะแบ่งออกเป็น 2 ขั้นตอนเพื่อความชัดเจน ได้แก่
ตอนที่ 1 วิธีสร้างโค้ด Facebook Comments Plugin
ตอนที่ 2  วิธีนำโค้ดของ Facebook Comments Plugin มาติดตั้งบน Blogger

ถ้าคุณดูและทดลองจาก DEMO แล้วชอบก็มาลงมือทำกันเลยครับ



วิธีแทนที่ Blogger Comments ด้วย Facebook Comments Plugin

ตอนที่ 1 วิธีสร้างโค้ด Facebook Comments Plugin

ขั้นที่ 1 สร้าง App ID 

1.1 ให้ทุกคน Log in เข้าไปที่บัญชี Facebook ของตนเองแล้ว ไปที่ URL ด้านล่างเพื่อสร้าง App ID
http://developers.facebook.com/setup/
โดยกรอกชื่อบล็อก   URL ของ Blog  และเลือกภาษาและกดสร้าง Application

สอนทำบล็อก สอนทำ blogger สอน blogspot

ซึ่งคุณจะได้ตัวเลขของ Application มา 1 ชุด และตัวเลขที่จะต้องคัดลอกและนำมาใช้คือ App ID ดังตัวอย่างในรูป

ทำบล็อก แต่งบล็อก


1.2 กรณีที่คุณทำตามขั้นตอน 1.1 แล้วมีปัญหาคือเกิดกรณี Invalid url
(ถ้าทำ 1.1 แล้วผ่านให้ข้ามไปขั้นที่ 2)

วิธีสร้าง blog

ให้เข้าไปที่
http://www.facebook.com/developers/createapp.php
และกรอกชื่อ Application ลงไป แล้วกด Create Application

วิธีทำ blogger

แล้วในหน้าถัดมาคุณจะเห็น App ID  ดังรูป

วิธีทำ blogspot

ให้คัดลอก App ID  เพื่อใช้ดำเนินการต่อในขั้นที่ 2
(รายละเอียดต่าง ๆ คุณอาจจะตั้งค่าเพิ่มเติมได้แต่ผมจะไม่กล่าวถึงเพื่อไม่ให้สับสน)

1.3 ถ้าคุณไม่เข้าใจและไม่สามารถทำตามขั้นที่ 1.1 และ 1.2 ได้เลยให้ใช้ App ID  อันใดอันหนึ่งต่อไปนี้
 
123169744386296
126670070692732
121449264556469

ขั้นที่ 2 สร้างโค้ด Facebook Comments Plugin

ให้นำที่ App ID เตรียมไว้ในขั้นที่ 1 แทนลงไปในโค้ดข้างล่างนี้
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({appId: 'ใส่ App id ตรงนี้', status: true, cookie: true,
             xfbml: true});
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>
<fb:comments numposts="10" width="500"></fb:comments>
</b:if>
แนวทางปรับแต่งโค้ด
numposts="10" คือจำนวนความคิดเห็นที่ปรากฎในหน้าแรก(เพิ่ม/ลดได้ตามใจ)
width="500" คือความกว้างของกล่องความคิดเห็นนี้ (เพิ่ม/ลดได้ตามความเหมาะสมกับ Templates)

เมื่อจบขั้นตอนที่ 2 ก็ถือว่าคุณได้สร้างโค้ด Facebook Comments Plugin สำเร็จแล้ว ต่อไปก็นำโค้ดไปติดตั้งบน Blogger


ตอนที่ 2 วิธีนำโค้ดของ Facebook Comments Plugin มาติดตั้งบน Blogger

ขั้นที่ 3 เข้าไปปิดระบบ Comments เดิมของ Blogger
ทำโดยเข้าไปที่ การตั้งค่า >> ข้อคิดเห็น >> เลือกซ่อนข้อคิดเห็น (ดังรูป)

สอนสร้างบล็อก  วิธีสร้างบล็อก 


ขั้นที่ 4 ติดตั้ง Facebook Comments Plugin บน Blogger
4.1 เข้าไปที่การออกแบบ >> แก้ไข HTML >> ขยายแม่แบบเครื่องมือ

แต่ง blogger  

4.2 จากนั้นค้นหาโค้ด
<b:includable id='comments' var='post'>
ซึ่งคุณอาจจะพบชุดโค้ด
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
หรือ
<b:includable id='comments' var='post'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
หรือ
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<b:if cond='data:post.allowComments'>
หรือ
<b:includable id='comments' var='post'>
<span id='comments'/>
<div id='comments'>
<b:if cond='data:post.allowComments'>

เอาล่ะ ไม่ว่าจะพบโค้ดแบบใดในทุกแบบที่กล่าวมา ให้นำโค้ดของ Facebook Comments Plugin ในขั้นที่ 2 วางลงไปก่อนหน้าโค้ด <b:if cond='data:post.allowComments'>

โค้ด Facebook comments  

ปรับความกว้างและจำนวนความคิดเห็นและบันทึกแม่แบบก็จบขั้นตอนแล้วครับผม

ถ้าถูกใจบทความนี้ก็อย่าลืมให้กำลังใจกันบ้างนะครับ จะได้มีกำลังใจเขียนบทความเล่าให้ฟังกันต่อไปครับ
ปล.บทความต่อ ๆ ไปผมจะเริ่มสอนให้สร้าง Template บน Blogger (โดยวิธีเขียนโค้ด) ด้วยตัวเองครับ  ซึ่งอาจจะเป็นขั้นสูงสุดของบทเรียนในบล็อกนี้ที่ผมจะเขียนครับ สนใจก็อย่าลืมติดตามอ่านกันนะครับ สวัสดีครับ

ตอนนี้มีความคิดเห็น : 40 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

  1. สอบถามคุณ Hack ครับ
    ผมจะทำ Blog ขึ้นมาใหม่ โดยใช้ Email อื่นได้มั้ยครับ หมายถึง Email ของ ymail,yahoo หรือ hotmail จะมีผลดีผลเสียอย่างไร ต่อ blogger หรือเปล่าครับ

  1. @ thongchai : ใช้ Email อื่นได้ครับ แต่ไม่แนะนำเพราะในระยะยาวคุณจะไม่สามารถใช้บริการอื่นที่เกี่ยวข้องกับ blogger ได้ เช่น Google Analytic ,Webmaster tool ,Google Friends connect, Feedburner, youtube หรือ picasa เป็นต้น

  1. ทำแล้วมันขึ้นว่า Sorry, a temporary error has occurred. Please try again.

    รบกวนเข้าไปดูให้หน่อยนะคะ pythontip.blogspot.com

  1. ลองทำถึงขั้นตอนสุดท้ายแล้วมันเงียบไปเลย 55555

  1. กล่อง comment มันไม่ขึ้นครับ

  1. @ คนที่ทำไม่ขึ้นไม่ทราบว่าสร้าง App ID เองหรือเปล่าครับ ลองเอาไปติดตั้งใน HTML Gadget แล้วขึ้นหรือไม่?

  1. ทำแล้วครับแต่ไม่ขึ้นครับ
    ลองเข้าไปดูที่หน้านี้ก็ได้ครับ http://www.chicrule.co.cc/2010/08/blog-post_3060.html

  1. @ NP : ผมทดลองติดตั้งดูล่าสุดวันที่ 29 สค 53 เวลา ยังใช้งานได้ปกตินะครับ ลองตรวจว่า 1 ติดตั้งโค้ดถูกหรือไม่ และ 2.กล่องอาจจะซ่อนอยู่ในบทความ ต้องคลิกหัวข้อบทความก่อนจึงจะเห็นครับ

  1. วิธีการนี้ ถ้าหากผู้ชมที่ไม่มี Facebook ก็จะไม่สามารถ comment ได้ เข้าใจถูกต้องหรือเปล่าคะ :D

  1. @ KimNamGil-FC Webmaster : ใช่แล้วครับ

  1. สำเร็จแล้วครับ ขอบคุณมากมาย

  1. ผมทำทุกขั้นตอนแล้ว มันไม่ขึ้นเลย...
    ไม่ทราบว่า อาจเป็นเพราะผมมีระบบคอมเม้นที่เอามาเสริม(ก็เอามาจากบล็อกคุณนี่แหละครับ)
    อยู่แล้ว มันเลยชนกันหรือป่าว???
    ลองเข้าไปดูนะครับ
    http://fr-phakk.blogspot.com/2010/09/blog-post_07.html

  1. แต่มันเหมือนจะขึ้น มีแถบโหลดของ เฟสบุค แต่มันก็โหลดอยู่ตั้งนาน
    ไม่ยอมโผล่เลย...งงงง

  1. @ Tommaso Phakk : ผมไม่ทราบจะแนะนำยังไงดี เพราะว่ามันเป็นกับระบบของ Facebook ครับ ต้องรอสักพักแล้วมันจะทำได้เองครับ ส่วนวิธีที่แนะนำยังใช้ได้แน่นอนครับ ผมก็ลองเองกับหลาย ๆ บล้อก หลาย ๆ user แล้วยืนยันว่ายังใช้ได้ครับ ใจเย็น ๆ รอคุณ Facebook เขาอารมณ์ดีก่อนนะครับ

  1. อ.hackค่ะที่บอกว่า ถ้ามีคน comment ที่ Plugin Comments ของ FB ข้อความมันจะไปโชว์ที่ FB ของเราด้วยนั้น เฉพาะแค่ข้อความทีเราเขียนเองเท่านั้นเหรอค่ะ แล้วถ้ามีคนอื่นมา comment ที่ Plugin Comments ข้อความนั้นจะไปขึ้นที่ FB ของเราด้วยมั้ย

  1. อยากจะบอกเหลือเกินคะว่า หาชุดโค้ด ตัวนี้ไม่เจอนะคะ

  1. @ Gina : ขยายแม่แบบเสียก่อนครับ

  1. ขอบคุณมากค่ะ
    ทำได้แล้ว

  1. ทำได้แล้วครับ ขอบคุณครับคุณใหม่ ^^

  1. มันขึ้นแบบนี้อะ ทำไง

    เครื่องมือที่มี ID "Blog1" ต้องไม่มีองค์ประกอบ: "b:if" เครื่องมือจะมีได้เฉพาะองค์ประกอบ b:includable

  1. @thailandtravelgood: แสดงว่ายังวางตำแหน่งไม่ถูกต้องครับ ต้องปิดโค้ดด้วย </b:if> ครับ

  1. ผมทำแล้วไม่ขึ้นอะครับ แนะนำทีครับ

  1. ได้เเล้วครับ ขอบคุณครับบบ ทำเมื่อวันที่ 11 เมษายน 54
    http://photoshopblogps.blogspot.com/

  1. พี่ครับ
    ผมจะเพิ่มหัว Blog ทำงัยครับ เช่น
    หน้าแรก> เกี่ยวกับเรา > ติดต่อเรา>
    ผมเพิ่มได้แต่ หน้าแรกอย่างเดียว แต่อยากเพิ่มอีก ทำงัยครับ

  1. รบกวนตอบหน่อยนะครับ คือ ทำแล้วมันขึ้นว่า

    The comments plugin requires an href parameter.

    ต้องแก้ไขยังไงเหรอครับ

    ขอบคุณล่วงหน้าครับ

  1. สุดยอดเหมือนเดิมเลยครับ

  1. รบกวนนิดหนึ่งค่ะ...ใส่โค้ดตามแล้วสามารถแชร์และคอมเม้นได้ตามปกติ แต่จะได้เฉพาะเบาร์เซอร์ของfire fox อ่ะค่ะเวปเบาร์เซอร์ตัวอื่นมันเออเร่อไม่ทรายว่าเกิดจาสาเหตุอะไรค่ะ^^รบกวนด้วยนะค่ะ ขอบคุร๕่ะ

  1. ลองทำแล้วมันกล่องคอมเ้นขึ้นเฉพาะในเวปเบาเซอร์ของไฟฟอกอ่ะค่ะ ของตัวอื่นไม่ขึ้นมีวิธีแก้ไหมค่ะ

  1. b:if cond='data:post.allowComments

    ถ้ามันมีเยอะหลายที่ต้องวางข้างหน้าทุกที่ไหมครับ ขอบคุณครับ

  1. ผมทำไปแล้ว แต่มันมีข้อตวามนี้ขึ้นมาอ่ะคับ

    สวยแนะน้ำด้วยนะครับ

    The comments plugin requires an href paramet

  1. ขอบคุณท่านอาจารย์มากครับ
    บล็อกของผมกำลังเป็นตัวเป็นตนแล้วครับ
    http://programfreever.blogspot.com/
    เข้าไปชมได้นะครับ

  1. This comment has not yet been published to Facebook. Publish Comment ทำแล้วมันขึ้นแบบนี้อ่ะครับ ถ้าอย่างไรให้มันหายไปอ่ะครับ คือว่าโพสแล้วโพสเลย

  1. ผมติดตั้งไม่ผ่านครับ มันให้ใส่เบอร์โทรศัพหรือรหัสบัตรเครดิตครับ

  1. ตอนสร้าง ไอดีแอ็ปน่ะครับ

  1. ขอบคุณข้อมูลดีๆคับ ๐,๐"

    --------------------------------
    ~+๐oO[ ลอตเตอรี่ ]Oo๐+~
    --------------------------------
    ~+๐oO[ มีตรวจหวยรางวัลที่1ด้วย ]Oo๐+~
    --------------------------------
    ~+๐oO[ คู่ ]Oo๐+~
    --------------------------------
    ~+๐oO[ ลอตเตอรี่ออนไลน์ ]Oo๐+~
    หาไม่เจอ ให้เซิดกูเกิลว่า
    "ลอตเตอรี่ออนไลน์"
    โทร 0863132381/082-0793134
    ragtrixro@yahoo.com
    หรือจำไว้ว่า http://www.ลอตเตอรี่ออนไลน์.com

  1. ของเรา ต้องเพิ่ม html gadget ตรงรูปแบบ แล้ว แปะโค้ด ลงไปเลยมันก็ขึ้นนะ แต่ทำในขั้นตอนที่ 2 มันไม่ขึ้น อ่ะ แต่ขอบคุณสำหรับความรู้นะคะ

    http://theninthscene.blogspot.com/

  1. The widget with id "Blog1" cannot contain element: "b:if". A widget can only contain b:includable elements.

    ของผมขึ้นแบบนี้ครับ

  1. ทำได้แล้ว แต่มันขึ้นทุกหน้าต้องแก้ที่ไหนครับ
    http://doo24hrs.blogspot.com/

  1. http://vigvig.blogspot.com/ ฝากจารย์ตรวจงานด้วยครัช :)

แสดงความคิดเห็น

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel