Blogger: ติดตั้ง Facebook Comment พร้อมตัวนับจำนวนคอมเมนท์


บทความนี้จะอธิบายวิธีติดตั้ง 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 = &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
ให้ค้นหา
    <a name='comments'/>
    <b:if cond='data:post.allowComments'>


แล้วแทนที่โค้ดทั้ง 2 บรรทัดที่หาเจอนั้นด้วยโค้ดกล่องคอมเมนท์ด้านล่างนี้
    <a name='comments'/>
    <!--Facebook Comment Box Start-->
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <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 + &quot;#fb-root&quot;'><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 != &quot;item&quot;'>
        <div class='fb-comment-counter'>
          <a expr:href='data:post.url + &quot;#fb-root&quot;'><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' ก็ได้ครับ

Post Status




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

Doraman กล่าวว่า...

ขอบคุณมากๆ ครับสำหรับบทความ T T
มีปัญหายุนิดเดียวครับ
คือว่า ตรงข้อความ 0 Commens อยากให้มันเป็นแบบนี้ Commens 0 อะครับ
ขอบคุณมากๆครับสำหรับคำตอบทุกคำตอบ

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

ข้อความอันนั้นจะมีแสดงอยู่สองตำแหน่งซึ่งสามารถแก้ไขได้โดยสั่งแทนที่
<a expr:href='data:post.url + &quot;#fb-root&quot;'><fb:comments-count expr:href='data:post.canonicalUrl'/> comments</a>

ด้วยโค้ดด้านล่างนี้
<a expr:href='data:post.url + &quot;#fb-root&quot;'>comments <fb:comments-count expr:href='data:post.canonicalUrl'/></a>

โดยการแทนที่ในแต่ละขั้นตอนให้ผลแตกต่างกันดังนี้
แทนที่ในขั้นตอนที่ 3 จะเปลี่ยนข้อความเหนือกล่องใส่คอมเมนท์
แทนที่ในขั้นตอนที่ 4 จะเปลี่ยนข้อความในหน้ารายการบทความ

Doraman กล่าวว่า...

อีกนิดของนิดเดียวครับ อิอิ
http://image.ohozaa.com/view2/wM63bCm3sFKmkejp
ในรูปตรง Comments มันไม่เท่ากันเลยครับ พอจะมีวิธีไหมครับ

ป.ล ขอโทษด้วยนะครับที่ต้องมารบกวนบ่อยๆ TT

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

กำหนดลักษณะของตัวนับจำนวนได้จากโค้ดขั้นตอนที่ 2 ในบรรทัดแรกคือ
.fb-comment-counter {
}

ตัวอย่างเช่น ถ้าต้องการเว้นระยะจากด้านซ้ายให้มากขึ้นก็ให้แทนที่โค้ดดังนี้
.fb-comment-counter {
padding: 0 0 0 3px;
margin: 0 0 0 2px;
}

Doraman กล่าวว่า...

ขอบคุณมากครับ TT

Unknown กล่าวว่า...

ต้องการเปลี่ยนสี อักษรของคอมเม้น facebook ทำงัยครับ

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

เท่าที่ผมรู้ในตอนนี้สามารถเลือก Color Scheme ได้สองแบบครับ
โดยให้สั่งแทนที่โค้ดกล่องคอมเมนท์ในขั้นตอนที่ 3 ที่เดิมถูกเขียนไว้ว่า
<div class='fb-comments' data-num-posts='10' data-width='470' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id'/>

ด้วยโค้ดอันใหม่ด้านล่างนี้
<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'/>

ทั้งนี้ให้สังเกตตรงโค้ดอันใหม่ที่เขียนไว้ว่า
data-colorscheme='light'
ซึ่งสามารถเลือกได้ด้วยการแทนที่โค้ดในจุดนี้ ระหว่างให้เป็นแบบ light หรือแบบ dark ครับ

โดยขณะนี้ผมได้นำการแก้ไขอันนี้ใส่เพิ่มลงไปในบทความแล้วครับ

Doraman กล่าวว่า...

เอ่อมีปัญหาอีกอย่างครับคือว่า บางครั้งพอเข้าเว็บตัวบล็อกมันจะไม่แสดงผลตัวเลขจำนวนความคิดเห็น ( ในหน้ารายการบทความ บางครั้งนะครับ )
พอจะมีวิธีแก้ไหมครับ

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

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

Doraman กล่าวว่า...

สงสัยต้องอาศัยดวงแล้วละครับ 55+

Treerat กล่าวว่า...

ขอบคุณครับ

Unknown กล่าวว่า...

คือผมอยากทราบว่าถ้าบทความเยอะจะรู้ได้ยังไงบ้างครับว่า มีคนแสดงความคิดเห็นที่ไหนบ้าง เผื่อว่ามีคนแสดงความคิดเห็นที่ไม่เหมาะสมครับในบล็อก

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

ถ้าต้องการป้องกันปัญหานั้นคงต้องใช้ Facebook Comment ชนิดที่สามารถส่งการแจ้งเตือนเมื่อมีคอมเมนต์ใหม่เกิดขึ้น โดยลองเข้าไปที่ลิงก์นี้ครับ
http://developers.facebook.com/setup/
ส่วนขั้นตอนการสร้างนั้นเมื่อลอง Search ดูก็จะพบผลการค้นหาที่มีอธิบายไว้มากมายครับ

