» » » Membuat Form Komentar Facebook Responsive

Membuat Form Komentar Facebook Responsive

22.06
0 komentar

Beberapa minggu yang lalu saya pernah membuat postingan tentang "Membuat Desain Website Menjadi Responsive". Untuk kesempatan kali ini saya akan membahas tentang "Membuat Form Komentar Facebook Responsive", saya mendapatkan ide untuk memposting ini dari salah satu pengunjung di blog ini MDF-Blog yang berkomentar pada postingan saya tentang "Membuat Desain Website Menjadi Responsive",

Update 10 Maret 2013 //Tips dari MKR-site
Kode untuk Facebook Comments:
» Letakkan kode berikut ini dibawah kode <body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/id_ID/all.js#xfbml=1&appId=ID aplikasi anda";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Ganti tulisan ID aplikasi anda dengan ID aplikasi facebook yang sudah anda buat
» Kemudian letakkan kode ini pada template anda
<div class='fb-comments' expr:data-href='data:post.url' data-width='470' data-num-posts='10' ></div>
data-width='470' //Lebar maksimal form komentar facebook
data-num-posts='10' //Jumlah komentar yang ditampilkan dan sisanya disembunyikan.

Kode CSS form komentar Facebook agar bisa menjadi responsive
.fb-comments, .fb-comments span, .fb-comments iframe[style] {
width: 100% !important;
}
Untuk penerapan pada bagian CSS responsive, kurang lebih seperti ini:
@media screen and (max-width: 768px){
#outer-wrapper {width:600px}
#main-wrapper {width:600px}
.fb-comments, .fb-comments span, .fb-comments iframe[style]
 {width:100% !important;}
}
@media screen and (max-width: 480px){
#outer-wrapper {width:400px}
#main-wrapper {width:400px}
.fb-comments, .fb-comments span, .fb-comments iframe[style]
 {width:100% !important;}
}
Jadi intinya kita hanya menambahkan kode CSS berikut ini 
.fb-comments, .fb-comments span, .fb-comments iframe[style] {
width: 100% !important;
}
pada bagian CSS responsivenya dan kita hanya tinggal mengatur width/lebarnya sesuia kebutuhan. 
Semoga bermanfaat.
"mendapatkan hikmah dari apa yang orang lakukan atau berikan kepada kita".
Share:

Posting Komentar

Catatan: (memasukan item pada komentar)
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>

Link aktif akan dimatikan secara otomatis.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

NB: Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (Out Of Topic) dengan menekan tombol OOT di bawah ini.
Back to Top