Hộp FacebookFanpage nỗi tùy chỉnh thời gian cho Blogger [ Blogspot]

Monday, November 16, 2015

Cách thêm hộp FacebookFanpage nỗi tùy chỉnh thời gian cho Bloggger giúp tăng lượng Like là một trong những cách tốt nhất để có được lưu lượng truy cập lớn đến trang của bạn. Vì vậy, việc tạo một Fanpage trên Facebook là rất cần thiết. Tuy nhiên, làm thế nào để được nhiều người thích Fanpage của bạn? Một trong những cách có thể làm tăng số người thích Fanpage của bạn là thêm Facebook Like Box Popup Widget vào trang web hay blog của bạn.

Dưới đây là Cách thêm hộp FacebookFanpage nỗi tùy chỉnh thời gian cho Bloggger

1 Chèn đoạn code sau trước thẻ đóng</body>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<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') {
            $('#FBfanback').delay(5000).fadeIn('medium');
            $('#FBfanclose, #FBfan-exit').click(function() {
                $('#FBfanback').stop().fadeOut('medium');
            });
        }
        $.cookie('popup_facebook_box', 'yes', {
            path: '/',
            expires: 0
        });
    });
</script>

<div id="FBfanback">
<div id="FBfan-exit">
</div>
<div id="FBfanbox">
<div id="FBfanclose">
</div>
<div class="FBremove-border">
</div>

<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fhelper.blogger&amp;
width=340&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" style="border: none; height: 258px; margin-left: 8%; overflow: hidden; width: 340px;"></iframe>

</div>
</div>

2 Code CSS làm đẹp cho Khung Facebook Popup

 <style type="text/css">
#FBfanback {
  display: none;
  background: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
}
 
#FBfan-exit {
  width: 100%;
  height: 100%;
}
 
#FBfanbox {
  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;
}
 
#FBfanclose {
  float: right;
  cursor: pointer;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsWx8xuQdcOLwke2l1K9HYx-zE5YfkxmwkbK-ldrS59fNA62Wl1GIhaa2cWJEJ6XCVFjV788xkCRH6tXIJtwgZVYBBW0VwL1tnj1SFXyf6H3e_KQ311QkJHSOPNEdpEtBFsB8cEALS4rs/s1600/hb-fanclose.png) repeat;
  height: 15px;
  padding: 20px 40px 20px 20px;
  position: relative;
  margin-top: -20px;
  margin-right: -20px;
}
 
.FBremove-border {
  height: 1px;
  width: 366px;
  margin: 0 auto;
  background: #F3F3F3;
  margin-top: 16px;
  position: relative;
  margin-left: 20px;
}
 </style>

LƯU Ý:

► Thay thế tên Fanpage của bạn. Tìm kiếm helper.blogger và thay thế bằng URL Fanpage của bạn.

► Thay đổi thời gian trễ. Mặc định Popup này sẽ hiển thị sau 5 giây khi load trang xong. Nếu bạn muốn lâu hơn hãy tìm kiếm mã dưới đây và thay đổi số 5000 với một số lớn hơn hoặc nhỏ hơn.

delay(5000).fadeIn('medium')

► Popup này bật lên mỗi khi tải trang. Nếu bạn muốn Popup Fanpage bật lên sau 1 ngày hoặc nhiều hơn thì hãy sửa lại dòng mã sau, thay số 0 thành số ngày mà bạn muốn nó hiển thị lại

$.cookie(‘popup_user_login’, ‘yes’, { path: ‘/’, expires: 0 });

► Lời khuyên, bạn không nên lạm dụng cửa sổ popup Fanpage mọi lúc mỗi khi tải trang để tránh làm phiền độc giả.

Chúc bạn thành công!

Tag : Blog Design, Blog Tips

TopMenu

Banner 728x90