Cách tạo popup share and like page facebook

ANHLEVAN.TK hôm nay chia sẻ đến các bạn cách tạo popup nhằm tăng số lượng chia sẻ và like trang facebook của bạn, Xem demo

Bạn thực hiện theo hướng dẫn dưới đây:

Bước 1.  Bạn tải về 2 file .css và .js dưới đây và up lên hosting của bạn

- Xem và tải file .css

/* Created by Anhlevan */
#makingdifferentpopup{position:fixed;margin-top:20px;z-index:9999;display:none;padding:0px;right:50%;margin-left:auto;border:10px solid rgba(82, 82, 82, 0.7);-webkit-background-clip: padding-box;background-clip: padding-box;-webkit-border-radius:8px 8px 8px 8px;-moz-border-radius:8px 8px 8px 8px;border-radius:8px 8px 8px 8px;width:400px;height:241px;overflow:hidden;}
#makingdifferentpopup span{font-size:16px !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:150px !important;padding:1px !important;background:#fff !important;border-bottom:2px solid #ddd;overflow:hidden !important;}
#mdfooter{text-align:left;background:#F2F2F2 !important;height: 32px !important;padding: 15px !important;overflow:hidden !important;}
#mdclose{float:right;background-color:#eee !important;border:1px solid #ccc !important;color:red !important;font-weight:bold !important;padding: 6px 15px !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:12px !important;margin-top:-6px !important;}
#mdclose:active{top:1px;left:1px;}
.grabthis{bottom:60px;font:12px "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{color:blue;text-decoration:none;}

- Xem và tải file .js

jQuery(document).ready(function() {
function makingdifferent_ppopup()  {var sec = 20
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();});});

Bước 2.  Bạn đưa vào cuối bài viết code sau và lưu lại (Chú ý phần màu đỏ):

<!-- popup share and like Page facebook -->
<div id="makingdifferentpopup">
<h1>Join us on Facebook</h1>
<div class="htmlarea">
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=LINK PAGE FACEBOOK&amp;width=400&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23fff&amp;stream=false&amp;header=false&amp;height=250" style="border: none; height: 250px; overflow: hidden; width: 400px;"></iframe>
<div class="grabthis">Created by <a href="https://www.anhlevan.tk/" target="_blank">Anhlevan</a></div>
</div>
<div id="mdfooter">Please wait . . . <span>20</span> seconds<a href="#" id="mdclose" onclick="return false;">Cancel</a></div>
</div>
<link rel="stylesheet" type="text/css" href="LINK FILE .css">
<script src='LINK FILE .js' type='text/javascript'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js" type="text/javascript"></script>
<!-- End popup -->

Chú ý: - Nếu trong template blog của bạn đã có jquery rồi thì bỏ dòng cuối nha. - Chúc các bạn thành công. - Đừng quên chia sẻ trang web này đến mọi người nha bạn, cám ơn.

☞ Nếu bạn có bất kỳ vấn đề nào với bài viết này hãy comment vào bên dưới, mình sẽ hồi âm sớm nhất có thể.