Add Facebook Page Promoter Lightbox to Blogger

Looking for a quick and short way to make users like your Facebook page right from your blog? Here you go! Today, I'm gonna teach you how to add a facebook popup like box to your blog that will only appear when a new user visits your blog. It'll allow the user to like your Facebook page right from your blog.

It's just a simple little popup box showing those people who already liked your blog and also a like button that'll let the new user like your Facebook page. It really increases your likes.

It'll only appear for new users not for old ones. Here is what actually happens, when opened first time it'll create a cookie in user's browser. When the page loads it will check if the cookie is there it wouldn't show a popup but if there isn't any cookie then it'll show. That's how it works.

DEMO

Add Facebook Page Promoter Lightbox to Blogger

  • First of all Login to your Blogger Account >> Navigate to Your Blog >> Layout
  • Click on Add a Gadget and Select HTML/JavaScript and paste the mentioned below code in Content Box
<style>
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;z-index: 99999;}
#colorbox{padding-bottom: 0px; padding-right: 0px; display: block; width: 447px !important; height: 272px !important; top: 200px !important; left: 300px !important; position: fixed; z-index: 99999;}
#cboxMiddleLeft{float: left;height: 299px !important;}
#cboxWrapper{height: 270px !important;width: 450px !important;top: 5px;position: relative;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxContent{float: left;width: 450px !important;height: 255px !important;}
#cboxClose{cursor: pointer; float: right; background-image: url(https://googledrive.com/host/0B8D3MQmcZTyvd0ZIMWtvT1BkQ1k); height: 30px; width: 0px; padding-left: 0px; padding-right: 31px; position: fixed; margin-top: 5px; margin-right: 30px; text-indent: 100%; background-repeat: space; display: block; margin-left: 380px;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#cboxOverlay{background:#000;opacity:0.5 !important;pointer-events: none;}
#cboxLoadedContent{width: 450px !important;height: 285px !important;position: fixed;}
#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
#subscribe{padding: 10px;height: 233px;width: 375px;margin-top: 20px;background-color: white;}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script src="https://googledrive.com/host/0B8D3MQmcZTyvc0tSUVBIZzFld0E"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
   if (document.cookie.indexOf('visited=true') == -1) {
       var fifteenDays = 1000*60*60*24*30;
       var expires = new Date((new Date()).valueOf() + fifteenDays);
       document.cookie = "visited=true;expires=" + expires.toUTCString();
       $.colorbox({width:"450px", inline:true, href:"#subscribe"});
       }
});
</script>
<div style='display:none'>
<div id='subscribe'>
<center>
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fsamoyiki&amp;width=400&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=255" style="height: 260px;overflow: hidden;width: 396px;margin-left: -10px;margin-top: -11px;">
</iframe>
</center>
</div>
</div>
  • Replace samoyikiwith your Facebook Page Username.
You'll see a few numbers being multiplied by each other, these are total milliseconds after which the cookie will expire. For the current value it won't show the popup again unless the cookie gets expired(cookie will expire after 30 days). You can change this value as you wish. The first 1000 is necessary as it converts the whole value into milliseconds rest are the days, hours and seconds. There is *30 written, it represents days. You can change it as you wish. For example, if you want the popup to come every year then change the *30 to 365. The *24 represents hours,  *60  represents minutes and the other *60 represents seconds. You can change any of these values. If you want to show again and again to your blog visiters then remove highlighted numbers.
  • After All! Press Save, Visit your blogs to see Facebook Page Promoter Lightbox its Awesome.
I hope you will love this Facebook Page Promoter Lightbox, if you have any confusion or question feel free to ask me.