Blogger: ติดตั้ง Facebook Comment ที่คอมเมนท์จำแนกตามเนื้อหาแต่ละหน้า

[Update: 2013-04-13] Facebook Comment ที่จำแนกตามเนื้อหาแต่ละหน้า จะเป็นกล่องคอมเมนท์ที่แสดงความคิดเห็นของแต่ละบทความแบบแยกส่วนออกจากก...



[Update: 2013-04-13]



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

COMMENTS

BLOGGER: 2

ชื่อ

การตลาดออนไลน์,4,กิจกรรม,1,บทความ,1,ประชาสัมพันธ์,5,วิธีใช้งาน cPanel,2,วิธีใช้งาน FTP,1,วิธีใช้งาน Manage,1,หารายได้ด้วยเว็บไซต์,2,Blogger,1,cloud,3,CodeGuard,1,Database Security,1,Data Security and Privacy,1,Design,3,development,3,Facebook,1,hosting,11,HTML,3,IT Competition,2,IT Knowledge,20,linux,1,MongoDB,1,Network Security,2,Photoshop,1,php,1,Plugin,1,Products,1,professional websites,3,Security,5,SEO,4,Theme WordPress,1,Threats Update,3,Vulnerability and Risk Management,3,Web Security,3,website,12,Website Builder,3,website building toos,3,Weebly,1,WordPress,5,
ltr
item
Peedam Hosting Blog : อุทยานแห่งการเรียนรู้ด้านเว็บไซต์: Blogger: ติดตั้ง Facebook Comment ที่คอมเมนท์จำแนกตามเนื้อหาแต่ละหน้า
Blogger: ติดตั้ง Facebook Comment ที่คอมเมนท์จำแนกตามเนื้อหาแต่ละหน้า
https://3.bp.blogspot.com/-1eJsD9BuX7w/Wv11-94dcuI/AAAAAAAAIuU/7tVy9ubJqE07WKdTTrcWidouRoQs0HVswCLcBGAs/s640/2000px-Facebook_New_Logo_%25282015%2529.svg.png
https://3.bp.blogspot.com/-1eJsD9BuX7w/Wv11-94dcuI/AAAAAAAAIuU/7tVy9ubJqE07WKdTTrcWidouRoQs0HVswCLcBGAs/s72-c/2000px-Facebook_New_Logo_%25282015%2529.svg.png
Peedam Hosting Blog : อุทยานแห่งการเรียนรู้ด้านเว็บไซต์
https://blog.peedamhosting.com/2018/05/blogger-facebook-comment.html
https://blog.peedamhosting.com/
https://blog.peedamhosting.com/
https://blog.peedamhosting.com/2018/05/blogger-facebook-comment.html
true
8681631110740510278
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy