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

Post Status




5 ความคิดเห็น:

กล้วยไข่ เรื่องวิ่งเรื่องกล้วย กล่าวว่า...

ขอบคุณผู้เขียนมากเลยค่ะ
เราติดปัญหาเรื่องนี้มานาน เพราะไม่มีความรู้เรื่องการเขียนโปรแกรมเลย
พออ่านวิธีติดตั้ง plug-in จากเฟสบุ๊ค ก็ไม่เข้าใจว่าโค้ดแต่ละส่วนต้องไปวางตรงไหนบ้าง
ครั้นเมื่อหาที่วางได้แล้ว ก็พบว่าคอมเม้นต์แต่ละบล็อก เหมือนกันหมดอีก
เพิ่งกระจ่าง ก็เมื่ออ่านบล็อกของคุณนี่เอง

เรามีเรื่องอยากรบกวนสอบถามค่ะ
คือแม้โค้ดนี้จะสามารถแยกได้แต่ละบล็อก แต่ font เป็นสีดำ
ทำให้เมื่อใช้กับพื้นหลังดำของบล็อกเราแล้ว มองไม่เห็นอะค่ะ

อยากทราบว่ามีวิธีแก้ไขอย่างไรคะ ขอบคุณล่วงหน้าสำหรับคำตอบค่ะ

อันนี้คือบล็อกของเรา
http://bananareading.blogspot.com/

Max กล่าวว่า...

ให้แทนที่โค้ด 4 บรรทัดสุดท้าย ซึ่งแบบเดิมเขียนไว้ว่า
<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>
</b:if>
<b:if cond='data:post.allowComments'>

ด้วยโค้ดใหม่ด้านล่างนี้แล้ว แก้ไข style ได้ตามวิธีที่เขียนไว้ในส่วนอธิบายเพิ่มเติมครับ ซึ่งตอนนี้ผมได้นำโค้ดที่อยู่ข้างล่างนี้ใส่เพิ่มลงไปในบทความแล้ว
<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'>

สวนฮักเกษตร กล่าวว่า...
ความคิดเห็นนี้ถูกผู้เขียนลบ
แอดมิน กล่าวว่า...

ขอบคุณมากๆน่ะครับ ทำได้แล้วครับ

tooed กล่าวว่า...

โคดเก่งเทพเลย...บางคนทำได้แค่เมต้าแทคอยู่ข้างนอก แบบนี้สิแจ่ม

แสดงความคิดเห็น

หมายเหตุ: มีเพียงสมาชิกของบล็อกนี้เท่านั้นที่สามารถแสดงความคิดเห็น