Cara Memasang Komentar Facebook Responsive di Blogger

10/13/2015
Cara Memasang Komentar Facebook Responsive di Blogger

Cara Memasang Komentar Facebook Responsive di Blogger - Masih membahas seputar komentar, tutorial kedua hari ini Arlina Design akan berbagi tentang cara memasang komentar facebook yang responsive di blog. Manfaat memasang komentar facebook di blogger ini memungkinkan pengunjung dapat berkomentar langsung di artikel yang ia baca dengan menggunakan akun facebook.

Baca juga : Mengatasi Thumbnail Share Post Facebook

Bagi yang ingin mencobanya, silakan ikuti langkah berikut

Cara Memasang Komentar Facebook Responsive di Blogger


1. Tambahkan meta tag facebook di bawah ini di dalam template tepat di bawah <head>

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

Catatan : Jika sudah menerapkan langkah di atas, silakan lewati lanjut ke langkah berikutnya

2. Tambahkan kode di bawah ini 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>

3. Selanjutnya tambahkan kode di bawah ini tepat di bawah kode <data:post.body/> yang ada di halaman post

<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>

4. Simpan template.

Silakan lihat demo di bawah ini (Scroll ke area komentar facebook) :


Untuk menampilkan comment count facebook di halaman index dan post, silakan tambahkan kode di bawah ini pada markup post meta atau post info sesuai dengan template 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>


Demikian tutorial tentang Cara Memasang Komentar Facebook Responsive di Blogger, semoga bermanfaat.

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

4 comments

Terima kasih sharingnya mbak, udah terpasang coment facebook sekarang di blog saya
www.kalautau.com

Balas

kak kenapa tiap saya komentar dengan koment facebook diblog harus verifikasi gambar trs ya?? trs ada peringatan suruh hapus tautan link gituh, tlong solusinya kak. saya pakai skrip dari kakak diatas. tlong di cek blog saya bolatop(dot)top. Mksih kak sblumnya saya tunggu blsannya

Balas

Saya mencoba memasang template blog yang sudah ada fitur komentar facebook, tapi kok komentar blogger jadi hilang ya Mbak?

Balas

terimaksih mbak arlina untuk cara buat kotak komentar fb nya

Balas

Silakan tambahkan komentar sesuai dengan topik dan komentar dengan link akan dihapus, terima kasih.