How to Add Facebook Like Box CSS Popup Widget v2.0 Improved?

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 allow you to increase your Facebook likes. You can place this widget in your blog’s sidebar, but in this article, I will tell you how you can POPUP this widget at every page load.

This Facebook Page Like Box CSS POPUP will welcome your blog readers and instructs them to like your Facebook page to get all updates on a regular basis. By this means, 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 the “[X] Close” button. The main feature of this widget is “no javascript”. So this widget will not take the 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 Use 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 the widget

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

For example, my Facebook Page name is “techprevue.”

https://www.facebook.com/techprevue

Facebook Like Box CSS Popup Widget Code

<!-- FACEBOOK LIKE BOX CSS POPUP WIDGET -->
<style>
* 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="//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">TechPrevue</a></center>
</div></div>
<!-- FACEBOOK LIKE BOX CSS POPUP WIDGET -->

If this widget does not work for you, please change the entire link shown in blue and red color with the link which in the address bar when you open 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 the HTML template.

6 thoughts on “How to Add Facebook Like Box CSS Popup Widget v2.0 Improved?”

  1. I INSTALLED THIS GADGET IN MY BLOG AND THIS WORK PERFECTLY.
    BUT MY PROBLEM IS THAT IT IS LOAD EVERY TIME WHEN SOMEONE BROWSE MY BLOG, IT IS VERY ANNOYING.
    SO IT IS POSSIBLE TO MAKE THIS WIDGET LOAD ONLY ONCE WHEN SOMEONE VISIT MY BLOG

  2. I LIKEEEE IIIIT…….!!!! THANKS BROO!!! I GIVE MY LIKE FROM RAHMATDIBLACK….HAHAHAH LOL

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top