Cara Memasang Facebook Popup Like Box Dengan Cookie di Blogger/WordPress
Mengapa mesti dalam bentuk popup? Karena popup terbukti mempertinggi tingkat konversi, baik itu like, follow, langganan, bahkan penjualan. Asalkan popup itu gak menganggu, gak setiap kali muncul, tidak membuat pengunjung risih, sah banget pake model beginian.
Berikut snippet scriptnya:
<!-- Facebook Popup Widget Plus Cookie by buka-rahasia.blogspot.com -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style>
#bukafpop {display:none;background:rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999;}
#bukafmetu {width:100%;height:100%;}
#burasbox {background:white;width:420px;height:270px;position:absolute;top:58%;left:63%;margin:-220px 0 0 -375px;-webkit-box-shadow: inset 0 0 50px 0 #939393;-moz-box-shadow: inset 0 0 50px 0 #939393;box-shadow: inset 0 0 50px 0 #939393;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;margin: -220px 0 0 -375px;}
#buras {float:right;cursor:pointer;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVlOlYrbkYLahu0pZOYKVpKl3w0Bvcs_o3r42T5h_a3n20kCWO84KSGY1-Naex4mcbvlgIarADeiJyUwyyDBycxW2IW3A0cmLD5SwLTeA1_TC33bN_TS-gg4lXU041bjXzzWrgUJtEpscf/s1600/buras-tutup.png) repeat;height:15px;padding:20px;position:relative;padding-right:40px;margin-top:-20px;margin-right:-22px;}
.burasbord {height:1px;width:366px;margin:0 auto;background:#F3F3F3;margin-top:16px;position:relative;margin-left:20px;}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// key dan nilai (value), 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() : '', // atribut expires, IE ga support max-age
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// pengaturan cookie by buka-rahasia.blogspot.com...
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_user_login') != 'yes'){
$('#bukafpop').delay(20000).fadeIn('medium');
$('#buras, #bukafmetu').click(function(){
$('#bukafpop').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 30 });
});
</script>
<div id='bukafpop'>
<div id='bukafmetu'>
</div>
<div id='burasbox'>
<div id='buras'>
</div>
<div class='burasbord'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/bukarahasiablogspot&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false' style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe><center>
</center>
</div>
</div>
<!-- Facebook Popup Widget Plus Cookie by buka-rahasia.blogspot.com -->
Blogger:
Wordpress:
Kostumisasi
- Warna merah adalah HTML untuk memanggil jquery (yang dihost Google), dalam beberapa kasus, jika anda sudah memiliki jquery sebelumnya, bisa terjadi crash, sehingga beberapa script justru tidak berfungsi. Jadi, jika sudah ada, hapus bagian jquery ini. Jika setelah dicoba popup enggak jalan, coba di pasang/dikembalikan ke semula. Untuk melihat apakah sudah ada jquery atau belum (kebanyakan template sudah) buka edit HTML di dashboard > template, dan cari dengan keyword jquery. Atau inget-inget aja dulu pernah pasang gadget/widget yang ada jquery-nya atau tidak. Kalo ga mau ribet di awal, pasang aja semua dulu untuk nyoba.
- .delay(20000) adalah nilai waktu penundaan likebox muncul saat halaman diakses oleh pengunjung untuk pertama kalinya. Nilai 20000 dalam milidetik, berarti 20 detik. Saya pribadi lebih suka delaynya lebih lambat untuk mastiin halaman dan likebox-nya udah diload dengan bener. Biar pengunjung ga cepet-cepet nutup, dan biar lebih kaget dikit saat baca artikel. Heuheu. Ubah nilai itu menjadi lebih besar atau kecil untuk lebih memperlambat atau mempercepat kemunculan popup likebox.
- Baris script pada warna hijau adalah statement untuk menyatakan batas waktu berlakunya cookie yang ditanam di browser pengunjung, value dinyatakan dalam hitungan hari. Perhatikan pada bagian expires: 30, itu berarti cookie berlaku dalam 30 hari (sebelum kemudian muncul lagi pada pengunjung yang sama, setiap 30 hari sekali), ubah nilainya menjadi lebih kecil atau besar. Misalnya 1, jika ingin popup muncul sekali sehari untuk pengunjung dengan browser yang sama. Tapi bila ingin popup likebox muncul setiap kali user membuka halaman blog (apapun) hapus baris berwarna hijau itu.
- https://www.facebook.com/bukarahasiablogspot, ubah ini dengan URL Facebook Page-mu.
That's it for now, jika ada problem, silahkan drop komentar di bawah.
Have a nice blogging, then...
© copyright Ahmad Khoirul Azmi, published only for buka-rahasia.blogspot.com.
Written by: Ahmad Khoirul Azmi
Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan codedi bawah atau share dengan sharing buttons di atas. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.
12 Comment(s):
Di copy dulu mas,
lama tidak muncul,.. semua jadi rahasia lagi :)
monggo sob.
Hehe, iya. Kondisinya udah agak beda dengan dulu. Moga bisa share lebih banyak lagi. :)
Makasih mas, bisa juga dipakai di wordpress kan?
Bisa mas, saya juga pake di tautweb.com. Lebih ringanan daripada pake plugin n proses pake PHP.
keren, langsung praktek, sangat bermanfaat sekali :)
monggooo :)
Mantab mas, saya sudah pakai dan bagus sekali. Untuk durasi penundaan 20 detik apa tidak terlalu cepat mas ? khususnya artikel yang panjang. Terima kasih
tujuannya untuk kasih "surprise" saat pengunjung baca awal konten, bukan setelah selesai atau di tengah2. Tapi kalo menurut kamu kurang lama, ya tinggal ditambah aja waktunya
Kalau di wordpress saya pake plugin mas yang premium, agak greget soalnya :D
Terimakasih ilmunya mas ahmad :D
awesome banget..
pertamax gan
Langsung praktekkan matur suwun
Trm kash gan! di copy & save ...mau dipelajari dulu sebelum dipraktekan...
Post a Comment