Menambahkan Facebook Like Pop-up kedalam Blog

Salah satu cara untuk meningkatkan trafik kunjungan ke blog kita adalah dengan cara memanfaatkan Facebook.com untuk membangun jejaring sosial. Sobat tentu sudah tak asing lagi dengan facebook, bukan? Sobat bisa menambahkan plugin sosial facebook seperti contoh dibawah, atau bisa juga menambahkan pop-up untuk mendapatkan "like' dari para pengunjung blog sobat.

Plugin Sosial Facebook

Untuk menambahkan plugin seperti diatas, sebat bisa mendapatkannya di facebook.com. Saya tidak akan membahas hal tersebut disini. Kali ini saya akan membahas bagaimana cara menambahkan pop-up yang meminta "like" dari mereka begitu mereka mengunjungi blog kita.


Pop-up ini muncul secara otomatis, dan akan kembali menghilang sesuai dengan setelan waktu yang telah kita berikan, misalnya 30 detik. Untuk menambahkan widget ini, silahkan sobat ikuti langkah-langkah berikut:

• Login terlebih dahulu kedalam akun blogger.com untuk segera menuju dasbor.
• Buka template blog, dan kemudian Edit HTML.
• Temukan baris tag </body>.
• Sisipkan kode berikut, dan letakkan sebelum tag </body> tadi.

<script type='text/javascript'>
//<![CDATA[
    KNFBFansPRO='Rosyid Belajar Blogging'

//]]>
</script>
<style>#fblikepop{background-color:#fff;display:none;position:fixed;top:200px;_position:absolute; /* hack for IE 6*/width:450px;border:10px solid #6F6F6F;z-index:200;-moz-border-radius: 9px;-webkit-border-radius: 9px;margin:0pt;padding:0pt;color:#333333;text-align:left;font-family:arial,sans-serif;font-size:13px;}

#fblikepop body{background:#fff none repeat scroll 0%;line-height:1;margin:0pt;height:100%;}

.fbflush{cursor: pointer;font-size:11px !important;color:#FFF !important;text-decoration:none !important;border:0 !important;}

#fblikebg{display:none;position:fixed;_position:absolute; /* hack for IE 6*/height:100%;width:100%;top:0;left:0;background:#000000;z-index:100;}

#fblikepop #closeable{float:right;margin:7px 15px 0 0;}

#fblikepop h1{background:#6D84B4 none repeat scroll 0 0;border-top:1px solid #3B5998;border-left:1px solid #3B5998;border-right:1px solid #3B5998;color:#FFFFFF !important;font-size:18px !important;font-weight:normal !important;padding:5px !important;margin:0 !important;font-family:&quot;Lucida Sans Unicode&quot;, &quot;Lucida Grande&quot;, sans-serif !important;}

#fblikepop #actionHolder{height:30px;overflow:hidden;}

#fblikepop #buttonArea{background:#F2F2F2;border-top:1px solid #CCCCCC;padding:10px;min-height:50px;}

#fblikepop #buttonArea a{color:#999999 !important;text-decoration:none !important;border:0 !important;font-size:10px !important;}

#fblikepop #buttonArea a:hover{color:#333 !important;text-decoration:none !important;border:0 !important;}

#fblikepop #popupMessage{font-size:12px !important;font-weight:normal !important;line-height:22px;padding:8px;background:#fff !important;}

#fblikepop #counter-display{float:right;font-size:11px !important;font-weight:normal !important;margin:5px 0 0 0;text-align:right;line-height:16px;}</style>

<script src='http://mybloggertricks.googlecode.com/files/jquery.js' type='text/javascript'/>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/>

<script src='http://mybloggertricks.googlecode.com/files/mbtlikebox2.js' type='text/javascript'/>

<script language='javascript'>
//<![CDATA[
    $(document).ready(function(){            
        $().KNFBFansPRO({
           timeout: 30,
            wait: 0,
            url: 'http://www.facebook.com/rosyidbelajarblogging',
            closeable: true        });
    });
//]]>
</script>
<div id='fbtpdiv'/>

• Ganti teks yang tersorot kuning dengan judul blog sobat sendiri.
• Atur waktunya pada bagian timeout: 30 (menentukan durasi tayang pop-up)
• Atur waktu tunggunya pada kode wait: 0 (menentukan kapan pop-up mulai muncul)
• Ganti url dengan alamat fan page sobat sendiri.
• Simpan template, setelah itu tutup kembali.

Untuk mencobanya, silahkan kunjungi blog sobat, maka pop-up akan tampil seperti ini:

Contoh Tampilan Pop-Up Facebook Like

Selamat mencoba!