New Facebook Like Box With Iframe On Javascript

New Facebook Like Box With Iframe On Javascript

Bola Hero Gawai

New Facebook Like Box With Iframe On Javascript

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.

New Facebook Like Box With Iframe On Javascript

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

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

2 Comments Add Comment

Terima kasih tips like box fb nya kang Adhy,mau nanya apa frameborder="0", scrolling="no" sudah tidak masalah dengan valid html ya kang

Balas

Bukan tidak bermasalah, tapi dengan kode di atas menjadi tidak dibaca sebagai kode html iframe sehingga frameborder="0", scrolling="no" tidak akan error html5

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×