Responsive Popup Facebook Like Box (Facebook Pages)

Facebook merupakan salah satu media sosial yang erat sekali kaitannya dengan Blogger. Selain digunakan sebagai media promosi, Facebook juga merupakan salah satu alat komunikasi yang biasa digunakan oleh pengunjung situs dan pemiliknya selain dari Twitter.

Tidak sedikit situs yang memiliki traffic hingga ribuan, bahkan ratus ribuan dari penggunaan Facebook sebagai media promosi blognya.

Selain promosi, salah satu faktor yang mempengaruhi banyak atau tidaknya traffic yang di dapatkan dari Facebook adalah jumlah likes dan subscribes dari halaman situs itu sendiri.

Sama halnya dengan blog yang menghasilkan, umumnya; semakin banyak pengunjung, semakin besar kesempatan untuk mendapatkan penghasilan yang lebih banyak.

Begitupun dengan Fan Page Facebook; semakin banyak likes dan subscribes,semakin besar kesempatan untuk mendapatkan banyak pengunjung.

Ada banyak cara untuk mendapatkan jumlah likes dan subscribe, salah satunya dengan cara menambahkan widget Facebook Like Box di blog yang Anda miliki.

Responsive Popup Facebook Like Box

Dengan menggunakan popup, pengunjung akan sedikit 'dipaksa' untuk melihat fan page dari blog Anda sebelum mereka bisa sepenuhnya membaca/melihat konten blog tersebut.

Buka blogger > Tata letak > Tambahkan Gadget > Pilih HTML/JavaScript > Simpan kode di bawah ini pada widget tersebut ;

<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 #414B82;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:#414B82;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>
<div class='fb-like-box' data-href='https://www.facebook.com/wikiwidgets' data-width='402' data-height='255' data-colorscheme='light' data-show-faces='true' data-header='true' data-stream='false' data-show-border='false' style='border:none;overflow:hidden;width:339px;height:200px;'></div>
</div>
</div>

Facebook Pages Settings :

Ganti url https://www.facebook.com/wikiwidgets dengan url dari fan page blog Anda.

Jika Anda ingin memunculkan popup facebook like box setiap kali halaman blog dibuka, hapus kode $.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 }); pada kode di atas, kemudian non-aktifkan cookie : false pada script dibawah ini (jika sudah 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>

Untuk mengatur jeda waktu munculnya pop up like box ini, silakan atur nilai dari kode ini:  .delay(3000)

Simpan Widget setelah Anda selesai melakukan penyesuaian diatas.

Terakhir, simpan kode berikut tepat setelah <body> atau </body>

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=562901580420523&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Result

Simpan dan lihat hasilnya.

Dapatkan tutorial terbaru dari WikiWidgets?

Subscribe!