Code POPUP Like Fanpage FaceBook Đẹp cho web

Cập nhật: Lượt xem: 1500 [ Javascript ]

Code hiển thị Popup Like Fanpage FaceBook chắc không còn xa lạ gì. Tác dụng của code này sẽ hiển thị khung like fanpage trên trang của các bạn khi người dùng lướt xuống.

Code POPUP Like Fanpage FaceBook Đẹp cho web

Lưu ý code này phải trượt xuống mới hiện bảng thông báo. Khá hay khi người dùng tương tác.

 
Điểm đặc biệt là code này sẽ không hiển thị mỗi lần người dùng click mà chỉ hiển thị 1 lần duy nhất và không hiển thị lại nữa. Điều này sẽ khiến người dùng không cảm thấy khó chịu và bỏ rơi web bạn đâu nhé ^^ 
 
Sau đây là toàn bộ code bao gồm thư viện jquery + css + html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style>
#fbox-background {
    display: none;
    background: rgba(0,0,0,0.8);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
}

#fbox-close {
    width: 100%;
    height: 100%;
}

#fbox-display {
    background: #eaeaea;
    border: 5px solid #3a5795;
    width: 340px;
    height: 230px;
    position: absolute;
    top: 32%;
    left: 37%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#fbox-button {
    float: right;
    cursor: pointer;
    position: absolute;
    right: 0px;
    top: 0px;
}

#fbox-button:before {
    content: "CLOSE";
    padding: 5px 8px;
    background: #3a5795;
    color: #eaeaea;
    font-weight: bold;
    font-size: 10px;
    font-family: Tahoma;
}

#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover {
    color: #aaaaaa;
    font-size: 9px;
    text-decoration: none;
    text-align: center;
    padding: 5px;
}
</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_box') != 'yes'){
$('#fbox-background').delay(5000).fadeIn('medium');
$('#fbox-button, #fbox-close').click(function(){
$('#fbox-background').stop().fadeOut('medium');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fbox-background'>
<div id='fbox-close'>
</div>
<div id='fbox-display'>
<div id='fbox-button'>
</div>
<iframe src="https://www.facebook.com/plugins/page.php?href=https://www.facebook.com%2Flaptrinhweb.anythingvn%2F&tabs&width=340&height=214&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=181469048859295" width="340" height="214" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
<div id="fbox-link">Powered by <a style="padding-left: 0px;" href="http://laptrinhweb.anythingvn.com" rel="nofollow">AnythingVn.Com</a></div>
</div>
</div>
Nhớ thay link Fanpage facebook của các bạn vao nhé
Các bạn nên chèn code này bên trên thẻ </body> sẽ khiến blog của bạn load mượt mà hơn là để ở đầu trang