Facebook Popup (Like Box Widget) cho Website của bạn

Ở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ử

DEMO

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/AVvXsEgptRogdipy6ghem5jqcApKwBL6eRNB9ijZ_cPGyfEx3bq7fR5AnTu_6ldW_fJsyO0Mf2ppM9jhe6XhkWWL60q1FiJURwUnk53R4GtS3cNFVRUm942H3zaubreqcFj6dF1ab6-W9AYVNjw2/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ạn

Thờ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!

Share this post

La Ngọc Hưng

Chào các bạn đến với blog truyện tổng hợp của mình nhé !

Facebook

WhatsApp

Instagram

Subscribe Our Newsletter

Posting Terkait