How to Add Facebook Like Box Pop-Up Widget on your Blog/ Website

Facebook is one of the best ways to get traffic to your website or blog. So, Official Facebook fan pages are obvious for your blogs. Most of you might be wondering how to increase the likes and thereby organic reach to your page. Here is one method through which you can easily increase your FB Page Likes. Add this wonderful Facebook Like Box Pop-Up Widget onto your blog. This will make sure that almost all the visitors to your site Like your Page too! Read the entire article to learn how to add FB like box pop-up widget and also edit it!

Add Facebook Like Box Pop-Up widget

Copy the following code and paste it anywhere in the body section of your template or simply use html/javascript in the layout for blogger. For wordpress, tumblr and others, you need to manually edit the template.

<!-- Facebook Popup Widget START --><!-- Brought to you by www.burptech.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%; } #BurpTech { 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; } #Burp { float:right; cursor:pointer; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVdlGoDOYtlvr6UIaLOgHCpuv89UbwzMCZ0uO1SkeeEgxuAxmcdOJw2B8vnFCpEcHEdp7BhJBgEhsozTz4_RjI6J6_Zz_Rh6omdITJfyCSVmLuZvOJiTSqN94AQ5ZfRH3DMo1-hmKQoaYO/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 a:hover { color:#80808B; font-size:10px; margin: 0 auto 5px auto; float:center; } </style> <script type='text/javascript'> //<![CDATA[ jQuery.cookie = function (key, value, options) { // key and at least value given, set cookie... if (arguments.length > 1 && String(value) !== "[object Object]") { options = jQuery.extend({}, options); if (value === null || value === undefined) { options.expires = -1; } if (typeof options.expires === 'number') { var days = options.expires, t = options.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 IE options.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') != 'yes'){ $('#fanback').delay(10000).fadeIn('medium'); $('#Burp, #fan-exit').click(function(){ $('#fanback').stop().fadeOut('medium'); }); } $.cookie('popup_user', 'yes', { path: '/', expires: 7 }); }); </script> <div id='fanback'> <div id='fan-exit'> </div> <div id='BurpTech'> <div id='Burp'> </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/burptech&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 id="linkit">Powered by <a href="http://burptech.com">Burp&Tech</a> - <a href="http://www.burptech.com/2014/03/add-facebook-like-popup.html">FB Like Box Pop-up Widget</a></span></center> </div> </div> <!-- Facebook Popup Widget END. www.burptech.com -->

Customization:

Enter your Facebook Page Name
Search for http://www.facebook.com/burptech and replace it with your site's facebook page URL.

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

.delay(10000)

NOTE: The pop-up appears only once in every 30days. If you want the pop-up to reappear, clear your cache and cookies. 

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', 'yes', { path: '/', expires: 7 });

I personally recommend you guys not to annoy your readers with pop-ups everytime they reload the page. Maintaining good relation should be your first objective and FB likes comes after that! So, decide at what intervals you want to use the pop-up window.
Try it and comment below if you have any doubts or problems regarding it! Have fun!