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.