Stylish Facebook Like Pop Up Script For Blogger And Wordpress
Facebook followers is one factor that decides your blog future, So it is very important to maintain and keep your FB page up to date.Floating Facebook like box is one of the remedy for getting more followers and likes for your Facebook page.This Floating widget can be used by all blogs on every platforms that support Adding HTML/Javascript to their blog.
Preview :
This is the preview of how floating Facebook like box will appear on your Blog.
HTML Tag
<script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = “//connect.facebook.net/en_US/all.js#xfbml=1″; fjs.parentNode.insertBefore(js, fjs); }(document, ‘script’, ‘facebook-jssdk’));</script> <br /> <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js” type=”text/javascript”></script> <style type=”text/css”> #exepopup{background-color:#fff;position: fixed;top:50%;z-index:9999;display:none;padding:0px;left:50%;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;margin-left:-200px;margin-top:0px;overflow:hidden;}#exepopup span{font-size:20px !important;font-weight:bold !important;}#exepopup h1{background:#6d84b4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlTN1D8r4KrgO4_EitWcch8bWHeYwAoiVAh0OhKcSiTveDS3cvZHO6OXDFVExJ1Q4nyDMWLg0Z0WWhLvMtLSk79lwd7KStjIXtgINfLMKCjGI01LfO8GvwqclY5W8rmFBhMsDuMovL0jc/s1600/NBL.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;}.exepopupdata{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;}#exepopupfooter{text-align:left;background:#F2F2F2 !important;height:56px !important;padding:10px 10px 10px 10px !important;overflow:hidden !important;}#exepopupclose{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;}#exepopupclose:active{top:1px;left:1px;}</style> <script type=”text/javascript”> jQuery(document).ready(function() { function exepopupfunc() { var sec = 10 var timer = setInterval(function() { $(“#exepopupfooter span”).text(sec–); if (sec == 0) { $(“#exepopup”).fadeOut(“slow”); clearInterval(timer); } },1000); var exepopupwindow = jQuery(window).height(); var exepopupdiv = jQuery(“#exepopup”).height(); var exepopuptop = jQuery(window).scrollTop()+50; jQuery(“#exepopup”).css({“top”:exepopuptop});} jQuery(window).fadeIn(exepopupfunc).resize(exepopupfunc) //alert(jQuery.cookie(‘sreqshown’)); //var exepopupww = jQuery(window).width(); //var exepopupwww = jQuery(“#exepopup”).width(); //var exepopupleft = (exepopupww-exepopupwww)/2; var exepopupleft = 500; //var exepopupwindow = jQuery(window).height(); //var exepopupdiv = jQuery(“#exepopup”).height(); //var exepopuptop = (jQuery(window).scrollTop()+exepopupwindow-exepopupdiv) / 2; jQuery(“#exepopup”).animate({opacity: “1”, left: “0” , left: exepopupleft}, 0).show(); jQuery(“#exepopupclose”).click(function() { jQuery(“#exepopup”).animate({opacity: “0”, left: “-5000000″}, 1000).show();});}); </script> <div id=”exepopup”> <h1> Join Us On Facebook</h1> <div class=”exepopupdata”> <iframe allowtransparency=”true” frameborder=”0″ scrolling=”no” src=”http://facebook.com/plugins/likebox.php?href=https://www.facebook.com/hackerprime007?ref=hl&width=400&colorscheme=light&show_faces=true& border_color=%23fff&stream=false&header=false&height=250″ style=”border: none; height: 250px; overflow: hidden; width: 400px;”></iframe></div> <div id=”exepopupfooter”> Please Wait <span>10</span> Seconds…!!!<a href=”http://www.hackerprime.com” id=”exepopupclose” onclick=”return false;”>Skip</a></div> </div> <span><span></span></span>
Let’s Start
Blogger
Go to Dashboard > Layout > Add a Gadget
Choose HTML/Javascript option
Now paste the above given code to the space provided
Save
WordPress (Self Hosted)
Self Hosted Worpdress users Red this article : How to Add Floating Like Box on Your WP Blog
Reading this article will make you how to add like box on your wordpress blog
Other CMS
Add below given style sheet to your Blog Header.php
Add the above given HTML tags in your Text widget and save
Preview :
This is the preview of how floating Facebook like box will appear on your Blog.
HTML Tag
<script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = “//connect.facebook.net/en_US/all.js#xfbml=1″; fjs.parentNode.insertBefore(js, fjs); }(document, ‘script’, ‘facebook-jssdk’));</script> <br /> <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js” type=”text/javascript”></script> <style type=”text/css”> #exepopup{background-color:#fff;position: fixed;top:50%;z-index:9999;display:none;padding:0px;left:50%;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;margin-left:-200px;margin-top:0px;overflow:hidden;}#exepopup span{font-size:20px !important;font-weight:bold !important;}#exepopup h1{background:#6d84b4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlTN1D8r4KrgO4_EitWcch8bWHeYwAoiVAh0OhKcSiTveDS3cvZHO6OXDFVExJ1Q4nyDMWLg0Z0WWhLvMtLSk79lwd7KStjIXtgINfLMKCjGI01LfO8GvwqclY5W8rmFBhMsDuMovL0jc/s1600/NBL.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;}.exepopupdata{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;}#exepopupfooter{text-align:left;background:#F2F2F2 !important;height:56px !important;padding:10px 10px 10px 10px !important;overflow:hidden !important;}#exepopupclose{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;}#exepopupclose:active{top:1px;left:1px;}</style> <script type=”text/javascript”> jQuery(document).ready(function() { function exepopupfunc() { var sec = 10 var timer = setInterval(function() { $(“#exepopupfooter span”).text(sec–); if (sec == 0) { $(“#exepopup”).fadeOut(“slow”); clearInterval(timer); } },1000); var exepopupwindow = jQuery(window).height(); var exepopupdiv = jQuery(“#exepopup”).height(); var exepopuptop = jQuery(window).scrollTop()+50; jQuery(“#exepopup”).css({“top”:exepopuptop});} jQuery(window).fadeIn(exepopupfunc).resize(exepopupfunc) //alert(jQuery.cookie(‘sreqshown’)); //var exepopupww = jQuery(window).width(); //var exepopupwww = jQuery(“#exepopup”).width(); //var exepopupleft = (exepopupww-exepopupwww)/2; var exepopupleft = 500; //var exepopupwindow = jQuery(window).height(); //var exepopupdiv = jQuery(“#exepopup”).height(); //var exepopuptop = (jQuery(window).scrollTop()+exepopupwindow-exepopupdiv) / 2; jQuery(“#exepopup”).animate({opacity: “1”, left: “0” , left: exepopupleft}, 0).show(); jQuery(“#exepopupclose”).click(function() { jQuery(“#exepopup”).animate({opacity: “0”, left: “-5000000″}, 1000).show();});}); </script> <div id=”exepopup”> <h1> Join Us On Facebook</h1> <div class=”exepopupdata”> <iframe allowtransparency=”true” frameborder=”0″ scrolling=”no” src=”http://facebook.com/plugins/likebox.php?href=https://www.facebook.com/hackerprime007?ref=hl&width=400&colorscheme=light&show_faces=true& border_color=%23fff&stream=false&header=false&height=250″ style=”border: none; height: 250px; overflow: hidden; width: 400px;”></iframe></div> <div id=”exepopupfooter”> Please Wait <span>10</span> Seconds…!!!<a href=”http://www.hackerprime.com” id=”exepopupclose” onclick=”return false;”>Skip</a></div> </div> <span><span></span></span>
Let’s Start
Blogger
Go to Dashboard > Layout > Add a Gadget
Choose HTML/Javascript option
Now paste the above given code to the space provided
Save
WordPress (Self Hosted)
Self Hosted Worpdress users Red this article : How to Add Floating Like Box on Your WP Blog
Reading this article will make you how to add like box on your wordpress blog
Other CMS
Add below given style sheet to your Blog Header.php
Add the above given HTML tags in your Text widget and save
Comments
Post a Comment