Blogger: ติดตั้ง Facebook Comment แบบแสดงให้เห็นตั้งแต่อยู่ในหน้าแรก

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

อธิบายเพิ่มเติม
นอกจากนี้อย่าลืมว่าในปัจจุบันเทมเพลทพื้นฐานของ 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 = &quot;//connect.facebook.net/th_TH/all.js#xfbml=1&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</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' ก็ได้ครับ

Post Status




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

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

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