How to add Facebook Pop Up Like box to Blogger

Facebook page promoter light box for Blogger. In this article below, I will explain you how to add Facebook popup like box on your Blogger blog.  As there many WordPress pluginsavailable in WordPress plugin directory to add page promoter Facebook like box in your WordPress site. But what, If you use Blogger as your blogging platform. Don’t worry, you can still add Facebook Lightbox popup like box widget in your Blogger blog.  Follow the tutorial mentioned below which helps you to add Facebook Popup like box to your blog.

Facebook Lightbox for Blogger

Also See: How to Add Facebook Like Box to Blogger

In order to increase Facebook fan page like, you must need to promote your Facebook page to get more likes and users to your website. And no doubt, Facebook page promoter light box widget is best way to increase your Facebook fans. This Facebook popup like box will sure turn your one time user into Facebook fans. This widget display a Facebook Fan box pop-up when a user visit your blog web page.  See the picture below.


How to add Facebook Pop-up Like Box to Blogger

In order to add Facebook light box widget to your blog, you need to follow some steps given below. It’s not much hard to add Facebook light box widget to Blogger, I have made it quite easy for you Blogger users. You just need to add HTML and Javascript to Blogger.

Useful: How to Make Facebook Like Box Responsive

Step 1. Add Facebook Lightbox Widget

  • Go to Blogger>> Your Blog >> Layout >> “Add a Gadget’.  If you are new, follow the link below to add HTML and Javascript widget into your Blogger blog.
  • How to add Widget to Blogger
  • Now add the following codes given below as a widget to your Blog. 
<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;
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;
}
</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/...&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>


  • If you have added the above code, Save your widget.
  • You have done. Now if you want to customize it proceed to further steps given below.

Step 2. Customize Facebook Lightbox Widget


Once you have copied that above code and pasted into your add HTML/Javascript gadget box, you need to customize Facebook popup like box. Here is how you can do it.

  • Now simply change my Facebook fan page username ‘...’ with your own blog’s Facebook page name.  
  • If you want to change the frequency according which the widget would appear to the visitor.  For this simply change the number '7' to the number of days you want it to appear again to a user.
  • Cheers! You have successfully added Facebook popup page promoter lightbox widget to Blogger.
That’s it! Hope you like this widget. This is how you can add light box style Facebook Like Box to your Blogger (Blogspot) blog. Try it once on your blog, I am sure this will help you to increase your Blog’s Facebook page fans. Tell me what you think about Facebook page promoter light box for a Blog. Are visitors really don’t want popup like box? Feel free to share your thought via comment box below.

Comments