Facebook Like Box Popup Widget Dengan URL Plugin

Facebook Like Box Popup Widget
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. 

Facebook Like Box URL Plugin

Facebook Like Box Window

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.

Facebook Like Box Popup Widget


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="http://1.bp.blogspot.com/-OrIxncoDkVk/VFMBuV2KlxI/AAAAAAAAeFo/Z-oY9jq79DM/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.

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