Lightest Facebook Fan Page Like Box Popup Widget

You have might seen and tried many facebook fan page like boxes in your blog. As a blogger who who cares about readers, i usually keep such popups away. But at the same time it is important to build up your social media strenght.

So most of us can't avoid it. So our options is to keep it simple and light as possible. So that it would not affect the loading of your blog. And We should also try to time the popup right so that the user won't get annoyed.

And that where this new light popup will do magic for you. This widget is carefully coded so that we can display the popup either on load of the page or with a delay. It is also possible to limit the no of appearance for individual users.

Adding this fb popup to your blog

✔ Go to Blogger Dashboard > Layout 

✔ Click on Add a gadget and choose HTML/Javascript widget from the list.

✔ Copy the following code into the widget and save it. Done!

<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%;
}
#fanbox {
background:white;
width:420px;
height:270px;
position:absolute;
top:58%;
left:63%;
margin:-220px 0 0 -375px;
margin: -220px 0 0 -375px;
}
#fanclose {
float:right;
cursor:pointer;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjKE9GyD4PjEyoFLkRo9OI8gsONuZ95PH9h9KnlE-Wc_P_Xls2d2C6DDgWQGr1rCOTY07L0JywwOaIT-CJg4pq68FeQ687T5NZVrySwLGxl1CTzns08G-T5K6FH1PJUPBKuT1pjEj0x1k/s1600/circle-close.png) no-repeat;
height:15px;
padding:25px;
position:relative;
padding-right:10px;
margin-top:-15px;
margin-right:-22px;
}
.remove-borda {
height:1px;
width:366px;
margin:0 auto;
background:#F3F3F3;
margin-top:16px;
position:relative;
margin-left:20px;
}
</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');
$('#fanclose, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 0 });
});
</script>
<div id='fanback'>
<div id='fan-exit'>
</div>
<div id='fanbox'>
<div id='fanclose'>
</div>
<div class='remove-borda'>
</div>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FBloggslab&width&height=258&colorscheme=light&show_faces=true&header=false&stream=false&show_border=false&appId=408184442589211" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width: 415px; height: 215px;" allowtransparency="true"></iframe>
</div>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>

Customisations for the widget

★ Replace Bloggslab with your facebook fan page id [username]

★ Replace 408184442589211 with you facebook app id

Changing the delay time

By default the widget is coded to automatically popup after 10 seconds. You can change the delay time by editing delay(10000)  in the above coding for the widget. You can use,

>  1 second = 1000  

> 10 seconds = 10000 

> 60 seconds = 60000

That's it!!!! share your thoughts on the widget.