Facebook tentu bukan barang aneh 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 yakni Facebook Page.
Setelah di blog sebelumnya kita membahas cara memasang widget Facebook like di sidebar blog, di blog kali ini aku ingin membuatkan tutorial perihal bagaimana cara menciptakan Pop Up Facebook Like Box di blog berplatform blogger. Pop up yang dimaksud di sini yakni 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 yakni panduan cara memasang pop up facebook like box di blog. Ikuti panduan berikut ini.
1. Masuk Akun Blogger > Pilih Blog
2. Masuk hidangan Layout atau Tata Letak > Add Gadget
3. Pilih HTML/Javascript
4. Copy script berikut dan pastekan form yang tersedia
<style scoped='' type='text/css'>5. Ganti URL (facebook.com/indravedia) dengan URL Facebook Page punya anda. Lalu Save.
#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>
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 anda 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 referensi blog ini yakni blog 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 belahan atas kanan dari jendela pop up, walaupun bergotong-royong dengan mengklik di area mana saja, sanggup tetap ter-close. Untuk demonya mungkin sudah sanggup anda 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 jikalau Smartphone dalam posisi portrait. Tapi tidak masalah, sebab 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 blog kali ini . Semoga bermanfaat. Terima kasih.
0 komentar
Posting Komentar