Facebook page promoter light box for Blogger: Today in this tutorial, I am going to teach you how to add Facebook popup like box on blogspot/Blogger blog. As there many WordPress plugins available 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
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.
Step 1. Add Facebook Lightbox Widget
- Go to Blogger>> Your Blog >> Layout >> “Add a Gadget’.
- 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;
background:url(https://3.bp.blogspot.com/-NRmqfyLwBHY/T4nwHOrPSzI/AAAAAAAAAdQ/8b9O7O1q3c8/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;
}
</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/techclause&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 are 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 ‘techclause’ 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.
Related articles :-
- How to create your own facebook id card.
- How to find my facebook Page id.
- How to see someone’s hidden friends on facebook.
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.
