Popup hiển thị likebox của Fanpage facebook trên Blogspot (blogger)

Không phải nói quá dài bằng các thêm “Popup hiển thị likebox của Fanpage facebook trên Blogspot” bằng cách này bạn sẽ kéo được fan mộ trang bạn lên mạng xã hội Facebook nhằm quảng bá và chia sẽ đây là một đều rất tuyệt vời.

Popup hiển thị likebox của Fanpage facebook trên Blogspot” thường thì có 2 dạng: Cài đặt thời gian và Mặc định. Bắt đầu thủ thuật cùng windows2it !

Chỉ cần chèn đoạn mã sau đây vào HTML của web hoặc vào một Widget HTML/Javascript

Đầu tiên bạn vào Blog => Bố cục => Thêm tiện ích => HTML/JavaScript và dán đoạn mã code dưới đây vào và Lưu lại.

Dạng 1: Dạng Cài đặt thời gian

Popup hiển thị likebox của Fanpage facebook trên Blogspot (blogger)

CODE
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<style type='text/css'>
#makingdifferentpopup{
position: fixed;
top:100px;
z-index:9999;
display:none;
padding:0px;
right:600px;
border:10px solid rgba(82, 82, 82, 0.7);
-webkit-background-clip: padding-box; /* for Safari */
background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
-webkit-border-radius:8px 8px 8px 8px;
-moz-border-radius:8px 8px 8px 8px;
border-radius:8px 8px 8px 8px;
width:400px;
height:360px;
overflow:hidden;
}
#makingdifferentpopup span{
font-size:20px !important;
font-weight:bold !important;
}
#makingdifferentpopup h1{
background:#6d84b4 url(https://4.bp.blogspot.com/-rNUTIpDQ21s/T0NqE_vv6GI/AAAAAAAACps/GSoWE2n9Oy8/s1600/%255Bwww.gj37765.blogspot.com%255Dh1.png) 98% no-repeat;
border:1px solid #3b5998 !important;
color:#FFFFFF !important;
font-size:20px !important;
font-weight:700 !important;
padding:5px !important;
margin:0 !important;
font-family:"lucida grande",tahoma,verdana,arial,sans-serif !important;
overflow:hidden !important;
}
.htmlarea{
font-size:12px !important;
font-weight:normal !important;
height:265px !important;
padding:1px !important;
background:#fff !important;
border-bottom:2px solid #ddd;
overflow:hidden !important;
}
#mdfooter{
text-align:left;
background:#F2F2F2 !important;
height:56px !important;
padding:10px 10px 10px 10px !important;
overflow:hidden !important;
}
#mdclose{
float:right;
background-color:#eee !important;
border:1px solid #ccc !important;
color:#111 !important;
font-weight:bold !important;
padding:5px 8px 5px 8px !important;
text-decoration:none !important;
display:inline-block !important;
font-family:"lucida grande",tahoma,verdana,arial,sans-serif !important;
outline:none !important;
position:relative !important;
font-size:18px !important;
margin:1px !important;
}
#mdclose:active{
top:1px;
left:1px;
}
.grabthis{
bottom:80px;
font:8px "lucida grande",tahoma,verdana,arial,sans-serif;
position:absolute;
right:6px;
text-align:right;
z-index: 99999;
}
.grabthis a{
color: #000;
text-decoration:none;
}
.grabthis a:hover{
text-decoration:underline;
}
</style>
<script type='text/javascript'>
jQuery(document).ready(function() {
function makingdifferent_ppopup()  {var sec = 10
var timer = setInterval(function() {
   $("#mdfooter span").text(sec--);
   if (sec == 0) {
      $("#makingdifferentpopup").fadeOut("slow");
      clearInterval(timer);
   }
},1000);
  var mdwh = jQuery(window).height();
  var mdpph = jQuery("#makingdifferentpopup").height();
  var mdfromTop = jQuery(window).scrollTop()+50;
 jQuery("#makingdifferentpopup").css({"top":mdfromTop});}
jQuery(window).fadeIn(makingdifferent_ppopup)
.resize(makingdifferent_ppopup)
 //alert(jQuery.cookie('sreqshown'));
 //var mdww = jQuery(window).width();
 //var mdppw = jQuery("#makingdifferentpopup").width();
 //var mdleftm = (mdww-mdppw)/2;
   var mdleftm = 500;
 //var mdwh = jQuery(window).height();
 //var mdpph = jQuery("#makingdifferentpopup").height();
 //var mdfromTop = (jQuery(window).scrollTop()+mdwh-mdpph) / 2;
 jQuery("#makingdifferentpopup").animate({opacity: "1", left: "0" , left:  mdleftm}, 0).show();
     jQuery("#mdclose").click(function() {
jQuery("#makingdifferentpopup").animate({opacity: "0", left: "-5000000"}, 1000).show();});});
</script>
<div id="makingdifferentpopup">
<h1>Join us on Facebook</h1>
<div class="htmlarea">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/123tailieufree&amp;width=400&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23fff&amp;stream=false&amp;header=false&amp;height=250" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:400px; height:250px;" allowtransparency="true"></iframe>
<div class="grabthis">
By <a href="http://www.windows2it.com/" target="_blank">Making DIfferent</a> / <a href="http://www.windows2it.com/2015/08/popup-hien-thi-likebox-cua-fanpage-facebook-tren-blogspot-blogger.html" target="_blank">+Get This!</a>
</div>
</div>
<div id="mdfooter">Please wait..<span>10</span> Seconds<a href="#" id="mdclose" onclick="return false;">Cancel</a>
</div>
</div>
<!-- End popup -->  

