Top Ad 728x90

Cara Memasang Komentar Facebook Responsive Di Blogger

Cara Memasang Komentar Facebook Respnsive Di Blogger


Hallo sobat, kali ini kami akan membahas artikel seputar dunia blogger yaitu cara pasang komentar facebook di blogger tentunya sudah responsive. Artikel ini agar lebih memudahkan para pengunjung yang ingin berkomentar atau memberi tanggapan terhadap artikel blog kita menggunakan akun facebook. Caranya, simak di bawah ini !

Masuk ke dasbor blogger

Pilih template dan edit HTML

Cari kode <head> dan copykan meta tag berikut tepat di bawahnya

 <meta content='Kode ID Facebook admin' property='fb:admins'/>
<meta content='Kode ID Aplikasi Facebook' property='fb:app_id'/> 

Kemudian copikan kode jQuery berikut sebelum </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> 

Dan copikan kode HTML berikut tepat dibawah kode <data:post.body/>

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<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='10' width='650'/></div>
</b:if> 

Langkah terakhir simpan dan lihat hasilnya


Tambahan

Untuk menampilkan comment count di halaman index atau post cukup tambahkan kode berikut pada post info atau markup post meta pada template blog yang digunakan
 <a expr:href='data:post.url + &quot;#fb-comment&quot;'><span class="fb-comments-count" expr:data-href='data:post.url'></span> facebook comments</a> 

Itulah sedikit tutorial cara memasang komentar facebook responsive di blogger, selamat mencoba !

Sumber : http://www.arlinadzgn.com/2015/10/memasang.komentar.facebook.responsive.di.blogger.html

#Bantu Bagikan Artikel Kami Dong :)

0 komentar:

Post a Comment