Wednesday, September 4, 2013

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

Related Posts

Cara Memasang Komentar Facebook Responsive di Blog
4/ 5
Oleh

22 komentar

September 26, 2013 at 7:28 PM delete

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

Reply
avatar
October 28, 2013 at 10:35 AM delete This comment has been removed by the author.
avatar
November 20, 2013 at 3:57 AM delete

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

Reply
avatar
November 20, 2013 at 12:17 PM delete

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

Reply
avatar
November 21, 2013 at 5:41 PM delete

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

Blog : Aji-Apps

Reply
avatar
January 7, 2014 at 2:11 PM delete

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.

Reply
avatar
January 7, 2014 at 7:28 PM delete

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

Reply
avatar
February 4, 2014 at 1:44 PM delete

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

Reply
avatar
February 4, 2014 at 5:17 PM delete

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

Reply
avatar
February 13, 2014 at 1:56 PM delete

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

Reply
avatar
February 13, 2014 at 2:23 PM delete

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

Reply
avatar
February 13, 2014 at 2:24 PM delete

Terimakasih infonya, sangat membantu...

Reply
avatar
June 26, 2014 at 3:15 PM delete

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

Reply
avatar
June 26, 2014 at 11:49 PM delete

Selamat mencoba dan semoga berhasil

Reply
avatar
February 17, 2015 at 6:50 PM delete

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


Reply
avatar
March 31, 2015 at 2:22 PM delete

makasih banyak buat infonya,, nice post

http://goo.gl/by7OuJ

Reply
avatar
New comments are not allowed.