Memasang Facebook Comment Plugin Di Design Responsive

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