Blogger: ติดตั้ง Facebook Comment พร้อมตัวนับจำนวนคอมเมนท์

บทความนี้จะอธิบายวิธีติดตั้ง Facebook Commentที่จำแนกตามเนื้อหาแต่ละหน้าพร้อมตัวนับจำนวนคอมเมนท์ (Add Facebook share button with counter) ซึ่งจะเป็นกล่องแสดงความคิดเห็นด้วยชื่อผู้ใช้ Facebook ของแต่ละบทความแบบแยกส่วนออกจากกัน โดยมืวิธีทำได้ดังนี้

อธิบายเพิ่มเติม
นอกจากนี้อย่าลืมว่าในปัจจุบันเทมเพลทพื้นฐานของ Blogger รุ่นใหม่บางชนิด จะสามารถมองเห็นกล่อง Facebook Comment ที่สร้างตามวิธีในบทความนี้ ได้ก็ต่อเมื่อสั่งซ่อนกล่องคอมเมนท์แบบปกติของ Blogger ซะก่อน ด้วยวิธีตามบทความในลิงก์นี้ครับ
http://tip.maxlayout.com/2012/10/blogger-enable-or-disable-comment.html

---

ขั้นตอนที่ 1. เข้าสู่บล็อกของคุณจากนั้นไปที่
'แม่แบบ > แก้ไข HTML'

---

ขั้นตอนที่ 2. ใส่สคริปต์ของ Facebook Comment
ให้ค้นหา
</b:skin>

แล้วแทนที่โค้ดที่หาเจอด้วยโค้ดสคริปต์คอมเมนท์ด้านล่างนี้
.fb-comment-counter {
}

]]></b:skin>
<!--Facebook Comment Script Start-->
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = &quot;//connect.facebook.net/th_TH/all.js#xfbml=1&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>
<!--Facebook Comment Script Stop-->

---

ขั้นตอนที่ 3. วางกล่อง Facebook Comment
ให้ค้นหา
    <a name='comments'/>
    <b:if cond='data:post.allowComments'>

แล้วแทนที่โค้ดทั้ง 2 บรรทัดที่หาเจอนั้นด้วยโค้ดกล่องคอมเมนท์ด้านล่างนี้

    <a name='comments'/>
    <!--Facebook Comment Box Start-->
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <div style='padding:5px; border:1px solid #c0c0c0;'>
          <div style='font-size:170%; margin-bottom:5px; border-bottom:1px solid #c0c0c0;'>
            <a expr:href='data:post.url + &quot;#fb-root&quot;'><fb:comments-count expr:href='data:post.canonicalUrl'/> comments</a>
          </div>  
        <div id='fb-root'/>
          <div class='fb-comments' data-colorscheme='light' data-num-posts='10' data-width='470' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id'/>
        </div>
      </b:if>
    <!--Facebook Comment Box Stop-->
    <b:if cond='data:post.allowComments'>

---

ขั้นตอนที่ 4. เพิ่มตัวนับจำนวน Facebook Comment ลงในหน้าแรก
ให้ค้นหา
        <!-- quickedit pencil -->
ซึ่งถือเป็นเป้าหมายการแก้ไขโค้ดของขั้นตอนนี้

จากนั้นนำโค้ดตัวนับจำนวนซึ่งอยู่ข้างล่างนี้ ไปวางไว้ที่ข้างบนเหนือโค้ดเป้าหมายที่หาเจอนั้น
      <!--Facebook Comment Counter Start-->
      <b:if cond='data:blog.pageType != &quot;item&quot;'>
        <div class='fb-comment-counter'>
          <a expr:href='data:post.url + &quot;#fb-root&quot;'><fb:comments-count expr:href='data:post.canonicalUrl'/> comments</a>
        </div>
      </b:if>
      <!--Facebook Comment Counter Stop-->

---

ขั้นตอนที่ 5. จากนั้นกดปุ่ม 'บันทึกเทมเพลต' แล้วลองเปิดบล็อกเพื่อดูผลลัพธ์

---

อธิบายเพิ่มเติมเกี่ยวกับตัวนับจำนวน Facebook Comment 

ในตัวอย่างนี้ได้ตั้งค่าให้ตัวนับจำนวน Facebook Comment ไปแสดงไว้ตรงส่วนท้ายของทุกบทความในหน้าแรก แต่ถ้าหากว่าต้องการย้ายตัวนับจำนวนคอมเมนท์นี้ไปวางไว้ที่อื่นก็ทำได้ตามต้องการโดยนำโค้ดที่อยู่เหนือ
        <!-- quickedit pencil -->

ซึ่งก็คือโค้ดตั้งแต่
      <!--Facebook Comment Counter Start-->
ไปจนถึง
      <!--Facebook Comment Counter Stop-->
ไปวางที่ใหม่ได้ตามต้องการ

ส่วนลักษณะต่างๆ ของตัวนับจำนวนนี้สามารถแก้ไขได้เองจากโค้ด CSS ในขั้นตอนที่ 1 ซึ่งก็คือ
.fb-comment-counter {
}

---

อธิบายเพิ่มเติมเกี่ยวกับกล่องใส่ Facebook Comment

นอกจากนี้สามารถตบแต่งแก้ไข Facebook Comment นี้เช่น ความกว้าง พื้นหลังหรือเส้นขอบได้ตามต้องการดังนี้

เส้นขอบและช่องว่างจากขอบกำหนดจากโค้ดในขั้นตอนที่ 3 คือ
<div style='padding:5px; border:1px solid #c0c0c0;'>

ลักษณะของหัวข้อแสดงจำนวนเหนือกล่องคอมเมนท์กำหนดจากโค้ดในขั้นตอนที่ 3 คือ
<div style='font-size:170%; margin-bottom:5px; border-bottom:1px solid #c0c0c0;'>

ความกว้างของช่องใส่ความคิดเห็นนี้กำหนดจากโค้ดในขั้นตอนที่ 3 คือ
data-width='470'

ชุดสีของข้อความคอมเมนท์เลือกได้สองแบบโดยกำหนดจากโค้ดในขั้นตอนที่ 3 คือ
data-colorscheme='light'
ซึ่งสามารถเลือกได้ด้วยการแทนที่โค้ดในจุดนี้ ระหว่างให้เป็นแบบ 'light' หรือแบบ 'dark' ก็ได้ครับ

ที่มา:tip.maxlayout.com