Welcome to InfoExpo - "Explore the World of technology" ~ New: N-Tools | Make Money Online | Latest: Google DriveR | BigRock Discount ~ Guide On: Online Shopping

Thursday, May 16, 2013

Facebook PopUp Like Box - Fastest & Effective

Facebook PopUp Like Box - Fastest & Effective

Introducing new javascripts/JQuery free Facebook PopUp Like Box, SEO friendly with fast loading speed.
Social networks always play a major role in website traffic building. Facebook brings lots of visitors for a website by means of fan page posts,links etc. Facebook POP Up Like Box is one, mostly used in blogs for , it is very effective too. But most commonly found PopUp Like Boxes are working with javascripts/ JQuery which negatives affects the website by increasing the site loading speed and makes too delay for the visitor. 
So here I'm introducing latest Facebook PopUp Like Box in which no javascripts / JQuery is used. It successfully works with html & css , it does not affect the load speed of the website so it is Fastest & Effective.
Related: Publish blog posts to facebook Groups & Pages automatically
How to add this Facebook PopUp Like Box to Blogger
  • Go to Layout settings
  • Add new widget anywhere
  • Select HTML widget
  • Add the below code to the HTML bo
<style type="text/css">
* html #tpstylepopupdiv{position:absolute}
#tpstylepopupdiv{display:block;top:0px;left:0px;width:100%;height:100%;margin:0;overflow-y:auto; z-index:9999}
.tpstylepopup{width:420px;height:480px;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}
<!--[if lte IE 6]>
<style type="text/css">
html {overflow-x:auto;overflow-y:hidden}
<div id="tpstylepopupdiv">
<div id="tpstylepopup" class="tpstylepopup">
<h3 class="tptitle">GET ALL UPDATES VIA FACEBOOK JUST CLICK <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%2Finfoexpo.in&amp;width=400&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=358" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:400px; height:358px;" allowtransparency="true"></iframe></center>
<center style="float:left; margin-left:10px;cursor:pointer;"><a style=" font-size:xx-small; color:#3B78CD; text-decoration:none;" onmouseup="document.getElementById('tpstylepopupdiv').style.display='none'">[X] I'm Already A FAN</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="

*Note: Replace infoexpo.in with your facebook fan-page username.
  •  Save It, You are done..!
Get Started with Facebook Graph Search Beta Now
> Welcome message when you log on your computer

Buy Everything Online at Cheap Price

Get Free Updates to your Inbox
Follow us on:
facebook twitter gplus pinterest rss