Cara Memasang Facebook Popup Likebox Dengan Cookie di WordPress Blogger

Saad Abdurrazaq Sun, October 4, 2015 1 comment 1,290 views
Cara-Memasang-Facebook-Popup-Likebox-Dengan-Cookie-di-WordPress-Blogger

Beberapa hari yang lalu ada seseorang dari grup WordPress Indonesia bertanya kepada saya perihal bagaimana cara membuat atau cara memasang facebook popup likebox dengan cookie di WordPress blogger, maksud saya di wordpress maupun di blogger, dan pada kesempatan kali ini saya akan share cara membuatnya.

Membuat atau memasang facebook popup likebox dengan cookie di WordPress atau di blogger ini sebenarnya cukup mudah dan bisa dilakukan tanpa harus menggunakan plugin, mengingat banyaknya plugin yang terpasang pada WordPress memiliki dampak negatif terhadap blog itu sendiri.

Kembali pada bahasan utama, tutorial pembuatan facebook popup likebox yang saya share di sini menggunakan sistem cookie, artinya popup hanya akan muncul berdasarkan batas waktu cookie yang diset, jika cookie diset dengan angka 30 misal, maka popup hanya akan muncul sebulan sekali. Pembuatan facebook popup like box dengan sistem cookie ini bisa dibilang lebih baik dibanding pembuatan popup pada umumnya, yang selalu muncul setiap kali kita membuka page, atau yang lebih parah lagi, pembuatan popup berdasarkan timer, masa untuk membuka artikel saja kita harus menunggu 30-60 detik agar popup hilang? bahkan saya pernah menemukan suatu blog yang memasang waktu hingga 2000 detik lebih agar popup tersebut hilang, tentu sangat menjengkelkan dan mengganggu bukan? Dampak negatifnya kembali pada blog itu sendiri, pengalaman saya ketika menemukan blog semacam itu langsung saya tendang dan saya blacklist agar saya tidak mengunjunginya lagi di lain waktu, mending kalo artikelnya berkualitas, lha kalo hasil copas? Wasting time saja, iya gak?

Nah, dengan hadirnya fitur facebook popup likebox based on cookie ini akan memberikan pengalaman dan kenyamanan tersendiri bagi pengunjung, dan manfaatnya juga kembali pada pemilik blog itu sendiri, karena pemasangan facebook popup likebox dengan cookie ini terbukti meningkatkan konversi suatu blog baik itu berupa follow, subscribe, atau bahkan penjualan.

Mau tau cara membuat atau memasang facebook popup likebox dengan cookie di WordPress atau di blogger? berikut tutorialnya.

Cara Memasang Facebook Popup Likebox Dengan Cookie di WordPress Blogger

Step 1: Buka file style.css, lalu ketikkan code di bawah ini lalu simpan:

