How to put Facebook like Pop Up Widget on Blogger

A nice method to enhance or to have more likes on your facebook page is to use a Facebook Like pop up widget because it will make your visitors not to search for your like box on your Blog anymore just to like your Facebook Page. And this pop up like box widget is very effective because when we are still not using it, we only got 1-2 likes per day with our low traffic Blog, but when we just added a Facebook pop up like box widget to our Blogger blog. The likes just increased and we can't believe that this trick really works.

Also Read: Best Author Box Widget for blogger Blogspot.

How this pop up like box widget works to have more likes?

When a visitor visits your Blog, A like box will pop up just after your page loads so that the visitor will see it immediately, and he/she will have an option to like your page or just close the pop up like box widget.

So let's start the tutorial on how to add this widget to have more likes on your facebook page.

Procedure on How to put Facebook Pop up widget on Blogger:

• First thing to do is to Login to your Blogger Account.
• Go to Layout and > Click Add a Gadget.

• Click HTML and Javascript.

• Then paste the code below on a page that will open.

<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;
-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;
}
#fanclose {
float:right;
cursor:pointer;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy3zbtv9gjffEcPd-xYogH3SdbpOyE6nKedDi4hXRnaYUG3HWi9jaEbHZJTt4U0MIAIHqOLcJnDBiqjXX6ScB5O9830Bz9C-B5Vj6cHST8ZAUjHcf0PAu3drEa5sIDOd8dgiJLNTQMIg91/s1600/fanclose.png) repeat;
height:15px;
padding:20px;
position:relative;
padding-right:40px;
margin-top:-20px;
margin-right:-22px;
}
.remove-borda {
height:1px;
width:366px;
margin:0 auto;
background:#F3F3F3;
margin-top:16px;
position:relative;
margin-left:20px;
}
#linkit,#linkit a.visited,#linkit a,#linkit a:hover {
color:#80808B;
font-size:10px;
margin: 0 auto 5px auto;
float:center;
}
</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(1000).fadeIn('medium');
$('#fanclose, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}
});
</script>
<div id='fanback'>
<div id='fan-exit'>
</div>
<div id='fanbox'>
<div id='fanclose'>
</div>
<div class='remove-borda'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=http://www.facebook.com/tronicflow&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>

Customizations:

• tronicflow - Just change it with your own facebook page URL and you're done. Enjoy!

Final Words:

This is a really good plugin for Blogger Blogs to increase your facebook page likes so don't miss to add this in your own Blog. This widget is not coded by us and it's from another site that we don't know the real source so we didn't added credits because we might give a credit to a blog that didn't really made this awesome plugin for Blogger Blog. If you have any questions or problems about the plugin, please leave a comment below and I'll try to answer your comments quickly. Thanks for reading!