Hướng Dẫn Tạo Facebook Popup Like Box Cho Blogger

Nếu bạn có một Fan Page trên Facebook và muốn nó hiển thị ngay trong trang Blog của bạn nhằm tăng Like Fanpage thì bài viết sau sẽ thật sự hữu ích dành cho bạn. Popup này sẽ xuất hiện ngay khi có khách truy cập vào trang Blog của bạn và trang Fanpage sẽ hiện ra, làm tối đi những phần khác trên Blog và sẽ ẩn đi khi bạn kéo thanh cuộn, cách này sẽ thu hút sự chú ý của người dùng truy cập click Like Fanpage cho bạn.

Hướng Dẫn Tạo Facebook Popup Like Box Cho Blogger

Bước 1: Đăng nhập vào Blogger.
Bước 2: Chọn Bố cục > Thêm tiện ích HTML/JavaScript.
Bước 3: Dán code dưới đây vào.
<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 allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/HoangTueBlog/&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; background: #fff; width: 339px; height: 200px;'></iframe>
<div id="fbox-link">Powered by <a style="padding-left: 0px;" href="https://hoangtueblog.blogspot.com/" rel="nofollow">Hoàng Tuệ Blog</a></div>
</div>
</div>Bước 4: Lưu lại và xem kết quả!

Tùy Chỉnh Widget

- Bạn thay https://www.facebook.com/HoangTueBlog/ thành Link Fanpage của bạn.
- Thay https://hoangtueblog.blogspot.com/ thành Link Blog của bạn.
- Thay Hoàng Tuệ Blog bằng tên bạn muốn đặt.

Theo mặc định thì Popup chỉ xuất hiện khi người dùng truy cập lần đầu tiên vào Blog, nếu muốn nó xuất hiện mỗi lần tải trang thì xóa đoạn code sau:

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

Hi vọng với Plugin này sẽ giúp bạn tăng Like nhanh chóng cho Fanpage của bạn, chúc các bạn thành công!