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

ANHLEVAN.TK chia sẻ đến các bạn cách tạo popup share and like page facebook

Nhằm tăng số lượng chia sẻ và like trang facebook của bạn rất hiệu quả.

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAQXmsmDQpCyLvRKtddCGaXkgKYICxSIGbixuxiTLbyU_w_B_8p4rc33XRLZsSiTJroBJtDrwsaJuu9yM0JAa4Rlq1dPMyKN2NWWngZSJWd-5HAkUa96VkliQIsYHlXE_1sqUhrNmJ0u6v/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;color:red !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://s-anhlevan.blogspot.com/" 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="https://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. - Lúc bạn vừa vào đây thì đã thấy demo popup share and like page facebook của mình rồi đó

Xem demo

☞ 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ể.

Join us on Facebook

Created by Anhlevan

Please wait . . .    secondsCancel