Cara Membuat komentar facebook ada di blogspot

Cara membuat komentar facebook ada di blogspot. 

Kalian pasti pernah berkunjung ke blog yang memasang cara seperti ini, contohnya seperti di blog saya sendiri. Sebelum melakukan cara di bawah ini sebaiknya backup terlebih dahulu templeat kalian, dan pindahkan ke notepad. ini bertujuan untuk menjaga jika terjadinya eror pada templeat kalian, bisa pasang kembali kode templeat yang kalian backup sebelumnya.

Cara memasang komentar facebook di blog

1.Masuk ke akun blogger 
2.pilih menu templeat,Edit HTML
3.Gunakan (CTRL+F ) dan cari kode seperti ini <div class='comments'id='comments'>
4.Selanjutnya,Letakan kode di bawah ini,Tepat di bawah kode <div class='comments'id='comments'>

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</div>
<div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='letakan id facebook kalian disini' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>
<style>.comments-page { background-color: #f2f2f2;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}</style>

5.Ganti kata ( Letakan id facebook kalian disini ) dengan id facebook kalian.

Simpan dan lihat hasilnya.

Jika kalian sudah memasang kotak komentar seperti di atas, cara di bawah ini sangat bagus jika di terapkan di blog kamu yang sudah mendukung fitur Revonsive.

Langkah-Langkah di bawah ini sama seperti Langkah yang sebelumnya kalian lakukan seperti cara di atas. langkahnya sederhana sob, Yang kalian lakukan hanya menambahkan kode Javascript di bawah ini

Letakan kode di bawah ini tepat di atas kode </head>

<script type="text/javascript">
//<![CDATA[
$(window).bind("load resize", function(){
  var url = location.protocol+'//'+location.host+location.pathname;
  var containercm_width = $('#container-commentfb').width();
    $('#container-commentfb').html('<div class="fb-comments" ' +
    'data-href="'+url+'"' +
    ' width="' + containercm_width + '" data-num-posts="10"></div>');
    FB.XFBML.parse( );
});
//]]>
</script>

 Selanjutnya letakan kode di bawah ini di bawah kode <div class='comments'id='comments'>

<b:if cond="data:blog.pageType == &quot;item&quot;">
<h4>Post Comment</h4>
<div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div id='container-commentfb' style='width: 100%'><fb:comments expr:href='data:post.url' num_posts='5' width='500'/></div>
</b:if>

Sangat sederhana bukan sob ? Demikian tutorial sederhana dari saya, Semoga dapat membantu. Terimakasih.

Tweet

Postingan terkait:

— Senin, 19 Desember 2016 — Add Comment — tips blogging