Menambahkan komentar Facebook Di Blogspot

Mungkin agan agan sudah banyak yang tau cara menambahkan komentar facebook di blog agan. Di blog Basecamp Setiakawan  share gimana cara cepat menambahkan komentar Facebook tanpa ribet gitu..

Oke gan langsung ke TKP.
  1. Pertama Login di Blogspot.
  2. Ke Rancangan lalu Edit HTML kemudian centang Expand Template Widget
  3. Cari kode <div class='comments' id='comments'> 
  4. Untuk memudahkan pencarian tekan Ctrl + F di keyboard agan.
Ket: Jika kode <div class='comments' id='comments'> ada 2, Copy paste kode dibawah ini tepat dibawah kode <div class='comments' id='comments'> yang ke-2.

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' 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(&quot;#blogger-comments&quot;);' 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 == &quot;item&quot;'>
<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='http://www.facebook.com/basecampsetiakawan' 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>

Ganti http://www.facebook.com/basecampsetiakawan dengan ID facebook FunPage agan. 
Kemudian Save dan lihat hasilnya.

Sekian dulu pemirsa...
Salam OlahRaga Otak.

    1 Komentar

    Posting Komentar
    Lebih baru Lebih lama