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



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

ขั้นตอนที่ 2. ใส่สคริปต์ของ Facebook Comment
ให้ค้นหา



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

]]>





ขั้นตอนที่ 3. วางกล่อง Facebook Comment
ให้ค้นหา




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





comments








ขั้นตอนที่ 4. เพิ่มตัวนับจำนวน Facebook Comment ลงในหน้าแรก
ให้ค้นหา


ซึ่งถือเป็นเป้าหมายการแก้ไขโค้ดของขั้นตอนนี้

จากนั้นนำโค้ดตัวนับจำนวนซึ่งอยู่ข้างล่างนี้ ไปวางไว้ที่ข้างบนเหนือโค้ดเป้าหมายที่หาเจอนั้น



     
       

          comments
       

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

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


ซึ่งก็คือโค้ดตั้งแต่

ไปจนถึง

ไปวางที่ใหม่ได้ตามต้องการ

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


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


เส้นขอบและช่องว่างจากขอบกำหนดจากโค้ดในขั้นตอนที่ 3 คือ


ลักษณะของหัวข้อแสดงจำนวนเหนือกล่องคอมเมนท์กำหนดจากโค้ดในขั้นตอนที่ 3 คือ


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

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

0 comments:

Post a Comment