Blogger: ติดตั้ง Facebook Comment ที่คอมเมนท์จำแนกตามเนื้อหาแต่ละหน้า

[Update: 2013-04-13]
ตอนนี้ผมเขียนโค้ดใหม่เป็นเวอชั่น 2 ซึ่งเพิ่มตัวนับจำนวนคอมเมนท์ใส่ลงไปด้วยโดยสามารถอ่านได้ที่ลิงก์นี้ครับ
http://tip.maxlayout.com/2013/04/blogger-add-facebook-comment-with-counter.html

---

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

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

---

ขั้นตอนที่ 2. กดปุ่ม 'Ctrl + F' บนคีย์บอร์ดแล้วสั่งค้นหาคำว่า
<a name='comments'/>
จะพบว่าเจอโค้ดแบบเดียวกันอยู่ 2 แห่ง

โดยให้สังเกตดูโค้ดหนึ่งในสองแห่งที่หาเจอนั้นจะมีบรรทัดถัดมาถูกเขียนเอาไว้ว่า
<b:if cond='data:post.allowComments'>
ซึ่งโค้ดบรรทัดนี้ก็คือเป้าหมายการแก้ไขโค้ดของเราในขั้นตอนถัดไป

---

ขั้นตอนที่ 3. ให้แทนที่โค้ดเป้าหมายซึ่งมีเงื่อนไขตรงตามที่กล่าวมาแล้วในขั้นตอนที่ 2
ซึ่งถูกเขียนเอาไว้ว่า
<b:if cond='data:post.allowComments'>

ด้วยโค้ดกล่องคอมเมนท์ด้านล่างนี้
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id="fb-root"></div>
<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 = "//connect.facebook.net/th_TH/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div style='padding:0px;'>
<div class="fb-comments" expr:href="data:post.url" expr:title="data:post.title" expr:xid="data:post.id" data-num-posts="10" data-width="470"></div>
</div>
</b:if>
<b:if cond='data:post.allowComments'>

---

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

ถ้าทำตามขั้นตอนที่กล่าวมาครบถ้วนก็จะพบว่า มีกล่องคอมเมนท์เฟซบุ๊คโผล่ออกมาอยู่คู่กันกับกล่องคอมเมนท์บล็อกเกอร์ โดยถ้าหากต้องการให้เห็นแค่เฉพาะคอมเมนท์เฟซบุ๊คอย่างเดียวก็สามารถทำได้โดยสั่งซ่อนคอมเมนท์บล็อกเกอร์ตามบทความในลิงก์นี้ครับ
http://tip.maxlayout.com/2012/10/blogger-enable-or-disable-comment.html

---

อธิบายเพิ่มเติม
สามารถตบแต่งพื้นหลังหรือเส้นขอบ ได้โดยให้แทนที่โค้ดในบรรทัดที่ 10 นับจากข้างบนสุด ซึ่งเดิมได้เขียนไว้ว่า
<div style='padding:0px;'>
ให้เป็นลักษณะใหม่ได้ตามต้องการเช่นลองแทนที่ด้วยโค้ดตัวอย่างข้างล่างนี้
<div style='padding:0px; background:#ffffff; border:solid 2px #1a356e;'>

และนอกจากนี้สามารถแก้ไขความกว้างของช่องใส่ความคิดเห็นนี้ได้โดยเปลี่ยนโค้ด
data-width
ซึ่งเดิมค่าเริ่มต้นได้กำหนดไว้ว่า
470
ให้เป็นขนาดใหม่ได้ตามต้องการ

Credit:
http://www.mybloggertricks.com/2012/03/show-facebook-comments-inside-tabs-in.html
http://www.helperblogger.com/2012/03/facebook-comment-box-for-blogger_06.html