อธิบายเพิ่มเติม
นอกจากนี้อย่าลืมว่าในปัจจุบันเทมเพลทพื้นฐานของ 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
ให้ค้นหา
<!-- quickedit pencil -->
แล้วแทนที่โค้ดที่หาเจอนั้นด้วยโค้ดกล่องคอมเมนท์ด้านล่างนี้
<!--Facebook Comment Box Start-->
<div style='padding:5px; border:1px solid #c0c0c0; max-height:2000px; overflow:hidden;'>
<div style='font-size:170%; margin-bottom:5px; border-bottom:1px solid #c0c0c0;'>
<fb:comments-count expr:href='data:post.canonicalUrl'/> comments
</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>
<!--Facebook Comment Box Stop-->
<!-- quickedit pencil -->
ขั้นตอนที่ 5. จากนั้นกดปุ่ม 'บันทึกเทมเพลต' แล้วลองเปิดบล็อกเพื่อดูผลลัพธ์
อธิบายเพิ่มเติมเกี่ยวกับกล่องใส่ Facebook Comment
นอกจากนี้สามารถตบแต่งแก้ไข Facebook Comment นี้เช่น ความกว้าง พื้นหลังหรือเส้นขอบได้ตามต้องการดังนี้
ขีดจำกัดความสูงของกล่องคอมเมนต์นี้กำหนดจากโค้ดในขั้นตอนที่ 3 คือ
max-height:2000px;
เส้นขอบและช่องว่างจากขอบกำหนดจากโค้ดในขั้นตอนที่ 3 คือ
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' ก็ได้ครับ
0 ความคิดเห็น:
แสดงความคิดเห็น
หมายเหตุ: มีเพียงสมาชิกของบล็อกนี้เท่านั้นที่สามารถแสดงความคิดเห็น