Cara Memasang Komentar Facebook Responsive di Blog

Apa mungkin Facebook Comment bisa di buat responsive? Mungkin sekali, hanya dengan menambahkan beberapa kode seperti CSS, JQuery, dan JavaScript. Bagi yang sudah memasang kotak komentar facebook, tutorial ini cocok kamu terapkan di blog kamu yang sudah mendukung fitur responsive.

Apa itu komentar facebook responsive ?

Komentar facebook responsive adalah kotak komentar jejaring sosial facebook yang dibuat responsive. Hal ini di lakukan untuk mendukung bagi yang menggunakan template responsive. Responsive artinya lebar ukuran yang selalu menyesuaikan, lebar ukuran layar.

Script ini saya dapatkan dari blognya mkr-site.blogspot.com, ketika saya sedang mencari tutorial ini.

Cara Memasang Komentar Facebook Responsive di Blog

Berikut cara memasang/membuat komentar facebook menjadi responsive:

Untuk teman-teman yang belum tahu cara memasangnya bisa membaca di artikel saya yang berjudul Cara Memasang Kotak Komentar Facebook.

Yang perlu kamu lakukan adalah menambahkan kode javascript ini:
<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>
Copy dan Paste Javascriptnya, di atas kode </head>

Kode FB Komennya seperti ini:
<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>

Keterangan:

  • Yang berwarna merah adalah kode FB komen asli
  • Yang berwarna biru adalah kode javascript untuk merubahnya menjadi responsive
  • Yang berwarna hijau adalah kode tambahan untuk merubahnya menjadi responsive


Jika bingung, hapus semua kode facebook komen yang ada di blog kamu, lalu di ganti dengan kode yang sudah saya berikan diatas.

Kode diatas akan bekerja jika kamu juga menggunakan template blogger responsive. Semoga artikel Cara Memasang Komentar Facebook Responsive di Blog ini mudah di pahami dan bermanfaat untuk teman-teman semua. Jika ada kesulitan silahkan tanyakan di kolom komentar. Terima kasih

22 Responses to "Cara Memasang Komentar Facebook Responsive di Blog"

  1. Replies
    1. Jika bingung,, letakan kode javascriptnya di atas </head>

      Delete
  2. This comment has been removed by the author.

    ReplyDelete
  3. gak ngefek gan. Tete aja melewati pembatas blog. Jadinya kelihatan aneh.

    ReplyDelete
    Replies
    1. Maaf gan, ada kode yang masih ketinggalan. Sekarang sudah saya update
      Terima kasih

      Delete
  4. Thanks Tipsnya Mas, sudah sukses di blog saya...
    Mampir ya...

    Blog : Aji-Apps

    ReplyDelete
  5. Saya pasang di -post-footer-line post-footer-line-2- masih gagal, namun akan saya coba trik berikutnya yang anda sarankan di komentar fb diatas. Terimakasih sebelumnya.

    ReplyDelete
    Replies
    1. coba pasang di bawah kode <div class='comments' id='comments'> yang pertama
      Terima kasih

      Delete
  6. sudah keluar gan... cuman emang ada tambahan ini:
    -----------------------------------------------------------------------------------------
    Read more: http://aikonmedia.blogspot.com/2013/07/cara-memasang-kotak-komentar-facebook.html#ixzz2lGLGk3Rt
    Follow us: @baguztguzt on Twitter | baguzt.guzt on Facebook

    --------------------------------------------------------------------------------------

    apa gak bisa dibuat short url (link aktif) jadi gak kepanjangan heheh

    ReplyDelete
    Replies
    1. Enggak gan. Di hapus aja jika URLnya nyisip di html.
      itu cuman buat yang copas artikel biar ada sumber linknya.

      Delete
  7. kurang dikasih meta tagnya mas, biar komentar fbnya bisa dimoderat...

    ReplyDelete
    Replies
    1. kalau mau bikin komen facebook biar di moderet sih memang betul harus di kasih meta tag facebook. kalau masalah ini sudah di bahas di artikel lainnya.
      artikel yang ini cuman fokus pada membuat kotak facebook responsive saja.
      Terima kasih masukkannya :)

      Delete
  8. Terimakasih infonya, sangat membantu...

    ReplyDelete
  9. dicoba dulu ah ,, tutor cara-memasang-komentar-facebook-responsive-di-blog nya ,,, ditunggu kunbal nya di anprat.blogspot.com tmakasih skali lagi gan

    ReplyDelete
  10. Informasi yang sangat bermanfaat. Terima kasih untuk admin.
    Semoga dapat menambah wawasan Saya dengan topik yang telah admin bahas.
    Visit: Aplikasi Android Terpopuler 2015


    ReplyDelete
  11. makasih banyak buat infonya,, nice post

    http://goo.gl/by7OuJ

    ReplyDelete