.
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.
