22 Dec 2015

Cara Menambahkan Pop Up Like Box Facebook HTML5 SEO Friendly di blog

Kali ini saya akan berbagi tentang Cara Menambahkan Pop Up Like Box Facebook HTML5 SEO Friendly di blog. turtorial dari widget yang satu ini memang sudah banyak berbagi di blog lainnya, namun disini saya akan coba memberikan tampilan yang lebih sederhana.

Dalam rangka meningkatkan pengunjung ke halaman facebook, sobat perlu mempromosikan hlaman facebook untuk mendapatkan lebih banyak like dari pengguna yang mengunjungi blog sobat. Dan tidak diragukan lagi, dengan menambahkan pop up like box facebook ini di blog adalah salah satu cara terbaik untuk meningkatkan penggemar dari halaman facebook sobat.

Silahkan ikuti langkah sederhana berikut ini:

Disini sobat hanya perlu menambahkan kode dibawah ini pada widget blog.

Buka blogger > tata letak > klik tambahkan gadget kemudian klik HTML/Javascript > salin dan terapkan semua kode dibawah ini didalamnya 

HTML5

<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:416px;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>
<div class='fb-like-box' data-href='http://facebook.com/warunginet' 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:400px;height:200px;'></div>
</div>
</div>


Setelah ditambahkan , klik simpan.

Setelan:

Ganti url https:/www.facebook.com/warunginet dengan url halaman fan page facebook sobat.

Jika ingin memunculkan pop up like box ini setiap kali halaman blog dibuka, silahkan hapus kode $.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 }); pada kode diatas dan menonaktifkan cookie : false pada script ini (jika terpasang pada template)

Selanjutnya simpan kode dibawah ini setelah <body> atau sebelum </body>

Javascript

<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, silahkan atur nilai kode ini .delay(3000)

Cukup sekian tentang Cara Menambahkan Pop Up Like Box Facebook HTML5 SEO Friendly, selamat mencoba.

2 komentar: