New Facebook PopUp Like Box Widget with Cover

We knows that Facebook has updated their Graph API to version 2.3 and now we will get a new shape and looks in all plugins of facebook. Recently I have shared Facebook latest Like Box widget and Facebook comment box widget where I have used lated Graph API 2.3, but there are another important widget left which will help us to increase our Facebook fan. Yes, this is Facebook Popup widget.

Live Demo

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style>
#popup-background {
    display: none;
    background: rgba(0,0,0,0.8);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
}
#popup-shut {
    width: 100%;
    height: 100%;
}
#popup-container {
    background: #415E9A;
    border: 5px solid #415E9A;
    width: 300px;
    height: 240px;
    position: absolute;
    top: 32%;
    left: 37%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
#fb-butam {
    float: right;
    cursor: pointer;
    position: absolute;
    right: 0px;
    top: 0px;
}
#fb-butam:before {
    content: "CLOSE";
    padding: 5px 8px;
    background: #415E9A;
    color: #eaeaea;
    font-weight: bold;
    font-size: 10px;
    font-family: Georgia;
}
#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover {
    color: #FEFEFE;
    font-size: 9px;
    text-decoration: none;
    text-align: center;
    padding: 5px;
}
</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() : '', 
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_facebook_box') != 'yes'){
$('#popup-background').delay(1000).fadeIn('medium');
$('#fb-butam, #popup-shut').click(function(){
$('#popup-background').stop().fadeOut('medium');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='popup-background'>
<div id='popup-shut'>
</div>
<div id='popup-container'>
<div id='fb-butam'>
</div>
<iframe src="http://www.facebook.com/v2.3/plugins/page.php?app_id=&amp;channel=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter%2FNM7BtzAR8RM.js%3Fversion%3D41%23cb%3Df37a7397d8%26domain%3Dbloggerspice.com%26origin%3Dhttp%253A%252F%252Fbloggerspice.com%252Ff1f37dc2f8%26relation%3Dparent.parent&amp;container_width=300&amp;hide_cover=false&amp;href=https%3A%2F%2Fwww.facebook.com%2FBloggerSpice&amp;locale=en_US&amp;sdk=joey&amp;show_facepile=true&amp;show_posts=false&amp;width=300" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" style="border: none; visibility: visible; width: 300px; height: 224px;" class=""></iframe>
<div id="fbox-link">Powered by <a style="padding-left: 0px;" href="http://www.bloggerspice.com" rel="dofollow">Blogger Spice</a></div>
</div>
</div>