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 Rio Viber4rt 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>
» Kemudian letakkan kode ini pada template anda
data-num-posts='10' //Jumlah komentar yang ditampilkan dan sisanya disembunyikan.
Kode CSS form komentar Facebook agar bisa menjadi responsive
Update 10 Maret 2013 //Tips dari MKR-site
Kode untuk Facebook Comments:
» Letakkan kode berikut ini dibawah kode <body>
Ganti tulisan ID aplikasi anda dengan ID aplikasi facebook yang sudah anda buat<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>
» Kemudian letakkan kode ini pada template anda
data-width='470' //Lebar maksimal form komentar facebook<div class='fb-comments' expr:data-href='data:post.url' data-width='470' data-num-posts='10' ></div>
data-num-posts='10' //Jumlah komentar yang ditampilkan dan sisanya disembunyikan.
Kode CSS form komentar Facebook agar bisa menjadi responsive
Untuk penerapan pada bagian CSS responsive, kurang lebih seperti ini:.fb-comments, .fb-comments span, .fb-comments iframe[style] { width: 100% !important; }
@media screen and (max-width: 768px){
#outer-wrapper {width:600px}
#main-wrapper {width:600px}
{width:100% !important;}.fb-comments, .fb-comments span, .fb-comments iframe[style]
}
@media screen and (max-width: 480px){
#outer-wrapper {width:400px}
#main-wrapper {width:400px}
{width:100% !important;}.fb-comments, .fb-comments span, .fb-comments iframe[style]
}
Jadi intinya kita hanya menambahkan kode CSS berikut ini
pada bagian CSS responsivenya dan kita hanya tinggal mengatur width/lebarnya sesuia kebutuhan..fb-comments, .fb-comments span, .fb-comments iframe[style] { width: 100% !important; }
Semoga bermanfaat.
"mendapatkan hikmah dari apa yang orang lakukan atau berikan kepada kita".
0 comments:
Post a Comment
Google/Blogger : Khusus yang punya Account Blogger.
Lainnya : Jika tidak punya account blogger namun punya alamat Blog atau Website.
Anonim : Jika tidak ingin mempublikasikan profile anda (tidak disarankan).