Ditulis oleh: Ditulis pada: 10/31/2014
Facebook Like Box Popup Widget Dengan URL Plugin - Terus mencoba meningkatkan performa loading blog, kini saya menemukan sebuah trik untuk menampilkan Facebook Like Box dengan popup window dengan memanfaatkan URL Plugin Code dari Facebook.
Sehingga dengan ini kita dapat mengurangi penggunaan Facebook JS yang jelas-jelas membebani loading blog.
Masih ingat dengan postingan saya tentang popup window pada link follow this blog? Ini pun memanfaatkan javascript yang sama seperti popup window pada link follow this blog. Dibanding dengan Facebook JS (pihak ketiga), javascript ini sangat ringan karena tidak tergantung dengan jquery library.
Pada mulanya saya tidak mengerti untuk apa kode plugin URL di Facebook Developer sehingga tidak pernah mengutak-ngatiknya. Kemudian saya mencoba mengaksesnya dan ternyata mengarah ke halaman Facebook like box dalam halaman tersendiri.
Kemudian saya baru ingat, kenapa tidak dibuat popup window saja, sehingga dengan itu kita tidak menggunakan Facebook JS untuk menampilkan widgetnya untuk mengurangi waktu loading blog.
Bagi yang ingin mencobanya, silahkan gunakan kode di bawah ini. Paste kodenya pada gadget HTML/JavaScript di sidebar.
<style type="text/css" scoped>
.facebox{width:100%;padding:0;margin:0 auto;text-align:left;}
.kompifb{font-weight:bold;margin-bottom:5px;color:#333}
img.kompi-fb {width: auto;max-width: 100%;height: auto;}
</style>
<div class="facebox">
<div class="kompifb">Kompi Ajaib on Facebook</div>
<a href="javascript: void(0)" onclick="popup1('http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fkompiajaib&width=300&height=290&colorscheme=light&show_faces=true&header=true&stream=false&show_border=true')" title="Kompi Ajaib on Facebook"><img class="kompi-fb" alt="Kompi Ajaib Facebook" height="89" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgESk82aCrlVeMxhRJh6A3IthaZL-v2XIOmsY-MOpB27QslqejOPLgAqYbpAfBjE5RMNBT6cWoMJbTCW5MdzfNFUbtGxNwAYcRr6FxvZ3ql0qXlF1msfZfhGPQEvm8NeK9-ZXRuhJHUOV8L/s1600/like-us-on-facebook.gif" width="300" title="Kompi Ajaib on Facebook"/></a>
</div>
<script type="text/javascript">
function popup1(e){var t=300;var n=290;var r=(screen.width-t)/2;var i=(screen.height-n)/2;var s="width="+t+", height="+n;s+=", top="+i+", left="+r;s+=", directories=no";s+=", location=no";s+=", menubar=no";s+=", resizable=no";s+=", scrollbars=no";s+=", status=no";s+=", toolbar=no";newwin=window.open(e,"windowname5",s);if(window.focus){newwin.focus()}return false}
</script>
Semua kode
Kompi Ajaib... silahkan sesuaikan dengan title Fans Page Facebook blog Anda.
Ganti kode
kompiajaib yang saya marking dengan username Fans Page Facebook blog Anda pada URL seperti di bawah ini.http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fkompiajaib&width=300&height=290&colorscheme=light&show_faces=true&header=true&stream=false&show_border=true
Jika Anda mempunyai animasi gif atau gambar untuk Like Fans Page Facebook sendiri, silahkan ganti imagenya. Jangan lupa sesuaikan width dan height image-nya.