Cara Memasang Facebook Popup Like Box Dengan Cookie di Blogger/WordPress


Sudah lama sekali tidak update blog ini, lantaran banyaknya media yang mesti saya update dan lebih menjadi bagian dari skala prioritas tinggi sekarang. Apologize..

Banyak yang menanyakan mengenai fitur Widget Facebook Pop Up Like Box yang saya gunakan saat ini, karena menggunakan cookie untuk mengatur kemunculannya (dalam hitungan satu atau (x) hari sekali untuk satu pengunjung). Kebanyakan Like Box yang digunakan oleh blog-blog berplatform Blogger menggunakan PopUp dengan timer dan selalu muncul. Ini cukup mengganggu, sebab sebaiknya pengunjung hanya butuh ditawari sekali dalam sekian waktu, bukan disuguhi setiap buka halaman. Ditambah lagi, fitur timer juga sering mengganggu. Masa mau lihat artikel pendek saja harus menunggu 30 detik agar popup hilang, sedang tidak ada tombol close sama sekali. So very very annoying kan.

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.

Likebox yang saya gunakan sederhana, tapi berbasis berapa kali penampilan per user per hari, dan dilengkapi tombol tutup, tanpa timer. Saya paling benci timer, jadi saya tidak buat yang demikian. Banyak juga sebenarnya desain layout popup yang sama, lantaran desain layout pop up ini menjadi trend. Tapi saya masih menggunakan Facebook iframe sebagai basis Like Box nya lantaran paling mudah diposisikan, dibanding HTML5 atau XFBML. Tidak ada atribusi link-nya kok pada widget, jadi gak bakal bikin tampilan popup gak profesional. Yang penting gak copas post orang sembarangan aja tanpa atribusi / sumber. Deal ya.

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(http://1.bp.blogspot.com/-u_0oMPOrIrw/VVbgdk4D_bI/AAAAAAAAFRE/tz25ojehFdU/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  -->

Agar lebih praktis, saya sisipkan semua di widget jadi tidak perlu menambahkan CSS atau javascriptnya di edit HTML Blogger atau edit template footer pada WordPress (no plugin).

Blogger:

1. Buka halaman layout di dasboard. Dashboard > Layout.
2. Tambahkan gadget, ambil yang paling bawah, jika ada gadget footer itu lebih baik. Jika tidak ada gunakan gadget sidebar paling bawah. Besok-besok kalo mau tambah gadget lagi, pastikan gadget Likebox PopUp ini tetep di bawah ya.
3. Kemudian pilih jenis gadget HTML/Javascript.
4. Copy seluruh kode di atas, paste di editor semacam NotePad atau NotePad++. (untuk melakukan edit)
5. Masukkan script yang telah diedit dan save / simpan.

Wordpress:

1. Masuk ke dashboard > appearance / tampilan > widget.
2. Pilih text widget (teks)
3. Sisipkan ke sidebar paling bawah atau widget footer (jika ada), yang penting pastikan posisinya paling bawah dari semua widget.
4. Copy seluruh kode di atas, paste di editor semacam NotePad atau NotePad++. (untuk melakukan edit)
5. Masukkan script yang telah diedit dan save /simpan.

Kostumisasi

Setelah script dicopy dan dimasukkan ke editor teks (notepad, dll), dan sebelum di pasang di blog, lakukan kostumisasi beberapa bagian berikut:
  • 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.

Oh ya, saran nih, jika ingin melakukan tes, sebaiknya baris warna hijau dihapus dulu, supaya likebox muncul terus. Biar ingat tempatnya semula, kosongin barisnya itu, jangan dihapus, kasi spasi (jarak atas bawah). Kalo sudah fixed muncul dengan baik, kembalikan baris hijau-nya di tempat semua. Atau lebih baik lagi kalo punya blog dan template buat tes, kalo sudah clear beres, baru dipasang diblog utama.

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.

Cara Memasang Facebook Popup Like Box Dengan Cookie di Blogger/WordPress
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.

add a comment 12 Comment(s):

Blog Dmathholic said...

Di copy dulu mas,
lama tidak muncul,.. semua jadi rahasia lagi :)

Ahmad Khoirul Azmi said...

monggo sob.
Hehe, iya. Kondisinya udah agak beda dengan dulu. Moga bisa share lebih banyak lagi. :)

Amri MF said...

Makasih mas, bisa juga dipakai di wordpress kan?

Ahmad Khoirul Azmi said...

Bisa mas, saya juga pake di tautweb.com. Lebih ringanan daripada pake plugin n proses pake PHP.

Aldi Rahman said...

keren, langsung praktek, sangat bermanfaat sekali :)

Ahmad Khoirul Azmi said...

monggooo :)

Dwi Putriyeni said...

Mantab mas, saya sudah pakai dan bagus sekali. Untuk durasi penundaan 20 detik apa tidak terlalu cepat mas ? khususnya artikel yang panjang. Terima kasih

Ahmad Khoirul Azmi said...

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

Kang Tora said...

Kalau di wordpress saya pake plugin mas yang premium, agak greget soalnya :D

Terimakasih ilmunya mas ahmad :D

Republik OR-B said...

awesome banget..
pertamax gan

Mbahmendung.blogspot.com said...

Langsung praktekkan matur suwun

Dadung Sulaeman said...

Trm kash gan! di copy & save ...mau dipelajari dulu sebelum dipraktekan...

Post a Comment

Silahkan tinggalkan komentar untuk respon/pertanyaan. Jika ingin menuliskan kode di dalam komentar, convert dulu dengan HTML Encoder. Centang "Notify me" untuk mengetahui balasannya. Maaf apabila komentar dibalas dalam waktu lama atau tidak terbalas karena saya tidak online setiap hari. Atau biar lebih cepat dan enakan bisa kontak lewat Facebook. KOMENTAR BERISI LINK & tidak sesuai dengan Comment Policy akan langsung dihapus.Karena banyaknya spam, komentar sekarang di-moderasi sebelum diterbitkan. Thanks.
Smashed Spams: 11362

Recent Comments

Tautweb.com

  • Menulis Artikel Blog

    Tips dan panduan menulis artikel blog berkualitas dan menarik (dalam beberapa seri).

  • Template Blog Terbaik

    Review dan daftar situs pembuat dan penyedia template blogger berkualitas dan tentunya terbaik.

  • Strategi SEO 2015

    Hal apa saja yang wajib menjadi bagian dari strategi SEO di tahun ini? Simak ulasan lengkapnya di sini.

  • Artikel SEO Friendly

    Tips membuat artikel yang memenuhi syarat SEO sekaligus tetap menjaga kualitasnya.

  • Belajar HTML & CSS

    5 situs rekomendasi untuk mempelajari HTML dan CSS dari tingkat dasar.

© 2010-2015 Buka Rahasia Blogspot | Template by Dicas Blogger | Modified & Enhanced by Ahmad Khoirul Azmi

 ContactPrivacy PolicyComment PolicySitemap