How To Add A Facebook Popup Like Box To Blogger

Here discussed the most easiest way to display Facebook popup like box to blogger blogspot site for the beginner blogger.

Adding Facebook Popup Like Box To Blogger

1. Go to Blogger Dashboard and Click Layout
2. Click Add a Gadget
3. Choose HTML/Javascript :

4. Now copy this Code below and paste it there:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>   
<style scoped='' type='text/css'> 
#fb-fanbox{display:none;background:rgba(0,0,0,0.9);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999;-webkit-transform:translateZ(0);}
#fb-boxclose {width:100%;height:100%;-webkit-transform:translateZ(0);}
#fb-boxview {background:#fff;border:8px solid #03a9f4;width:335px;height:212px;position:absolute;top:33%;left:37%;border-radius:3px;}
#fb-closebox {float:right;cursor:pointer;position:absolute;right:-1px;top:-2px;z-index:2;}
#fb-closebox:before {content:"CLOSE";float:right;padding:5px 8px;background:#03a9f4;color:#fff;font-weight:bold;font-size:10px;font-family:inherit;}
#fb-boxlink,#fb-boxlink a.visited,#fb-boxlink a,#fb-boxlink a:hover {color:#aaaaaa;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() : '', // 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'){   
$('#fb-fanbox').delay(5000).fadeIn('medium');   
$('#fb-closebox, #fb-boxclose').click(function(){   
$('#fb-fanbox').stop().fadeOut('medium');   
});   
}   
});   
</script>   
<div id='fb-fanbox'>   
<div id='fb-boxclose'>
<div id='fb-boxview'> 
<div id='fb-closebox'> </div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php? href=https://www.facebook.com/Qposterdotcom&width=335&height=246&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false' style='border:none;overflow:hidden;width:335px;height:212px;background:#fff;'></iframe>  
</div></div></div>

5. Click Save
6. Note: You must replace this line www.facebook.com/Qposterdotcom with your own Facebook link before Save

Demo