Web Design Development
Memasang Facebook Comment Plugin Di Design Responsive

Memasang Facebook Comment Plugin Di Design Responsive

Oleh | Kamis, 21 Agustus 2014 08:40 WIB | 7.646 Views | Comments 2014-08-21 08:40:29

Facebook comment menjadi alternatif untuk menambah viral website kita sehingga mendatangkan trafik, namun terkadang plugin yang terpasang di design responsive tidak mengikuti design yang kita inginkan, salah satunya adalah Facebook Comment.

Ada beberapa jenis cara untuk menampilkan facebook comment diwebsite yang kita miliki yaitu dengan HTML5, XMLFB ataupun dengan menggunakan alternatif lain semisal iframe. Tapi kali ini saya akan coba memberikan tips dengan menggunakan HTML5. Berikut adalah kode yang bisa dipasangkan dibawah konten website anda.

<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/sdk.js#xfbml=1&appId=128225700537941&version=v2.0";
              fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-comments" data-href="{ISI_DENGAN_FULL_URL}" data-width="100%" data-numposts="10" data-colorscheme="light"></div>


Kode diatas akan menampilkan feKemudian pasang space untuk facebook komen tetapi tidak responsive. Nah untuk membuat responsive kita bisa menambahkan beberapa CSS Hack.

<style>
            #fbcomments, .fb_iframe_widget,
            .fb_iframe_widget[style],
            .fb_iframe_widget iframe[style],
            .fb_iframe_widget span,
            #fbcomments iframe [style]
            {
              width: 100% !important;
            }
  </style>

    
Sekarang coba akses halaman anda, apakah sudah responsive. Semoga berhasil yah       


Baca atau Download PDF Adi Sumaryadi - Bicara IT dan Internet

#






Mungkin anda tertarik menonton video tentang Mau Jadi Orang IT? Inilah Peta Jalan atau Roadmap yang Harus Ditempuh


Web Design Development Lainnya
Mengubah Ukuran Radio Button Menggunakan Pure CSS
Selasa, 31 Maret 2020 21:33 WIB
Mengubah Ukuran Radio Button Menggunakan Pure CSS
Tahapan Web Development : Design (3)
Rabu, 26 Februari 2014 23:28 WIB
Tahapan Web Development : Design (3)
Tahapan Web Development : Website Planing (2)
Kamis, 13 Februari 2014 07:34 WIB
Tahapan Web Development : Website Planing (2)