How to add Facebook Pop up Like box into blog using HTML/Javascript Gadget

You must have seen my previous blog post on this same topic, How to add a pop up like box for Facebook into your blogger blog or any website. Here is the link to the previous post. But

i think that post was a bit complicated for beginner bloggers and for those who does not have

much knowledge of javascript and web designing. There is a simpler way to achieve the same task. You can easily add a pop-up Facebook Like box in a lightbox style which will link to your blogs official Facebook page and will show up some of the faces who have already liked your page. The pop-up Like box appears in a lightbox style, i.e you see when you click on a photo in Facebook, The image opens up in zooming itself and the background content remains static. The pop-up Likebox appears the same way. The viewer can either hit 'Like' or close the window to browse further. This can be done using an HTML/Javascript gadget and without going to edit your blogs template. I will now show you step by step how to add the pop-up Like box for Facebook into your blogger blog.

Step I: Log in to your Blogger Dashboard and go to the blog where you want to add the Facebook pop-up likebox.

Step II: Click on Layout and then Add a Gadget. Select an HTML/Javascript gadget to add.

Step III: On the newly opened window for HTML/JavaScript gadget, copy and paste the following code.

  
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' 
type='text/javascript'></script>
<style>
#techBhuvanFBlike {
display:none;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}
#techBhuvanexit{
width:100%;
height:100%;
}
#techBhuvanfanbox{
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;
}
#techBhuvanfanclose {
float:right;
cursor:pointer;
background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcMTCGa87SuHCAzFC6-gvYefvhh6Kc35GqUcWxXf7POYaM5mlgoD1QWMFW90gKjaouaMOCEae6erkUCuioTMN281Xyc2Lx-T2B6WuFRZq0VWJd6pl3TMVdpKgg2pB8lOIFf-hl0OuJ4Db4/
h120/fblikeclose.png)
 repeat;
height:15px;
padding:20px;
position:relative;
padding-right:40px;
margin-top:-20px;
margin-right:-22px;
}
.removefbborder {
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() : '',
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(100).fadeIn('medium');
$('#fanclose, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='techBhuvanFBlike'>
<div id='BMSboxexit'></div><div id='BMSfanbox'>
<div id='techBhuvanfanclose'></div><div class='removefbborder'></div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' 
src='//www.facebook.com/plugins/likebox.php?href=<span style="color: #ff0000;">
http://www.facebook.com/TechBhuvan
</span>
&width=402&
height=255&colorscheme=light&show_faces=true&
border_color=%23E2E2E2&stream=false&header=false' 
style='border: none; overflow: hidden; margin-top: -19px; width: 402px; 
height: 230px;'></iframe>
</div></div>

Step IV: Save your gadget. Then Save your template. You are done. Now test your blog opening it in browser whether it is working properly or not.

If you have liked this post, please share among your friends. If you have any query, please comment below. Thanks.