Unknown กล่าวว่า...

ขอบคุณครับ

Unknown กล่าวว่า...

ระวังกันหน่อยนะครับ ช่วงนี้พวกมิจฉาชีพหลอกขายของทางเน็ตเต็มบ้านเต็มเมือง โดยใช้บัญชี นายอมร ก้องกังสดาลกุล อย่าได้หลงเชื่อเด็ดขาด มิฉะนั้นคุณจะต้องเสียใจภายหลัง เพราะคุณจะเสียเงินไปฟรีๆ ให้กับพวกมิจฉาชีพพวกนี้อย่างแน่นอน

suttipong กล่าวว่า...

มันโชว์แต่คำว่า 0 Comments ซึ่งต้องคลิกเข้าไปแล้วมันจะรีเฟสหน้าใหม่แล้วจึงเลือนลงมาคอมเม้นได้ แต่..ผมอยากให้มันแสดงอัตโนมัติเลยไม่ต้องคลิกเข้าไป สามารถคอมเม้นได้เลยจะได้มั้ยคับ ขอบคุณคับ

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

ถ้าต้องการกล่อง Comment แบบนั้นก็สามารถทำได้ด้วยวิธีตามลิงก์ข้างล่างนี้ครับ
http://tip.maxlayout.com/2013/11/blogger-display-facebook-comment-on-index-page.html

Unknown กล่าวว่า...

ใส่แล้วมันตีกับ Blogger comment อะครับ พอมีคอมเมนต์ของ Blogger แล้วมันจะไม่แสดงคอมเมนต์ Facebook เลย ทำยังไงให้มันอยู่ด้วยกันด้อะครับ

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

ถ้าต้องการแสดง Comment ไปพร้อมกันแบบนั้นก็สามารถทำได้ด้วยวิธีตามลิงก์บทความข้างล่างนี้ครับ
http://tip.maxlayout.com/2013/12/blogger-add-facebook-comment-with-blogger-comment.html

Unknown กล่าวว่า...
ความคิดเห็นนี้ถูกผู้เขียนลบ
Unknown กล่าวว่า...

ขอบคุณครับ ขอถามอีกนิดหนึ่ง ผมหาโค้ด quickedit pencil ไม่เจอ ตรงนี้ไม่ทราบว่ามันมีอยู่แต่แรกหรือเราต้องปรับอะไรก่อนถึงจะเจอครับ

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

โค้ด quickedit pencil นั้นจะมีอยู่ตั้งแต่แรกของแต่ละเทมเพลทอยู่แล้วครับ
โดยถ้าลองสังเกตจะเห็นบรรทัดที่อยู่ถัดลงมาถูกเขียนไว้ว่า
<b:include data='post' name='postQuickEdit'/>
ซึ่งเป้นโค้ดสั่งแสดง "ไอคอนรูปดินสอ" สำหรับให้เจ้าของบล็อกกดเป็นทางลัดเข้าไปแก้ไขแต่ละบทความอย่างรวดเร็ว
โดยถ้าหากว่าโค้ด <!-- quickedit pencil --> ไม่มีแสดงอยู่ แต่ว่าเมื่อล็อกอินเข้าสู่บล็อกในฐานะเจ้าของแล้วยังสามารถมองเห็นไอคอนดินสอนั้นในหน้าแรกได้ ก็ให้ลองค้นหาโค้ดในบรรทัดที่กล่าวมาแทนดูครับ

อย่างไรก็ตามการใส่ "นับจำนวน Facebook Comment" ตามขั้นตอนที่ 4 ในบทความนั้นสามารถเปลี่ยนไปใส่ที่อื่นซึ่งไม่ใช่บริเวณดินสอก็ได้ตามส่วนอธิบายเพิ่มเติมครับ

Unknown กล่าวว่า...

ผม hide ตัว default comments เดิมแล้ว
ติดFacebook comments box ตามบทความนี้
สมมุติว่า มี user comments แล้วอยากให้มันแจ้งเตือนไปที่ fanpage หรือ facebook จะมีวิธีการทำอย่างไรครับ

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

เกี่ยวกับ Facebook Comment ชนิดแจ้งเตือนเมื่อมีคอมเมนต์ใหม่นั้นให้ลองดูรายละเอียดตามลิงก์นี้ครับ
http://developers.facebook.com/setup/
ส่วนขั้นตอนการสร้างนั้นหากลอง Search ดูก็จะพบผลการค้นหาที่มีผู้อธิบายไว้มากมายครับ

Unknown กล่าวว่า...

ขอบคุณครับ ดีมากเลย

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

พื้นสีมีแค่ dark กับ light เหรอครับ อยากได้สีอื่นทำไงแบบว่ามันไม่เข้ากับ สีblog

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

ปัจจุบันมี data-colorscheme ให้เลือกแค่สองแบบครับ

NatzNerd กล่าวว่า...

กำลังหาอยู่พอดี

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

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