Cara Membuat Popup Like Box Facebook Melayang di Blog

HaSob apa kabar? Ok sobat pada kesempatan ini saya akan berbagi widget likebox Facebook efek popup melayang yang bisa kamu gunakan pada blog kamu.

Kamu bisa mempromosikan halaman facebook melalui web/blog dari pengunjung yang mengakses halaman di web/blog kamu, salah satu cara adalah dengan memasang widget like box fanspage efek popup seperti ini. Walaupun ini kelihatan seperti memaksa pengunjung, tapi ini adalah cara yang tepat untuk mempercepat banyaknya like di Facebook Page ini.

Fanspage Like Box Facebook Efek Popup


Cara Membuat Like Box Fanspage Facebook efek popup melayang Di Blogger
Popup Like Box Facebook Page

Berbicara mengenai widget efek Popup sebelumnya juga saya sudah pernah membagikan widget like box fanspage popup dengan waktu dan cara membuat Google Pluse Page Badge melayang di Blogspot.

Cara Membuat Popup Like Box Fanspage Facebook Melayang di Blogger


1. Sebelumnya kamu harus memiliki halaman Fanspage Facebook (baca: cara membuat halaman fanspage facebook)
2. Di Blog kamu 😄
3. Pilih menu Tata Letak  ➜ Tambahkan Gadget.
4. Kemudian pilih widget HTML/JavaScript
Widget Like Box Fanspage Facebook Melayang
Tata Letak ➔ Tambah Gadget ➔ HTML / Javascript

5. Masukan kode dibawah ini:
<style scoped='' type='text/css'>
#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/bloghaisob&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. Save Widget


Setting Widget:

Ganti https://www.facebook.com/bloghaisob dengan url / link fanspage Facebook kamu. Untuk mengatur jeda waktu meunculnya popup ini cari kode .delay(3000) dan atur nilainya. Jika ingin memunculkan popup facebook ini setiap kali halaman blog di buka silahkan hapus kode $.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 }); dan menonaktifkan cookie : false pada script dibawah ini jika script dibawah ini ada pada / terpasang pada template.
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'KODE-APLIKASI',
status : true, // check login status
cookie : false, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
Tambahkan juga script diatas jika likebox fanspage Facebook tidak muncul.

Semakin banyak jumlah like di fanspage facebook nantinya ketika kamu membagikan atau memposting artikel kamu dari blog ke halaman fanspage maka jumlah orang yang melihat artikel akan semakin banyak pula.

Sekian, semoga bermanfaat.