Cara Menciptakan Pop Up Facebook Like Di Blog Blogger

Facebook tentu bukan barang gila lagi di dunia internet kini ini. Khusus bagi para blogger, facebook bukan hanya berfungsi sebagai media untuk bersosial dan saling tegur sapa dengan teman, tapi juga kerap dijadikan sebagai alat untuk men-generate / mendatangkan trafik kunjungan pada blog yang dikelola. Salah satu fitur dari social media facebook ialah Facebook Page.

Setelah di artikel sebelumnya kita membahas cara memasang widget Facebook like di sidebar blog, di artikel kali ini aku ingin menyebarkan tutorial ihwal bagaimana cara menciptakan Pop Up Facebook Like Box di blog berplatform blogger. Pop up yang dimaksud di sini ialah sebuah tampilan yang menutupi halaman blog yang muncul beberapa ketika sesudah suatu halaman blog dibuka

Tentunya pemasangan Pop Up Facebook Like Box di blog bukan tanpa tujuan dan bukan hanya untuk sekadar mempercantik tampilan blog, melainkan juga sanggup kita optimalkan fungsinya sebagai penguat branding blog di mata visitor. Artinya kita menyadarkan visitor bahwa blog yang sedang dikunjunginya juga mempunyai sebuah halaman facebook. Selain itu pemasangan Pop up untuk Facebook ini juga sangat ampuh untuk meningkatkan jumlah like dari halaman facebook secara dramatis, ketimbang hanya meletakkan facebook pagenya di sidebar atau widget.

Baiklah, tidak perlu berlama-lama, pribadi saja berikut ialah panduan cara memasang pop up facebook like box di blog. Ikuti panduan berikut ini.

1. Masuk Akun Blogger > Pilih Blog
2. Masuk sajian Layout atau Tata Letak > Add Gadget
3. Pilih  HTML/Javascript
4. Copy script berikut dan pastekan form yang tersedia

<style scoped='' type='text/css'>
#fb-fanbox {display:none;background:rgba(0,0,0,0.9);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999;-webkit-transform:translateZ(0);}
#fb-boxclose {width:100%;height:100%;-webkit-transform:translateZ(0);}
#fb-boxview {background:#fff;border:8px solid #03a9f4;width:340px;height:230px;position:absolute;top:33%;left:37%;border-radius:3px;}
#fb-closebox {float:right;cursor:pointer;position:absolute;right:-1px;top:-2px;z-index:2;}
#fb-closebox:before {content:"CLOSE";padding:5px 8px;background:#03a9f4;color:#fff;font-weight:normal;font-size:10px;font-family:inherit;}
#fb-boxlink,#fb-boxlink a.visited,#fb-boxlink a,#fb-boxlink a:hover {color:#aaaaaa;font-size:9px;text-decoration:none;text-align:center;padding:5px;}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// Pengaturan cookie
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// Dapatkan cookie
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_facebook_box') != 'yes'){
$('#fb-fanbox').delay(3000).fadeIn('fast');
$('#fb-closebox, #fb-boxclose').click(function(){
$('#fb-fanbox').stop().fadeOut('fast');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fb-fanbox'>
<div id='fb-boxclose'>
</div>
<div id='fb-boxview'>
<div id='fb-closebox'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/indravedia&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border:none;overflow:hidden;width:339px;height:200px;'></iframe>
</div>
</div>

5. Ganti URL (facebook.com/indravedia) dengan URL Facebook Page punya sobat. Lalu Save.

6. Script di atas memunculkan pop up hanya pada kunjungan pertama visitor. Jika menginginkan pop up selalu muncul setiap kali halaman gres dibuka, maka silakan cari instruksi di bawah ini dan hapus.

$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });

7. Save dan lihat hasilnya. Jika berhasil, maka Jendela Pop Up Facebook Like Box ini akan muncul beberapa ketika sesudah halaman blog sobat dibuka.

* Adapun untuk mengatur durasi jeda waktu muncul jendela pop up, sanggup dengan mengatur nilai angka dari kode .delay(3000). Silakan cari dengan memakai CTRL+F.  Angka 3000 berarti 3 detik waktu yang diperlukan untuk pop up muncul. Silakan ubah sesuai kehendak. Save.

Selesai.

Nah, begitulah cara menciptakan pop up facebook like box di blog blogger. Sumber tumpuan artikel ini ialah artikel yang ditulis oleh mba +Arlina Fitriyani di blognya Arlina Dzgn. Tampilan pop up yang dihasilkan cukup sederhana namun tetap eye catching dan tidak terlalu berat juga di loading blog. Dilengkapi juga dengan tombol close di bab atas kanan dari jendela pop up, walaupun gotong royong dengan mengklik di area mana saja, sanggup tetap ter-close. Untuk demonya mungkin sudah sanggup sobat lihat ketika membuka postingan ini.

Sebagai catatan, pop up like box ini sedikit kurang responsive untuk tampilan mobile / Smartphone. Artinya tampilan pop up - nya hanya muncul setengah bila Smartphone dalam posisi portrait. Tapi tidak masalah, alasannya ialah tombol Like dari halaman facebooknya sendiri masih sanggup tetap terlihat oleh pengunjung. Dan pengunjungpun masih sanggup mengclose / menutup pop up nya dengan klik di sembarang tempat.

Sekian artikel kali ini . Semoga bermanfaat. Terima kasih.