Cara Membuat Like Box Fanspage Facebook efek popup melayang Di Blogger

Baiklah sobat berikut ini adalah widget likebox Facebook efek popup yang tampilannya simple dan keren menurut kami. Berbicara mengenai widget Facebook Popup effect sebelumnya juga seocips.com sudah pernah membagikan widget like box efek melayang dan cara membuat like box fanspage popup dengan waktu di Blog. Widget ini pertama kali di share oleh Arlina Design yang tidak usah diragukan lagi soal membuat template.

Untuk meningkatkan pengunjung dari Facebook sobat perlu mempromosikan halaman facebook melalui web atau blog untuk mendapatkan like dari pengunjung yang mengakses halaman di web/blog sobat. Alasannya simple saja, semakin banyak jumlah like di fanspage facebook ketika sobat menshare artikel dari blog ke halaman fanspage maka jumlah orang yang melihat artikel akan semakin banyak pula. Nah salah satu cara untuk meningkatkan like / penggemar halaman fanspage facebook adalah memasang widget seperti ini.


Membuat Popup Like Box Fanspage Facebook

Sebelumnya sobat harus memiliki Fanspage Facebook ( Baca : cara membuat fanspage facebook ) kemudian Masukan kode di bawah ini pada widget Blog sobat. Caranya: Blogger > Tata Letak > HTML/Javascript dan 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/seocips&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>
Catatan:
Jangan lupa ganti https://www.facebook.com/seocips dengan url / link fanspage facebook milik anda. 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. Ok sekian selamat mencoba.
0 Komentar untuk "Cara Membuat Popup Like Box Facebook Keren"