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




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

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+

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

ขอบคุณครับ

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 กล่าวว่า...

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

anonymousie กล่าวว่า...

HF88TH Casino online ตอบเร็ว มั่นใจได้ พร้อมให้บริการ

ประสบการณ์การเกมส์ Casino online ตอบเร็ว มั่นใจได้ พร้อมให้บริการ ที่เราจะพาคุณไปสัมผัสความมีระดับในการให้บริการมอบแนวคิดวิธีการณ์ใหม่ๆ ให้คุณดื่มด่ำ และร่วมเปิดประสบการณ์ ตื่นเต้นสุดเร้าใจไปกับเราด้วยทีมงานมืออาชีพ อีกทั้งยังมี ​MC สาวสวยสุดเซ็กซี่พร้อมที่จะร่วมสนุกไปกับคุณ และเกมในคาสิโนมีมากมายหลากหลายประเภท เช่น บาคาร่า สล๊อต รูเล็ต และอื่นๆอีกมากมาย และยังทำให้ความรู้สึกสมจริง เหมือนสมาชิกกำลังเดิมพันอยู่ใน คาสิโน จริงๆ ผ่านการให้ บริการพนันและเดิมพันกันผ่าน ระบบถ่ายทอดสดวินาทีต่อวินาที เช่น บาคาร่า รูเล็ตและเกมส์อื่นๆ เพื่อให้บริการท่านสมาชิกสุดแสนประทับใจ ตลอดในช่วงการเดิมพันของคุณที่แสนตื่นเต้นทุก 24 ชั่วโมง

ทุกครั้งที่จะเล่นคาสิโน มั่นใจ https://hf88th.com เท่านั้น!!

anonymousie กล่าวว่า...

HF88BET https://hf88bet.net

Được xây dựng và phát triển hơn 10 năm trong ngành game cá cược online, nhà cái HF88BET đã và đang dẫn đầu Châu Á bởi sự uy tín và chất lượng dịch vụ của mình. Cảm ơn bạn đã tin tưởng và lựa chọn chúng tôi!

anonymousie กล่าวว่า...

HF88TH Casino online ตอบเร็ว มั่นใจได้ พร้อมให้บริการ

ประสบการณ์การเกมส์ Casino online ตอบเร็ว มั่นใจได้ พร้อมให้บริการ ที่เราจะพาคุณไปสัมผัสความมีระดับในการให้บริการมอบแนวคิดวิธีการณ์ใหม่ๆ ให้คุณดื่มด่ำ และร่วมเปิดประสบการณ์ ตื่นเต้นสุดเร้าใจไปกับเราด้วยทีมงานมืออาชีพ อีกทั้งยังมี ​MC สาวสวยสุดเซ็กซี่พร้อมที่จะร่วมสนุกไปกับคุณ และเกมในคาสิโนมีมากมายหลากหลายประเภท เช่น บาคาร่า สล๊อต รูเล็ต และอื่นๆอีกมากมาย และยังทำให้ความรู้สึกสมจริง เหมือนสมาชิกกำลังเดิมพันอยู่ใน คาสิโน จริงๆ ผ่านการให้ บริการพนันและเดิมพันกันผ่าน ระบบถ่ายทอดสดวินาทีต่อวินาที เช่น บาคาร่า รูเล็ตและเกมส์อื่นๆ เพื่อให้บริการท่านสมาชิกสุดแสนประทับใจ ตลอดในช่วงการเดิมพันของคุณที่แสนตื่นเต้นทุก 24 ชั่วโมง

ทุกครั้งที่จะเล่นคาสิโน มั่นใจ https://hf88th.com เท่านั้น!!

anonymousie กล่าวว่า...

HF88BET https://hf88bet.com

HF88bet là cổng thông tin chính thức chính thức của nhà cái uy tín KU cung cấp những trò chơi cá cược thể thao, casino trực tuyến hấp dẫn: Baccarat, Rồng hổ, Sicbo, Ngầu hầm, Ba tây, Bắn cá,…

Khách hàng của Hf88bet luôn yên tâm tận hưởng những giây phút thư giãn bởi HF88bet hoạt động dưới sự quản lý của PAGCOR (Philippine Amusemeent and Gaming Corporation) – Tập đoàn Giải trí và Trò chơi Philippnes.

Chúng tôi luôn nỗ lực cố gắng cải thiện chất lượng dịch vụ từng ngày để có thể mang tới sự hài lòng và tin tưởng cho khách hàng.

Cảm ơn bạn đã lựa chọn HF88BET

โพสต์ความคิดเห็น