Dạng 2: Dạng Mặc định


CODE 
<style scoped='' type='text/css'> 
#fb-fanbox {display:none;background:rgba(0,0,0,0.9);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999;-webkit-transform:translateZ(0);}
#fb-boxclose {width:100%;height:100%;-webkit-transform:translateZ(0);}
#fb-boxview {background:#fff;border:8px solid #03a9f4;width:340px;height:230px;position:absolute;top:33%;left:37%;border-radius:3px;}
#fb-closebox {float:right;cursor:pointer;position:absolute;right:-1px;top:-2px;z-index:2;}
#fb-closebox:before {content:"CLOSE";padding:5px 8px;background:#03a9f4;color:#fff;font-weight:normal;font-size:10px;font-family:inherit;}
#fb-boxlink,#fb-boxlink a.visited,#fb-boxlink a,#fb-boxlink 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) {
// Pengaturan 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(''));
}
// Dapatkan 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'){
$('#fb-fanbox').delay(3000).fadeIn('fast');
$('#fb-closebox, #fb-boxclose').click(function(){
$('#fb-fanbox').stop().fadeOut('fast');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fb-fanbox'>
<div id='fb-boxclose'>
</div>
<div id='fb-boxview'>
<div id='fb-closebox'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/123tailieufree&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border:none;overflow:hidden;width:339px;height:200px;'></iframe>
</div>
</div>
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'KODE-APLIKASI',
status : true, // check login status
cookie : false, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script></div>

Chú ý: Thay 123tailieufree thành địa chỉ ID Page Facebook của bạn.

Kết luận

- Với cách trên mình hướng dẫn bạn chằn đoạn code đó vào 1 Widget => những đoạn code trong template không ảnh hưởng gì nên các bạn cứ vọc thỏa mái nhé. Còn bạn nào rồ hơn thì có thể chèn trực tiếp vào trong template.

- Các bạn hoàn toàn có thể tùy biến chiều cao, rộng của hộp like box của bạn nhé (ở trên là kích thước chuẩn rồi mình nghĩ các bạn không cần phải thay đổi)

Còn bạn nào chưa rõ hay muốn chèn trực tiếp vào template cứ để lại comment @!
Liên hệ đặt quảng cáo
Quảng cáo trên windows2it.com

About Quang Mến :

Tôi là Quang Mến. Tôi viết blog theo phong cách chuyên nghiệp. ^^! Dựa trên niềm đam mê học hỏi và mong muốn chia sẽ với mọi người @@!
Theo dõi tôi trên:
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
    Blogger Comment
    Facebook Comment

17 nhận xét:

  1. Mình muốn đổi màu viền màu xanh thành màu khác ở dạng 2 phải làm như thế nào ? Mong bạn hướng dẫn

    ReplyDelete
    Replies
    1. Bảng mã màu hôm trước mình đã chỉ cho bạn rùi (giờ mình ko nhắt tới)

      Thủ thuật ở dạng 2: Có 2 code như thế này #03a9f4

      Code thứ 1: là màu viền bao bên ngoài.

      Code thứ 2: là thể hiện màu cho nút Close.

      >>> Bạn thay bảng mã màu bạn muốn vô và lưu lại là xong nhé.

      Chú ý: Mỗi ID truy cập sẽ hiện 1 lần và 7 sẽ hiện lại nếu người đó truy cập.

      expires: 7 (Bạn có thể sữa lại giá trị này 7 ở đây là 7 ngày)

      Delete
  2. Ở cái mẫu 1, mình muốn chỉnh vị trí của nó thì chỉnh thông số nào vậy bạn ?

    ReplyDelete
    Replies
    1. Chỉnh 2 thông số này top:100px và right:600px; nha bạn

      Delete
  3. Replies
    1. Cái thứ 2 hiện đẹp thế này mà bác bảo ko hiển thiệt thua cho bác :(
      http://www.upsieutoc.com/image/5JnO

      Delete
    2. http://www.remix247.tk/ mình cũng không hiển thị

      Delete
  4. oh e làm đúng như bác mà nó không hiện nhỷ

    ReplyDelete
    Replies
    1. Bạn để lại địa chỉ blog của bạn để mình vô kiểm tra.. chứ bạn nói như thế làm sao giúp bạn được :(

      Delete
  5. Replies
    1. Vây thì do bạn ..."Mình cũng hiển thị ???" >>> Chắc mình phải giúp bạn bằng miền tin :(

      Delete
  6. Em muốn nó chỉ hiện ra 1 lần khi khách vào hoặc nó xuất hiện sau khi khách vào khoảng 30 giây thi sửa thế nào bác ơi

    ReplyDelete
  7. của tôi làm như vậy không hien thị
    caoquangcuongblogspot

    ReplyDelete
  8. của tôi làm như vậy không hien thị
    caoquangcuongblogspot

    ReplyDelete