Add Floating Facebook Like Box In Your Blog

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.


<script>(function(d, s, id) {   var js, fjs = d.getElementsByTagName(s)[0];   if (d.getElementById(id)) return;   js = d.createElement(s); = id;   js.src = "//";   fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <br /> <!--IPEE World Facebook POPUP LikeBox With Timer Code Start --> <script src="" 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( 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=";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> <div id="exepopupfooter"> Please Wait <span>10</span> Seconds...!!!<a href="" id="exepopupclose" onclick="return false;">Skip</a></div> </div> <!--IPEE World Facebook POPUP LikeBox With Timer Code End --> <span><span></span></span> 

Let's Start


Go to Dashboard > Layout > Add a Gadget

Choose HTML/Javascript  option

Now paste the above given code to the space provided


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

Hi Guys, I'm Astro Joseph a young Blogger from Kerala,India.I Started IPEE World as passion and it is now empowering Millions of Readers around the Globe.Read more at About Page

Sharing is Caring :)

Related Articles

Previous Article
Next Article »

We’re very excited to see your comments. However, Please Keep in mind that, All Comments are strictly moderated by us before publishing.Comments with Links and other unnecessary contents will be removed and will not be published. :)

Contact Form


Email *

Message *