บทความนี้จะอธิบายวิธีติดตั้ง 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 = "//connect.facebook.net/th_TH/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</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 == "item"'>
<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 + "#fb-root"'><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 != "item"'>
<div class='fb-comment-counter'>
<a expr:href='data:post.url + "#fb-root"'><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
