Facebook Popup Likebox Widget For Blogger

Every webmaster loves to promote his/her blog or website. Social media websites are the great source of generating traffic for your blog. As we all know that Facebook is the largest social networking website and therefore every webmaster is searching for new and effective ways to promote his/her blogs on Facebook.

Today developers are creating various cool social media widgets that can be helpful for you to promote your blog or website on different social networking websites. Facebook popup widget is one of the coolest widget that can increase Facebook likes for your website or blog. This Facebook popup widget is a fast loading, easy to install and good looking widget. I have tested this widget on various templates and using it on almost all my blogs and its actually helping me. So now, if you want to add this widget to your blog then just follow the simple instructions below:

Also read: Stylish scrolling Facebook like box widget for Blogger. - Recommended

How to add Facebook Popup Widget to Blogger ?

• Log in to your Blogger Account.
• Go to Dashboard >> Layout >> Add a gadget.
• Then select HTML/JavaScript from the list.
• Then copy and paste the below code in HTML/JavaScript box.

Code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<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/AVvXsEh3VPTSbfGYS0iUtsnvTAFK_SxuKRNSUHuV6X9fGcCqZ3x-d-QB1vhBu49t4EXcsnEunMzKY1DLsFkAVRhNked_XSm-0Nzj6NAaRnLA-cGL1Lrvx4ryx16AK5chJ7ZKcO48PqgQ8ofs4IrY/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 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(100).fadeIn('medium');
$('#fanclose, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
});
</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/bloggenes&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><center>
<span id="linkit"><a href="http://www.bloggenes.com/2013/10/facebook-popup-likebox-widget-blogger.html">Facebook Popup Widget</a></span></center>
</div>
</div>

• Now save the gadget and you are done.

How to add this widget on any website or other platforms ?

• To add this widget on any website, just copy and paste the above code in body section of your website i.e. in between opening  and closing body tag (<body> your code </body>).

How to customize it ?

• Replace the code in red with your Facebook fan page URL.
• By default, This widget appears only once in 30 days for a user. So if you want the widget to appear on every reload then search and remove the following code from the above code:

$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });

Note: This widget appears only once in 30 days, so if want to see it again then clear your browser's cookie.

Also read:

• Stylish slide out don't forget to join our community widget for Blogger.
• How to add flying twitter bird to Blogger?