×

Code Popup like fanpage xuất hiện 1 lần hỗ trợ giao diện Mobile cho Blogspot

Tất cả mọi người khi phát triển web/blog ai cũng muốn blog của mình được nhiều người quan tâm và thực sự có ích với họ.

Bằng nhiều cách như xây dựng nội dung hữu ích, tạo giao diện dễ sử dụng, các gói khuyến mại tri ân...thì việc tạo các tiện ích giúp khách truy cập dễ dàng kết nối với web/blog cũng là một lựa chọn.

Dưới đây là Popup fanpage với lựu chọn muốn hoặc không muốn like, chỉ xuất hiện 1 lần có hỗ trợ giao diện Mobile cho blogspot.

DEMO

Ở demo không set cookie nên có thể f5 để xem nhiều lần.

Cài đặt Popup fanpage like chỉ xuất hiện 1 lần


Bước 1

Blog phải có thư viện jquery và không sử dụng được async='async'

Thêm link jquery vào mẫu trước </head>

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'/>


Bước 2

Vào bố cục tiến hành thêm một tiện ích HTML/javascript rồi dán đoạn code sau vào và lưu lại.

<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:none;
    border: 5px solid #ff0000;
    width: 350px;
    height: auto;
    position: absolute;
    top: 33%;
    left: 33%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
#fbox-button {
    z-index: 99;
    float: right;
    cursor: pointer;
    position: absolute;
    right: 0px;
    top: -1px;
}
#fbox-button:before {
    content: "CLOSE";
    padding: 5px 8px;
    background: #ff0000;
    color: #eaeaea;
    font-weight: bold;
    font-size: 10px;
    font-family: Tahoma;
}
@media screen and (max-width:800px){
#fbox-display{max-width:100%;top: 20%;left: 25%;float:none}
}
@media screen and (max-width:640px){
#fbox-display{max-width:100%;top: 20%;left: 18%;float:none;} 
}
@media screen and (max-width:500px){
#fbox-display{max-width:100%;top: 20%;left: 10%;float:none;}
#fbox-display{height:auto}
#fbox-button:before{width:100%;}
@media screen and (max-width:420px){#fbox-display{max-width:100%;top: 20%;left: 0%;float:none;}}
</style>
<script>
//<![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>
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: 1});
});
</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%3A%2F%2Fwww.facebook.com%2Fdoisong24%2F&tabs&width=340&height=130&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="340" height="130" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
</div>
</div>


Để cài đặt code bạn cần có fanpage và thực hiện lấy code trang fanpage bằng cách đăng nhập tài khoản facebook có fanpage theo đường dẫn.

Tại đây

Điền link trang fanpage nhớ xóa dòng timeline và click lấy mã sau đó chọn bên iframe cho tiện, tiếp theo sao chép mã và thay thế đoạn iframe trong code(ko thay cũng ko sao).

Lưu ý

Thời gian popup xuất hiện sau khi truy cập blog

Trong mặc định ở đoạn code trên popup sẽ tự bật lên sau 5 giây. Nếu bạn muốn thay đổi nó bạn có thể tìm trong đoạn code

.delay(5000)


Và sửa nó theo ý mình. Đơn vị tính là mili giây, 5000 là 5 giây.

Set cookie

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


Code để sau 1 ngày cookie hết hạn nghĩa là sau 1 ngày khi khách truy cập popup like lại xuất hiện.

Ads in post custom

Ads in post custom1

Ads in post custom2

Ads in post custom3