How to Add a Facebook Comments in Blog
|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
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