Facebook Like Box is an amazing and useful widget. You can feed your blog posts, articles and updates your friend and audience who have liked your Facebook page. This blog can give you an opportunity to increase your Facebook likes. You can place this widget in your blog’s sidebar by default but in this article I will tell you how you can POPUP this widget at every page load. This Facebook Page Like Box will welcome your blog readers and instructs them to like your Facebook page to get all updates on regular basis. By this mean your reader will take more interest in your page and your Facebook page like will go high. Your readers can close this popup widget by clicking on “[X] Close” button. The main feature of this widget is “no javascript”. So this widget will not take extra load on your blog. This means your blog performance will not be compromised.

Facebook Page Like Box Popup Widget
Facebook Page Like Box Popup Widget

 

How to put Facebook Like Box CSS Popup Widget

1. Blogger Draft › Select Blog › Click on Layout › add HTML/Javascript widget › Leave widget title empty
2. Now paste the following code in widget

Note: Don’t forget to change FACEBOOK_FAN_PAGE_NAME with your own.

For example my Facebook Page name is “techprevue”

http://www.facebook.com/techprevue

Facebook Like Box CSS Popup Widget Code

<!-- FACEBOOK LIKE BOX CSS POPUP WIDGET -->
/*FACEBOOK LIKE BOX CSS POPUP WIDGET
Web link to gadget code: https://www.techprevue.com/facebook-like-box-css-popup-widget-v2-0-improved/
Distributed under license CC BY-NC-ND 3.0 INT
Please keep license information intact while using this widget*/
<style type="text/css">
* html #tpfanbox{position:absolute}
#tpfanbox{display:block;top:0px;left:0px;width:100%;height:100%;margin:0;overflow-y:auto; z-index:9999}
#tpfanboxx{background-color:#fff;overflow:none}
.tpfanboxx{width:320px;height:380px;position:fixed;top:45%;left:50%;margin-top:-200px; margin-left:-200px;border:7px solid #6D85B5;padding:20px;z-index:9999}
.tptitle{background:#3B5999;color:#fff;font-size:16px !important;font-weight:bold;margin:5px 0;border-left:20px solid #6D85B5;padding:10px;line-height:25px;font-family:Arial !important; float:left;z-index:9999}
</style>
<!--[if lte IE 6]>
<style type="text/css">
/*<![CDATA[*/
html {overflow-x:auto;overflow-y:hidden}
/*]]>*/
</style>
<![endif]-->
<div id="tpfanbox">
<div id="tpfanboxx" class="tpfanboxx">
<h3 class="tptitle">GET ALL UPDATES VIA FACEBOOK JUST PRESS <img alt="Like" style="vertical-align:middle" src="http://goo.gl/bX6c0" /> BUTTON</h3>
<center><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FFACEBOOK_FAN_PAGE_NAME&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe></center>
<br/>
<center style="float:left; margin-left:10px;cursor:pointer;"><a style=" font-size:xx-small; color:#3B78CD; text-decoration:none;" onmouseup="document.getElementById('tpfanbox').style.display='none'">[X] CLOSE</a></center>
<center style="float:right; margin-right:10px;"><span style="font-size:xx-small; color:#000; text-decoration:none;">+Get this at</span> <a target='_blank' style="font-size:xx-small; color:#3B78CD; text-decoration:none;" href="https://www.techprevue.com/2013/05/facebook-like-box-css-popup-widget.html">Tech Prévue</a></center>
</div></div>
<!-- FACEBOOK LIKE BOX CSS POPUP WIDGET -->

If this widget does not works for you please change the entire link shown in blue and red color with the link which in address bar when you opens your Facebook page in a web browser.

One important thing is this widget works for all blogs and websites if you paste and save the widget code just above </body> in HTML template.

हिंदी संस्करण पढ़ने के लिए यहाँ क्लिक करें।