Add Facebook Popup Like Box to your blog

Add this enticing widget to your site and a facebook like box will pop up with the lightbox effect when a user visits your page.  The facebook widget will show up on your page about 20 seconds after the page loads (but can be customized).  This is a surefire way to dramatically increase your likes. You can also check out floating facebook like box.

How to

• Add the following code anywhere in the body section of your template. 

<!-- Facebook Popup Widget START --><!-- Brought to you by  http://blogsmasala.blogspot.com/-->script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script><style>#fanback {display:none;background:rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999;}#fan-exit {width:100%;height:100%;}#JasperRoberts {background:white;width:420px;height:270px;position:absolute;top:58%;left:63%;margin:-220px 0 0 -375px;-webkit-box-shadow: inset 0 0 50px 0 #939393;-moz-box-shadow: inset 0 0 50px 0 #939393;box-shadow: inset 0 0 50px 0 #939393;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;margin: -220px 0 0 -375px;}#TheBlogWidgets {float:right;cursor:pointer;background:url(http://3.bp.blogspot.com/-RmqfyLwBHY/T4nwHOrPSzI/AAAAAAAAAdQ/8b9O7O1q3c8/s1600/TheBlogWidgets.png) repeat;height:15px;padding:20px;position:relative;padding-right:40px;margin-top:-20px;margin-right:-22px;}.remove-borda {height:1px;width:366px;margin:0 auto;background:#F3F3F3;margin-top:16px;position:relative;margin-left:20px;}#linkit,#linkit a.visited,#linkit a,#linkit :hover {color:#80808B;font-size:10px;margin: 0 auto 5px auto;float:center;}</style><script type='text/javascript'>//<![CDATA[jQuery.cookie = function (key, value, ptions) {// key and at least value given, set cookie... if (arguments.length > 1 && String(value) !== "[object Object]") {options = Query.extend({}, options);if (value === null || value === undefined) {options.expires = -1;}if (typeof options.expires === 'number') {var days = options.expires, t = ptions.expires = new Date();t.setDate(t.getDate() + days);}value = String(value);return (document.cookie = [encodeURIComponent(key), '=',options.raw ? value : encodeURIComponent(value),options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IEoptions.path ? '; path=' + options.path : '',options.domain ? '; domain=' + options.domain : '',options.secure ? '; secure' : ''].join(''));}// key and possibly options given, get cookie...options = value || {};var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;};//]]></script><script type='text/javascript'>jQuery(document).ready(function($){if($.cookie('popup_user_login') != 'yes'){$('#fanback').delay(20000).fadeIn('medium');$('#TheBlogWidgets, #fan-exit').click(function(){$('#fanback').stop().fadeOut('medium');});}$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });});</script><div id='fanback'><div id='fan-exit'></div><div id='JasperRoberts'><div id='TheBlogWidgets'></div><div class='remove-borda'></div><iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/blogsmasala&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe><center><span style="color:#a8a8a8;font-size:8px;" id="linkit">Powered by <a rel="nofollow" style="color:#a8a8a8;font-size:8px;" href="http://blogsmasala.blogspot.com/">BlogsMasala</a> - <a style="color:#a8a8a8;font-size:8px;" href="http://blogsmasala.blogspot.com/"></a></span></center></div></div>

•  You are done

How to Customize
Where to find the code?

• Go to Design>Edit HTML

• Search for blogsmasala and and replace it with your site's facebook page URL.

Change the 20 Second Time Delay
By default the widget pops up 20 seconds after the page finishes loading.  Search for the code below and change the number 20000 to a greater or lesser number. 
1 second = 1000.  10 seconds = 10000. 60 seconds = 60000.  

.delay(20000)

Popup every time the page loads 
By default, the like box widget only shows up the first time the user visits your page.  If you would like the facebook box to popup every time the page loads, then remove this line of code:

$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });

Display only when user visits your homepage
You can do this by surrounding the widget code with these conditional tags below. Go toTemplate > Edit HTML. Now search for the </body> tag. Place the facebook popup widget right above this body tag.  Make sure to include the conditional tags below. 

<b:if cond='data:page.type == "index"'>REPLACE-WITH-FACEBOOK WIDGET-CODE-HERE</b:if>

If you're still having trouble with the popup widget, please leave a comment below.  I am happy to help you!