Ởbài viết này BDK sẽ giới thiệu đến bạn một widget giúp tăng like Fanpage một cách bài bản, hiệu quả và đặc biệt là không gây phản cảm cho người đọc. Khi người đọc mở bài viết thì sau 10 giây (có thể thay đổi) popup sẽ tự động hiện lên. Theo mặc định Popup sẽ chỉ hiện lên lần đầu khi tải trang để tránh làm phiền người đọc khi hiện quá nhiều lần mỗi khi tải trang và sẽ hiển thị lại sau 30 ngày. Mời bạn xem thử
Cài đặt Popup Facebook like fanpage
Bạn có thể đặt đoạn code sau ở bất cứ đâu nếu muốn nơi đó hiện popup. Nếu bạn đặt ở bài viết thì popup chỉ hiện ở bài viết cụ thể, nếu đặt ở tiện ích HTML/Javascript thì popup sẽ hiển thị những trang có thể gọi tiện ích này ra. Hoặc bạn cũng có thể đặt ở Template để popup hiện ở tất cả trang, bài viết của blog.<!-- Facebook Popup Widget START http://blogduykhanh.blogspot.com -->
<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%;
}
#JasperRoberts {
background:white;
width:420px;
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;
}
#Blogduykhanh {
float:right;
cursor:pointer;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd6-i7fgM9SHkpvc5MltBLEu2qxADmm-1bdUoKzqXh73pVsw6yoXVwoJR2WlZ0kcLOx5Z4TaUKB-mXVtO4jmM2O0MGldfEdVbCjH8Bkd3QdaG_e80gMfOCcRJtoZKtsXRUUkWq6BY4uAs6/s1600/blogduykhanhfacebookpopup.png) repeat;
height:15px;
padding:20px;
position:relative;
padding-right:40px;
margin-top:-20px;
margin-right:-22px;
}
.remove-borda {
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_user_login') != 'yes'){
$('#fanback').delay(10000).fadeIn('medium');
$('#Blogduykhanh, #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='JasperRoberts'>
<div id='Blogduykhanh'>
</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/blogduykhanh&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; margin: -27px 8px -18px 9px; width: 402px; height: 230px;'></iframe><center>
<span style="color:#a8a8a8;font-size:8px;" id="linkit">Powered by <a style="color:#a8a8a8;font-size:8px;"http://blogduykhanh.blogspot.com">Blog Duy Khánh</a> - <a style="color:#a8a8a8;font-size:8px;" href="https://www.facebook.com/blogduykhanh">Fanpage</a></span></center>
</div>
</div>
<!-- Facebook Popup Widget END -->
Tùy chỉnh Widget
Thay đổi địa chỉ fanpage
Bạn thay https://www.facebook.com/blogduykhanh thành địa chỉ fanpage của bạnThời gian popup bật lên sau khi tải trang
Trong mặc định ở đoạn code trên popup sẽ tự bật lên sau 10 giây tải trang. Nếu bạn muốn thay đổi nó bạn có thể tìm trong đoạn code trên.delay(10000)Và sửa nó theo ý mình. Đơn vị tính là mili giây, ví dụ bạn muốn đặt thời gian là 30 giây thì có thể sửa thành .delay(30000)
Hiện popup mỗi khi tải trang
Theo mặc định popup sẽ hiện lên chỉ với lần đầu tải trang và chỉ hiện lại sau 30 ngày để tránh làm phiền người đọc, bạn cũng có thể cho phép popup hiện lên mỗi lần tải trang bằng cách bằng cách tìm đoạn code sau và xóa nó đi.$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
Vấn đề không nhìn thấy popup hoạt động
Như mình nói ở trên thì popup chỉ hiển thị một lần đầu duy nhất khi bạn tải trang, để chắc chắn nó hoạt động thì bạn có thể xóa cookie của trình duyệt đi rồi tải lại trang hoạt đơn giản hơn là sử dụng tổ hợp phím huyền thoại CTRL + SHIFT + N đối với Chrome, Cốc Cốc CTRL + SHIFT + P đối với Firefox. Nếu gặp vấn đề gì bạn có thể để lại bình luận bên dưới. Chúc bạn thành công!
Mặt cườiMặt cười