.showbody{text-align: center; color: #333; margin: 0 auto; width: 83.33%; margin-top: 25px;}
.showbody p{text-align: center; color: #333;}
.showbody a{text-decoration: none; color: #005a8c;}
.showbody a:hover{text-decoration: underline; }
#openpopup {display:none;background:rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999;}
#exitpopup {width:100%;height:100%;}
#popupbox {background:white; width: 100%; max-width:420px;height:290px;position:absolute;top:58%;left:63%;margin:0 auto;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;margin: -220px 0 0 -375px;}
#tutup{float:right;cursor:pointer;background:url(http://kafeinkode.com/wp-content/themes/sead/images/close.png) no-repeat;height:15px;padding:20px;position:relative;margin-top:-20px;margin-right:-22px;}
.popupbord{height:1px;width:366px;margin:0 auto;margin-top:16px;position:relative;margin-left:20px;}

 

Step 2: Buka file header.php, lalu letakkan code javascript di bawah ini tepat di atas kode </head>, kemudian simpan.

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”>
<script type=’text/javascript’>

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(”));
}
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’){
$(‘#openpopup’).delay(20000).fadeIn(‘medium’);
$(‘#tutup, #exitpopup’).click(function(){
$(‘#openpopup’).stop().fadeOut(‘medium’);
});
}
$.cookie(‘popup_user_login’, ‘yes’, { path: ‘/’, expires: 1 });
});
</script>
<div id=’openpopup’>
<div id=’exitpopup’>
</div>
<div id=’popupbox’>
<div id=’tutup’>
</div>
<div class=’popupbord’>
</div>
<div class=”showbody”>
<img src=”http://kafeinkode.com/wp-content/themes/sead/images/kafeinkecil.jpg”/>
<p>Dukung dan dapatkan update artikel bermanfaat dengan like/follow. Thanks</p>
<p>
<div class=”fb-like” data-href=”https://www.facebook.com/pages/kafeinkodecom/467135436761984” data-layout=”button_count” data-action=”like” data-show-faces=”true” data-share=”false”></div>
<div class=”fb-follow” data-href=”https://www.facebook.com/jenengesaadiki” data-layout=”button_count” data-show-faces=”true”></div>
</p>
<p><a href=”https://www.facebook.com/pages/kafeinkodecom/467135436761984“>Kafeinkode</a></p>
</div>
</div>
</div>

Pengaturan:
Merah: Merupakan script jQuery yang dipanggil agar pop-up bisa tampil. Tanpa adanya script ini, popup tidak akanĀ  bisa tampil. Yang harus diperhatikan dalam pemanggilan script ini, cek terlebih dahulu apakah sobat memanggil script jQuery yang lain? Jika iya, jangan sertakan kode yang merah tadi, karena tak menutup kemungkinan akan terjadi conflict, sehingga popup tidak akan bisa tampil. Namun jika memang sama sekali tidak ada script jQuery yang dipanggil, sobat bisa menyertakan kode yang ditulis dengan warna merah tadi.

Biru: Merupakan nilai yang menentukan berapa lama waktu yang dibutuhkan agar popup muncul ke atas permukaan? Set nilainya lebih rendah jika popup ingin tampil lebih cepat, namun jika ingin lebih lambat, set dengan nilai yang lebih tinggi. Pertimbangan dalam mengatur timer ini dilihat dari berapa lama waktu yang dibutuhkan untuk meload suatu halaman secara sempurna? Baiknya, jika suatu halaman sudah terload secara sempurna, baru kita munculkan popupnya. Silahkan sobat sesuaikan waktu loadnya dengan halaman milik sobat.

Hijau: Jadi angka yang ditulis dengan warna hijau ini fungsinya untuk mengatur waktu kemunculan popup berdasarkan cookies. Artinya, jika cookies diset dengan angka 30, berarti masa berlaku cookies ini selama sebulan, dan dalam waktu sebulan ini, popup tidak akan pernah muncul lagi di komputer yang sama kecuali jika cookies yang tertanam di browser dihapus. Set waktu kemunculan popup ini sesuai dengan yang sobat kehendaki.

Coklat dan ungu: Itu merupakan alamat fanpage facebook kafeinkode.com, jika Anda berkehendak, Anda tidak perlu menggantinya, biarkan saja seperti itu.

Kuning: Itu merupakan alamat facebook saya, jika Anda berkehendak, Anda tidak perlu menggantinya, biarkan saja seperti itu.

Itulah mungkin tentang cara memasang facebook popup likebox dengan cookie di WordPress, adapun untuk tutorial pemasangannya di blogger, Anda bisa pergi ke halaman ini.

Jika ada yang kurang dipahami, sobat bisa bertanya melalui form komentar di bawah ini.

Sekian,
Semoga bermanfaat.

Is a web enthusiast from Indonesia. kafeinkode was created and written by Saad Abdurrazaq, it is built on WordPress. Love working with WordPress, programming, blogging, internet marketing, and all about computer soft skills.

1 comment

Leave a Reply

Your email address will not be published. Required fields are marked *