Facebook Like Box Popup Dengan Timer

In Tutorial, Web 748 views

Social media sekarang ini memang masih menjadi senjata yang ampuh untuk mendongkrak popularitas sebuah website. Salah satu social media favorit saat ini salah satunya adalah facebook, banyak post artikel ke facebook berarti akan banyak kunjungan ke website.

Cara yang cukup ampuh dan sederhana adalah dengan memasang Facebook Like Box dengan menggunakan popup window, nah berikut ini salah satu caranya :

1. Cukup letakkan kode berikut ini sebelum kode antara kode <body> ….. </body> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></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://3.bp.blogspot.com/-NRmqfyLwBHY/T4nwHOrPSzI/AAAAAAAAAdQ/8b9O7O1q3c8/s1600/fanclose.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 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_user_login') != 'yes'){
$('#fanback').delay(30000).fadeIn('medium');
$('#fanclose, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fanback'>
<div id='fan-exit'>
</div>
<div id='fanbox'>
<div id='fanclose'>
</div>
<div class='remove-borda'>
</div>
<!-- iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/bodisan&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;'></iframe --><center>
<span id="linkit"><a href="http://blogbodi.wordpress.com/">Blog Bodi</a></span></center>
</div>
</div>

Cara menggunakannya cukup mudah :

1. Ganti kode <!– dan –> menjadi < dan > pada tag iframe pada Facebook page-nya.

2. Cukup cari kata ” bodisan ” dan kemudian ganti dengan halaman facebook Anda, tapi ingat jangan mengganti seluruh kode facebook karena dapat merusak seluruh tampilan popup windowsnya.

3. Secara default Facebook popup windows akan muncul setelah 30 detik, namun jika ingin merubahnya menjadi sesuka Anda cukup merubah angka pada kode berikut :

.delay(30000)

4. Facebook popup windows hanya akan tampil 1 kali setelah user membuka website, namun Anda dapat mengubahnya sehingga user akan melihat Facebook popup windows setiap kali membuka halaman. Caranya cukup menghapus baris kode berikut :

$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });

selamat mencoba dan semoga bermanfaat …… salam

Related Search

Tags: #facebook #website

Install Pi-Hole DNS Blokir Iklan dan Tracker
Install Pi-Hole DNS Blokir Iklan dan Tracker
Pi-Hole merupakan salah satu pelindung user internet
Migrasi VPS Panel dari Tuxlite ke VestaCP
Migrasi VPS Panel dari Tuxlite ke VestaCP
Setelah sekian lama menggunakan Tuxlite akhirnya diputuskan
Cara Cepat Root Unlock STB ZTE B760H Tanpa Bongkar
Cara Cepat Root Unlock STB ZTE B760H Tanpa Bongkar
Mungkin beberapa ada yang pernah berlangganan Indihome
Upgrade PHP 5.6 ke PHP 7.0 Nginx Debian Jessie
Upgrade PHP 5.6 ke PHP 7.0 Nginx Debian Jessie
Sebetulnya sudah agak lama warning untuk upgrade

Top