.
Untuk meningkatkan jumlah Facebook like pada Facebook fans page (Halaman Facebook) dapat dilakukan dengan berbagai cara, salah satunya yaitu dengan memasang widget like box yang muncul secara popup pada Blog. Lalu bagaimana cara membuatnya? Sesuatu yang kelihatan istimewa dan dilakukan dengan kerumitan tekhnologi? Ternyata tidak sesusah itu....
Ada beberapa cara diantaranya yaitu:
1. Popup Facebook Like Box menggunakan versi Lightbox.
2. Popup Facebook Like Box menggunakan jQuery , keistimewaannya loadingnya pun akan lebih cepat jika dibandingkan dengan yang menggunakan versi Lightbox.
Kali ini kita langsung saja membahas Popub Facebook Like dengan menggunakan jquery:
Untuk praktek anda langsung saja , paste kode berikut di widget HTML/JavaScript:
<!—Widget Share Button Melayang http://riauspirit.blogspot.co.id Start-->
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<style>
#fanback {
display:none;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}
#fan-exit {
width:100%;
height:100%;
}
#fanbox {
background:white;
width:420px;
height:270px;
position:absolute;
top:58%;
left:63%;
margin:-220px 0 0 -375px;
-webkit-box-shadow: inset 0 0 50px 0 #939393;
-moz-box-shadow: inset 0 0 50px 0 #939393;
box-shadow: inset 0 0 50px 0 #939393;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: -220px 0 0 -375px;
}
#fanclose {
float:right;
cursor:pointer;
background:url(http:// https://lh4.googleusercontent.com/-snYls7Xm9Ms/Vlu2PEGQbtI/AAAAAAAANx0/eQN9aahEUkQ/s56-no/riauspirit%2Bfanclose.png) repeat;
height:15px;
padding:20px;
position:relative;
padding-right:40px;
margin-top:-20px;
margin-right:-22px;
}
.remove-borda {
height:1px;
width:366px;
margin:0 auto;
background:#F3F3F3;
margin-top:16px;
position:relative;
margin-left:20px;
}
#linkit,#linkit a.visited,#linkit a,#linkit a:hover {
color:#80808B;
font-size:10px;
margin: 0 auto 5px auto;
float:center;
}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// key and at least value given, set 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(''));
}
// key and possibly options given, get 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_like') != 'yes'){
$('#fanback').delay(5000).fadeIn('medium');
$('#fanclose, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}
$.cookie('popup_facebook_like', 'yes', { path: '/', expires: 7 });
});
<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/id_ID/sdk.js#xfbml=1&version=v2.5";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script> <div class="fb-like" data-href="https://www.facebook.com/SketsaWajahPekanbaru/?sk=allactivity" data-width="width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false' style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div></div>
<!—Widget Share Button Melayang http://riauspirit.blogspot.co.id End-->
Catatan: jika template anda sudah menyertakan jQuery maka tidak perlu menambahkan jQuery lagi.
Hasil dari langkah diatas seperti gambar dibawah ini:
Silahkan Klick untuk Demo
Silahkan Klick untuk Demo
Konfigurasi Popup Facebook Like Box
Pertama ganti https://www.facebook.com/bersosial dengan alamat Facebook fans page Anda.
<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/id_ID/sdk.js#xfbml=1&version=v2.5";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script> <div class="fb-like" data-href="https://www.facebook.com/SketsaWajahPekanbaru/?sk=allactivity" data-width="width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false' style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div></div>
Dapatkan Facebook Like Box di atas anda silahkan mengunjungi https://developers.facebook.com/docs/plugins/like-box-for-pages (Untuk masuk keLink ini cukup Klick Link diatas atau pastekan Link keBrowser anda)
Secara default widget muncul 5 detik setelah halaman selesai loading. Cari kode di bawah ini dan ubah angka 5000 ke angka yang lebih besar atau lebih kecil.
$('#fanback').delay(5000).fadeIn('medium');Catatan: 1 detik = 1000. 10 detik = 10000. 60 detik = 60000.
Saat ini cookie akan expire selama 7 hari, jadi setelah 7 hari maka pengunjung yang sama akan melihat popup lagi. Ganti angka 7 sesuai dengan keinginan.
$.cookie('popup_facebook_like', 'yes', { path: '/', expires: 7 });Bagi Anda yang mengalami kesulitan dalam mengaplikasikan langkah-langkah diatas. silahkan hubungi saya di Contact.
