How to Add a Facebook Comments in Blog

How to Add a Facebook Comments in Blog - because the template that I created does not use facebook comment box. so I made a tutorial how to add facebook comments were mild with the help setTimeout makes blogs is not heavy. please follow the instructions below.

Adding a Facebook Plugin Comment on the BlogAdding Javascript Facebook
javascript is not only useful on facebook comment, but other facebook plugin like fan page plugin, like button, the share button and more.

Go to Blogger > Yourblog > Template > Edit HTML > Find <body (CTRL + F in editor)

Add the code below after html <body

<div id="fb-root"></div>
<script type='text/javascript'>//<![CDATA[
setTimeout( function () {
(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/en_US/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
}, 2000);
//]]></script>

Then Save Template

NB : If this code already exists please replace the above code so that fast blog

Adding HTML Facebook Comments

Go to Blogger > Yourblog > Template > Edit HTML > Find <b:include data='post' name='threaded_comments'/> (CTRL + F in editor)

You will find 2 html the same as below

<b:if cond='data:blog.pageType == "static_page"'>
  <b:include data='post' name='threaded_comments'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
  <b:include data='post' name='threaded_comments'/>
</b:if>

Then Replace with the code below

<b:if cond='data:blog.pageType == "item"'>
  <div id='fb-comments'><div class="fb-comments" expr:data-href="data:post.url" data-numposts="5"></div><div class='clear'/></div>
  <b:include data='post' name='threaded_comments'/>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
  <div id='fb-comments'><div class="fb-comments" expr:data-href="data:post.url" data-numposts="5"></div><div class='clear'/></div>
  <b:include data='post' name='threaded_comments'/>
</b:if>

Save Template

Adding CSS Facebook Comments
because facebook comment unresponsive, then you need to add this css and also add spacing between the facebook comments and the comments box blogger.

Go to Blogger > Yourblog > Template > Edit HTML > Find */]]></b:skin> or </style>(CTRL + F in editor)

Add css below after html */]]></b:skin> or </style>

#fb-comments{display:block;margin:15px auto;}
.fb_iframe_widget,.fb_iframe_widget span,.fb_iframe_widget span iframe[style]{min-width:100%!important;width:100%!important}

Then Save Template

Source Script Facebook : http://stackoverflow.com/questions/15349867/defer-loading-of-facebook-like-button-script

Cara menambahkan kotak komentar facebook di blog - karena template yang saya buat tidak menggunakan kotak komentar facebook. maka dari itu saya membuatkan tutorial cara menambahkan kotak komentar dengan bantuan "setTimetout" yaitu biar blog tetap ringan. bagi yang ingin membuatnya silahkan ikuti tutorial dibawah ini.

Menambahkan Plugin Kotak Komentar Facebook di BlogMenambahkan Javascript Facebook
javascript ini bukan hanya berguna pada kotak komentar facebook, tetapi plugin facebook lainnya seperti, tombol suka, tombol share, dan lainnya.

Pergi ke Blogger > Blogmu > Template > Edit HTML > Cari Kode <body (CTRL + F pada saat di editor)

Tambahkan kode dibawah ini sesudah kode <body

<div id="fb-root"></div>
<script type='text/javascript'>//<![CDATA[
setTimeout( function () {
(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/en_US/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
}, 2000);
//]]></script>

Lalu Save Template

NB : bagi yang sudah punya kode yang mirip seperti diatas saya sarankan ganti kode yang ada di blog mu dengan kode diatas ini.

Menambahkan HTML Kotak Komentar Facebook

Pergi ke Blogger > Blogmu > Template > Edit HTML > Cari kode <b:include data='post' name='threaded_comments'/> (CTRL + F pada saat di editormu)

Kamu akan melihat 2 kode yang sama seperti contoh dibawah ini

<b:if cond='data:blog.pageType == "static_page"'>
  <b:include data='post' name='threaded_comments'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
  <b:include data='post' name='threaded_comments'/>
</b:if>

kalau udah ketemu silahkan ganti sama kode dibawah ini

<b:if cond='data:blog.pageType == "item"'>
  <div id='fb-comments'><div class="fb-comments" expr:data-href="data:post.url" data-numposts="5"></div><div class='clear'/></div>
  <b:include data='post' name='threaded_comments'/>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
  <div id='fb-comments'><div class="fb-comments" expr:data-href="data:post.url" data-numposts="5"></div><div class='clear'/></div>
  <b:include data='post' name='threaded_comments'/>
</b:if>

Lalu Save Template

Menambahkan CSS Kotak Komentar Facebook
karena kotak komentar facebook tidak responsive, maka kamu harus menambahkan kode css dibawah ini dan juga membuat jarak bagi kotak komentar facebook dan kotak komentar google.

Pergi ke blogger > Blogmu > Template > Edit HTML > Cari kode */]]></b:skin> atau </style>(CTRL + F pada saat di blog)

Tambahkan css dibawah ini sebelum kode */]]></b:skin> atau </style>

#fb-comments{display:block;margin:15px auto;}
.fb_iframe_widget,.fb_iframe_widget span,.fb_iframe_widget span iframe[style]{min-width:100%!important;width:100%!important}

Lalu Klik Save Template

Source Script Facebook : http://stackoverflow.com/questions/15349867/defer-loading-of-facebook-like-button-script

AriefCoeg

How to Add a Facebook Comments in Blog

0 komentar:

Posting Komentar