Cara Membuat Pop Up Facebook Like di Blog Blogger
Facebook tentu bukan barang aneh lagi di dunia internet sekarang 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 adalah Facebook Page.
Setelah di artikel sebelumnya kita membahas cara memasang widget Facebook like di sidebar blog, di artikel kali ini saya ingin berbagi tutorial tentang bagaimana cara membuat Pop Up Facebook Like Box di blog berplatform blogger. Pop up yang dimaksud di sini adalah sebuah tampilan yang menutupi halaman blog yang muncul beberapa saat setelah 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 dapat kita optimalkan fungsinya sebagai penguat branding blog di mata visitor. Artinya kita menyadarkan visitor bahwa blog yang sedang dikunjunginya juga memiliki 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, langsung saja berikut adalah panduan cara memasang pop up facebook like box di blog. Ikuti panduan berikut ini.
1. Masuk Akun Blogger > Pilih Blog
2. Masuk menu 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 sobat. 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 baru dibuka, maka silakan cari kode 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 saat setelah halaman blog sobat dibuka.
* Adapun untuk mengatur durasi jeda waktu muncul jendela pop up, bisa dengan mengatur nilai angka dari kode .delay(3000). Silakan cari dengan menggunakan CTRL+F. Angka 3000 berarti 3 detik waktu yang dibutuhkan untuk pop up muncul. Silakan ubah sesuai kehendak. Save.
Selesai.
Nah, begitulah cara membuat pop up facebook like box di blog blogger. Sumber rujukan artikel ini adalah 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 bagian atas kanan dari jendela pop up, walaupun sebenarnya dengan mengklik di area mana saja, bisa tetap ter-close. Untuk demonya mungkin sudah bisa sobat lihat saat 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 jika Smartphone dalam posisi portrait. Tapi tidak masalah, karena tombol Like dari halaman facebooknya sendiri masih bisa tetap terlihat oleh pengunjung. Dan pengunjungpun masih bisa mengclose / menutup pop up nya dengan klik di sembarang tempat.
Sekian artikel kali ini . Semoga bermanfaat. Terima kasih.
sangat membantu sekali, semoga pahalanya mengalir terus,,
ReplyDeleteTerima kasih gan akan saya terapkan di blog saya...
ReplyDelete