Memasang Facebook Comment Plugin Di Design Responsive

Oleh Adi Sumaryadi pada Kamis, 21 Agustus 2014 08:40 WIB

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.

<data-style>

            #fbcomments, .fb_iframe_widget,

            .fb_iframe_widget[data-style],

            .fb_iframe_widget iframe[data-style],

            .fb_iframe_widget span,

            #fbcomments iframe [data-style]

            {

              width: 100% !important;

            }

  </data-style>

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