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 | 4.925 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       

Adi Sumaryadi - Bicara IT dan Internet






Web Design Development Lainnya
Tahapan Web Development : Design (3)
Rabu, 26 Februari 2014 23:28 WIB
Tahapan Web Development : Design (3)
Web Design adalah tahapan yang sangat krusial menurut saya, istilahnya ini adalah kesan pertama untuk calon pengunjung website anda, setelah itu keputusan ada ditangan pengunjung. Sangat yang tepat saat ini mencurahkan kreatifitas anda dalam design, namun demikian untuk case website banyak yang harus diperhatikan antara lain
Tahapan Web Development : Website Planing (2)
Kamis, 13 Februari 2014 07:34 WIB
Tahapan Web Development : Website Planing (2)
Dalam tahap planing ini kita harus menyiapkan beberapa hal yang langsung berhubungan dengan teknis ataupun nonteknis terhadap website yang akan dibangun, antara lain
Tahapan Web Development : Information and Idea Gathering (1)
Kamis, 13 Februari 2014 07:24 WIB
Tahapan Web Development : Information and Idea Gathering (1)
Ibarat membangun sebuah rumah, maka ada tahapan-tahapan yang harus dilakukan terlebih dahulu supaya rumah yang dibangun dapat maksimal, pun begitu dengan membangun sebuah website. Apa saja tahapannya?
Mengenal Website dan Jenis-Jenisnya
Rabu, 29 Januari 2014 05:29 WIB
Mengenal Website dan Jenis-Jenisnya
Sebelum lebih jauh kita melihat tahapan-tahapan dalam membangun sebuah website, kita akan terlebih dahulu memahami apa website itu sendiri. Kalau disederhanakan website bisa diartikan sebagai kumpulan halaman-halaman web yang salah berhubungan dan kemudian dionlinekan menggunakan jaringan lokal maupun internet.
Merancang Content Website Tours and Travel
Sabtu, 05 Maret 2011 07:24 WIB
Merancang Content Website Tours and Travel
Media promosi tidak lagi terbatas pada media cetak dan elektronik berbasis televise dan radio yang cenderung harganya lebih mahal, alternative yang sangat mungkin dijangkau adalah dengan memanfaatkan internet, selain jangkauan yang luas mendunia, internet juga memungkinkan pemilik usaha dan layanan bisa langsung berinteraksi dengan calon client. Salah satu cara yang dilakukan dalam penggunaan internet adalah membangun website.
Oleh-oleh Seminar Citizen Journalism & Entrepreneurship Detik.com
Sabtu, 12 Februari 2011 14:56 WIB
Oleh-oleh Seminar Citizen Journalism & Entrepreneurship Detik.com
Sangat singkat waktunya namun cukup berkesan dan menarik, itu kalimat oleh-oleh yang saya bawa dari Acara Citizen Journalism & Entrepreneurship Detik.com Roadshow 7 Kota. Kehadiran BDI atau Budiono Darsono dan Raditya Dika menambah semarak acara ini.