Facebook popup like box widget for blogger

Facebook is a most popular social media website having millions of users all over the world. Almost every website has facebook fan page that gather fans and hero at a single place to share things with one another. If you want to increase your facebook page fan list then you should have more likes on your fan page. One easy way to get more likes you should convince your visitors to like your page. Facebook popup like box is a great plugin that you can use in your website/blog to increase your fan page list and also to increase traffic on your website. This popup works in a simple way i.e. it will appear on the center when visitor open your website/blog. It will continue to appear with every page load of your website until the visitors like it, It has also the close button options to cool visitors if they are annoying with this popup. So, it is simple to add in blogger just follow the below steps and enjoy your facebook popup on your blog/website.

How to add this widget in Blogger

First Login to your blogger dashboard select a template in which you want to add this Facebook popup like box.
Go to template >>Backup your template and click edit HTML.

Now search for </head> and paste the below Script before/above </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script><script src='http://yourjavascript.com/69231961363/jquery-colorbox-min.js' type='text/javascript'/> 
<script type='text/javascript'> 
jQuery(document).ready(function(){ 
if (document.cookie.indexOf(&#39;visited=true&#39;) == -1) { 
var setDays = 1000*60*60*24*7; 
var expires = new Date((new Date()).valueOf() + setDays); 
document.cookie = &quot;visited=true;expires=&quot; + expires.toUTCString(); 
$.colorbox({width:&quot;400px&quot;, height:&quot;430px&quot;, inline:true, href:&quot;#facebook-popup&quot;}); 
}});</script>

*7 Setting this value will effect cookie refreshment. I have set the likebox to appear once to the visitor and likebox will appear again after 1 week. If you want to display likebox to your visitors after a 1 day then set 7 to 1. if you set the value to 1 then it can annoying your regular readers.
Now search for </b:skin>   and paste the below CSS above/before </b:skin>

 /* Colorbox Core Style: The following CSS is consistent between example themes and should not be altered. */ #colorbox, #cboxOverlay, #cboxWrapper { position: absolute; top: 0; left: 0; z-index: 9999; overflow: hidden; } #cboxOverlay { position: fixed; width: 100%; height: 100%; } #cboxMiddleLeft, #cboxBottomLeft { clear: left; } #cboxContent { position: relative; } #cboxLoadedContent { overflow: auto; -webkit-overflow-scrolling: touch; } #cboxTitle { margin: 0; } #cboxLoadingOverlay, #cboxLoadingGraphic { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow { cursor: pointer; } .cboxPhoto { float: left; margin: auto; border: 0; display: block; max-width: none; -ms-interpolation-mode: bicubic; } .cboxIframe { width: 100%; height: 100%; display: block; border: 0; } #colorbox, #cboxContent, #cboxLoadedContent { box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; } /* User Style: Change the following styles to modify the appearance of Colorbox. They are ordered and tabbed in a way that represents the nesting of the generated HTML. */ #cboxOverlay { background: #000; } #colorbox { outline: 0; } #cboxContent { margin-top: 20px; background: #000; } .cboxIframe { background: #fff; } #cboxError { padding: 50px; border: 1px solid #ccc; } #cboxLoadedContent { border: 5px solid #123D60; background: #fff; box-shadow: 3px 3px 3px #fff; } #cboxTitle { position: absolute; top: -20px; left: 0; color: #ccc; } #cboxCurrent { position: absolute; top: -20px; right: 0px; color: #ccc; } #cboxLoadingGraphic { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpQrEE_OmtxYqVZO8ttyqaQNOaTc_X-fj0pYyirvIzwdcbaQOAvmQK9SSwE2GNASQUna2aWt5ju4mdJuRKvhPa8RGZpHC_AqZXuCrpE2-SYC1U1L_TOYEyNMlIDBK7IvkjGXq-NHOv7d7-/s32/loading.gif) no-repeat center center; } /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */ #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose { border: 0; padding: 0; margin: 0; overflow: visible; width: auto; background: none; } /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */ #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active { outline: none; } #cboxSlideshow { position: absolute; top: -20px; right: 90px; color: #fff; } #cboxPrevious { position: absolute; top: 50%; left: 5px; margin-top: -32px; background: url(https://sites.google.com/site/techprevue/home/controls.png) no-repeat top left; width: 28px; height: 65px; text-indent: -9999px; } #cboxPrevious:hover { background-position: bottom left; } #cboxNext { position: absolute; top: 50%; right: 5px; margin-top: -32px; background: url(https://sites.google.com/site/techprevue/home/controls.png) no-repeat top right; width: 28px; height: 65px; text-indent: -9999px; } #cboxNext:hover { background-position: bottom right; } #cboxClose { position: absolute; top: 5px; right: 5px; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwEsAjs5tnAv1G-c0NpjyBNxtwa_nqxY6fD1Q7n-YYNjiSuVGDDzG4msg3jS-_p2Jpi3T9iwjlFWClImpILm-5IeF77NX3DN4cC3nxmjKusQVz4MQiuBBs2ZNWCxudrGxTFZwEbdh6r4K9/s130/controls.png) no-repeat top center; width: 38px; height: 19px; text-indent: -9999px; } #cboxClose:hover { background-position: bottom center; }

Now find this code </body>  and paste the below HTML code above/before </body>

<div style='display:none'> 
<div id='facebook-popup' style='background:#fff;position:scroll;z-index:99999;'> 
<div style='text-align:center;padding-top:15px'> <h3 style='font-family: &apos;Source Sans Pro&apos;, Sans Serif; Font-size: 18px; font-weight: 300px; '>Receive All Free Updates Via Facebook.</h3> 
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FBloggingqbee
&amp;width=342&amp;height=300&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=false&amp;header=false&amp;appId=' style='border:none; overflow:hidden; width:342px; height:300px;'/> 
  </div> 
  </div> 
    </div>

Now save your template and visit your website/blog to see it live on the web. Enjoy!

Customization

Just replace Bloggingqbee with your own Facebook user name from the above HTML code.

Enjoy!