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

BERLANGGANAN VIA EMAIL

Seorang Lelaki yang Mendedikasikan Hidup di Online Marketing. Blogger, Youtuber, Tukang Review, Tukang Jalan jalan. Hubungi kami untuk Kerjasama

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

rxoroxr said...

cara pasangnya bijimane?

bagus prehan said...

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

Ajat Sudrajat Junaedi said...
This comment has been removed by the author.
Si Inkomik said...

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

Bagus Prehan said...

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

Aji Pgg said...

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

Blog : Aji-Apps

Bagus Prehan said...

Selamat bro...
oke meluncur :)

Risanty Sagitarius said...

blm paham :D

Bagus Prehan said...

Coba baca disini yang lebih mudah bro http://aikonmedia.blogspot.com/2013/11/komentar-facebook-responsive-dengan-css.html

lulus utami said...

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.

Bagus Prehan said...

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

ardi purnama said...

mntb bro

Heri Mulyo Cahyo said...

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

Bagus Prehan said...

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

Arif Rachman Hakim said...

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

Bagus Prehan said...

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

Anonymous said...

Terimakasih infonya, sangat membantu...

Bagus Prehan said...

terima kasih. semoga bermanfaat

andika pratama said...

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

Bagus Prehan said...

Selamat mencoba dan semoga berhasil

Sahabat MU said...

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


Apotek Herbal ACE MAXS said...

makasih banyak buat infonya,, nice post

http://goo.gl/by7OuJ