New Facebook Like Box With Iframe On Javascript

Seperti kita ketahui baru-baru ini Facebook telah mengupdate widget-widgetnya, salah satunya yaitu Facebook Like Box menjadi tampilan yang lebih modern dengan menampilkan page cover pada widgetnya.

Namun berbeda dengan sebelumnya, Facebook tidak menyediakan pilihan pemasangan kode widgetnya. Hanya berupa kode HTML5 seperti gambar di bawah ini, dan ini akan lumayan memberikan beban pada loading blog dari js-nya.


Nah kali ini saya akan memberikan pilihan lain untuk memasang FB Like Box dengan menggunakan iframe dari hasil coba-coba, ternyata berhasil dan bisa digunakan siapa saja serta lumayan ringan karena tidak memberikan js tambahan di blog. Dan penggunaan iframe ini menggunakan javascript agar tidak error validasi HTML5 seperti yang sudah saya jelaskan pada postingan sebelumnya.

Yang ingin mencobanya silahkan gunakan kode di bawah ini. Simpan pada gadget HTML/Javascript di sidebar blog Anda.


<script type="text/javascript">
//<![CDATA[
document.write('<iframe src="http://www.facebook.com/v2.3/plugins/page.php?app_id=&amp;channel=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter%2FNM7BtzAR8RM.js%3Fversion%3D41%23cb%3Df37a7397d8%26domain%3Dkompiajaib.com%26origin%3Dhttp%253A%252F%252Fkompiajaib.com%252Ff1f37dc2f8%26relation%3Dparent.parent&amp;container_width=300&amp;hide_cover=false&amp;href=https%3A%2F%2Fwww.facebook.com%2Fkompiajaib&amp;locale=en_US&amp;sdk=joey&amp;show_facepile=false&amp;show_posts=false&amp;width=300" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" style="border: none; visibility: visible; width: 300px; height: 130px;" class=""></iframe>');
//]]>
</script>

kompiajaib.com silahkan ganti dengan domain blog Anda (ada 2 buah).
kompiajaib silahkan ganti dengan username Page FB blog Anda.
Jika ingin menampilkan wajah follower silahkan rubah kode false menjadi true pada kode show_facepile=false dan rubah tinggi widgetnya pada kode height: 130px; menjadi height: 224px;

Nah semakin mudah bukan? Sebagai hasilnya akan seperti widget di bawah ini.

Tanpa Wajah Follower


Dengan Wajah Follower


On Codepen

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments