It is no new thing to know when I say that Facebook has taken over the social media niche. There seems to be no successful business or website that does not have a Facebook Fan page where they interact with their users and fans. Besides the sole purpose of interaction with their fans, Facebook Fan Pages can help create awareness about the business and its website. Creating awareness for the business and or website can be achieved in so many ways but today, we shall be focusing on how we can increase likes on the business Facebook Fan Page using its website (i.e. the business website).
Gaining fans from a business website has been one of the most popular ways business owners use to increase the number of fans they have on their Facebook page. From a blogger’s perspective, the more Facebook fan your blog page have, the more popular it is. That is to say that somehow, the popularity of a blog is solely tired to the number of fans it has on Facebook. How true is that? Well that is not our main purpose for this post. In this tutorial, I want to show you guys how to add a Facebook pop up Like/Fan box to your website, Blogger and WordPress page. For the pop up to work, you should already have a Facebook fan page or simply create one by clicking the tutorial on Easy Steps to Create a Facebook Page for Your Business or Website.
How the Facebook Pop Up Like Box Works
Facebook pop up like button is a Facebook plugin which works like the Feedburner email subscription box in that it allows visitors to a website or blog subscribe to the website’s or blog’s updates without having to leave the website or blog. The visitor simply clicks on the like button and is immediately added to the Facebook Fan list of the webpage and automatically starts receiving the website or blog’s updates on his/her Facebook page. Once the visitor click on the like button, a cookie is sent to the visitor’s browser making the pop up like box not appear again on that browser unless you specify in the script am going to provide here that the pop up should appear again after some specific time or date.
How to Add the Facebook Pop Up Like Box to your Blog/Website
To add this awesome plugin to your website or blog, simply go through the steps below
Adding the Like Box to Website,
Open your website's HTML file in a HTML editor.
Copy the code I have provided below and paste it anywhere in between <body> and </body>.
Save the HTML file and you are done.
Adding the Pop Up Like Box to WordPress,
Go to Dashboard >>> Appearance >>> Widgets.
Add a Text widget to sidebar.
Now open the text widget.
Copy the code below and paste into it. Leave the title as it is (i.e. blank).
Then Save.
Adding the Like Box to Blogspot,
Go to your Blogger Dashboard.
Navigate to Layout >>> Add a Gadget.
Scroll down the list and select HTML/JavaScript.
Copy the code I have provided below and paste into the HTML/JavaScript box (leave the title blank).
Finally click on Save.
The 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(http://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;
}
#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(20000).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/Easytins&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">Powered by <a href="http://www.easytins.com">EasyTins</a>
</span></center></div>
</div>
After copying and pasting the code, replace http://www.facebook.com/Easytins with your Facebook fan page URL before saving it.
Customizing the Pop Up Like Box
The customization should be done only where necessary to adjust how you want the Pop Up Like box to appear and work.
Changing the number of times the Box appears: the like box is set by default to appear only once to the visitor if he/she clicks the like button. If you want the like box to show up every time any of your page loads, then locate and remove this line of code in the code as I have provided above.
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
Adjusting the time it takes for the pop up box to appear: by adding the code above to your website, it will take the pop up like box 20 seconds to appear once the page finish loading. To adjust the time and specify your own time, simply locate .delay(20000) in the code I provided above and change or replace the 20000 with your desired time where 1 second = 1000, 10 seconds = 10000, 20 seconds = 20000.
Making the pop up like box appear only in the home page: if you want the like box to appear only when the user visit the homepage of your blog in blogger, you will have to first
Go to your Blogger Dashboard.
Click on Template >>> Edit HTML.
Press CTRL F and search for </body>.
Copy the code below and paste just before/above the </body> tag.
<b:if cond='data:page.type == "index"'>
<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(http://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;
}
#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(20000).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/Easytins&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">Powered by <a href="https://www.easytins.com">EasyTins</a>
</span></center></div>
</div>
</b:if>
Now click on Save Template and you are done.
Do not forget to replace the http://www.facebook.com/Easytins with your Facebook Fan Page URL.
If you encounter any problem, do not hesitate to let me know using the comment box below.