How to Create a Facebook Like Box Popup

Hello today I will show you how to add a Facebook Popup Page,It's useful for getting more fans in Your Facebook Page.Let's start with the preview of our widget:

Preview

So if you like it let's me show you how to add it in your blog or websites:

Step 1 :Go to Blogger.com >> Template >> Edit Template
Add this code before the </head> Tag

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>

Step 2 : Go to Blogger.com >> Layout >> Add HTML/JavaScript >> Copy Paste The Code bellow

<style>
#popupFbLikeBox {display:none;position:fixed;background:rgba(0,0,0,0.7);height:100%;width:100%;left:0;top:0;z-index:99999;}
#popupArea {position:absolute;background:white;height:270px;width:auto;left:63%;top:58%;border-radius: 5px;margin:-220px 0 0 -375px;-moz-border-radius: 5px;-webkit-border-radius: 5px;}
#popupClose{text-align:center;padding:10px;cursor:pointer;background: linear-gradient(#eee, #fff);border-top-left-radius: 5px;border-top-right-radius: 5px;color:#000;
width: auto;
float: right;
position: absolute;
right: 5px;
}
#popupClose:hover{color:red;}
.fbLikeboxArea {margin:0 auto;width:366px;height:1px;margin-top:16px;margin-left:20px;position:relative;}
@media only screen and (max-width: 500px) {
#popupArea{left:63%;top:58%;margin:-220px 0 0 -250px;}
.fb-like-box,.fb-like-box span,.fb-like-box span iframe[style]{width: 100% !important;}}
</style>
<script>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// 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(''));}
//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>
jQuery(document).ready(function($){
if($.cookie('logedin_user') != 'yes'){
$('#popupFbLikeBox').delay(2000).fadeIn('medium');
$('#popupClose').click(function(){
$('#popupFbLikeBox').stop().fadeOut('medium');
});
}
$.cookie('logedin_user', 'yes', { path: '/', expires: 3 });
});
</script>
<div id='popupFbLikeBox'>
<div id='popupArea'>
<div id='popupClose'>X
</div>
<div class='fbLikeboxArea'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/wecodingforyou&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>
</div>
</div>

Step 3 : Change the green with your seconds before the box show (ex: 1 Second = 1000) and the blue with number of days before the cookie expire and the red with your Facebook Page

That's All, if you have a question ask in comment box.