Add Facebook Popup (Like Box Widget) in Blogger Blog – Tutorial

Add Facebook Popup and increase Facebook likes for your website or blogger blog.  Add this free widget to your website and Facebook like box will be appear with the light box effect when anyone visits your site and blog. it will show up on your page about  10 seconds after the page loads (but you can be customize and change increase or decrease the time).  This is a very useful widget to increase your likes. So, let’s see the tutorial.

by IT Roshni



Add Widget Code to Your Blog

<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZMxZMZurzKHR8_OTHvlEw81SGOYaqsjDaopFOH74yHTKMXqFY2DN2Bti3W2Kh2c76q-b58oDAOFXKR__fG_CVFmtJvvj18BJfg3LVBoNPB5SfvyGxXs2YC02VsPdtEqWhcYKz-qjxz-Xg/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_login') != 'yes'){$('#fanback').delay(10000).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=https://www.facebook.com/pages/ITRoshni/1028509180503185 &
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 style="color:#a8a8a8;font-size:8px;" href="http://jasperroberts.com">Jasper Roberts</a> - <a style="color:#a8a8a8;font-size:8px;" href="http://www.theblogwidgets.com">Blog</a></span></center>
</div>
</div>
<!-- Facebook Popup Widget END. Brought to you by www.JasperRoberts.com - http://itroshni.blogspot.com -->-->

Customize and enter your Facebook username

Search for https://www.facebook.com/pages/ITRoshni/1028509180503185 and Replace it with your facebook page URL.

Change the Delay Time

Widget appear in 10 seconds after the page finishes loading. You can change the delay time. Search for the code below and change the value 10000 to a greater or lesser number.

1 second = 1000. 10 seconds = 10000. 60 seconds = 60000

delay(10000)

Enjoy the Facebook Popup Widget.