Searching...
13 February 2014

How to Add Facebook Pop Up Like/Fan box to Blogger, WordPress and Website

Facebook Pop Up Like Box
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,

  • 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><script language="javascript">
document.write( unescape( '%3C%63%65%6E%74%65%72%3E%0A%3C%73%70%61%6E%20%69%64%3D%22%6C%69%6E%6B%69%74%22%3E%50%6F%77%65%72%65%64%20%62%79%20%3C%61%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%77%77%77%2E%65%61%73%79%74%69%6E%73%2E%63%6F%6D%2F%32%30%31%34%2F%30%32%2F%68%6F%77%2D%74%6F%2D%61%64%64%2D%66%61%63%65%62%6F%6F%6B%2D%70%6F%70%2D%75%70%2D%6C%69%6B%65%66%61%6E%2D%62%6F%78%2E%68%74%6D%6C%22%3E%45%61%73%79%54%69%6E%73%3C%2F%61%3E%0A%3C%2F%73%70%61%6E%3E%3C%2F%63%65%6E%74%65%72%3E' ))
</script></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><script language='Javascript'>
<!--
document.write(unescape('%3C%63%65%6E%74%65%72%3E%0A%3C%73%70%61%6E%20%69%64%3D%22%6C%69%6E%6B%69%74%22%3E%50%6F%77%65%72%65%64%20%62%79%20%3C%61%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%77%77%77%2E%65%61%73%79%74%69%6E%73%2E%63%6F%6D%2F%32%30%31%34%2F%30%32%2F%68%6F%77%2D%74%6F%2D%61%64%64%2D%66%61%63%65%62%6F%6F%6B%2D%70%6F%70%2D%75%70%2D%6C%69%6B%65%66%61%6E%2D%62%6F%78%2E%68%74%6D%6C%22%3E%45%61%73%79%54%69%6E%73%3C%2F%61%3E%0A%3C%2F%73%70%61%6E%3E%3C%2F%63%65%6E%74%65%72%3E'));
//-->
</script></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.

19 comments:

  1. Added to my blog and its working. Actually, yours is the only method that works. Thank You!! and keep up.

    ReplyDelete
  2. thanks admin, this tutorial work :D

    ReplyDelete
  3. Yes it's working! Thanks for this tutorial (h)

    ReplyDelete
  4. is this possible for this pop up to appear only to those who didn't liked it already, I mean it should check the cookie and see if the visitor has signed in to his fb account and if he already had liked the page then this pop up doesn't show.

    ReplyDelete
  5. how to add facebook like box like your site?

    ReplyDelete
    Replies
    1. Tiffany just follow the tutorial above.

      Delete
  6. Finally, a code that works. Much appreciated

    ReplyDelete
  7. I saw a Facebook popup fan box in some Wordpress page wherein the X (for close) only appears after a certain time. Is that possible here? Thanks.

    ReplyDelete
  8. its work :) great thanks to you O:)

    ReplyDelete
  9. Thank you!!! Good job!

    ReplyDelete
  10. Error parsing XML, line 5820, column 49: The reference to entity "width" must end with the ';' delimiter.

    This the line error i got when i add the source code.. please help out. cause i dont understand what next to do.

    ReplyDelete
  11. Error parsing XML, line 5820, column 49: The reference to entity "width" must end with the ';' delimiter.

    This the line of code i got when i added the above source code for facebook plugins. please, did i miss something?

    ReplyDelete
    Replies
    1. Mr Sunday simply locate that line as specified in the error message and add the ; as required immediately after "px" just in front of the "width". That should solve the problem

      Delete
  12. thanks ...it works perfectly.....in all i tried its yours that works instantly

    ReplyDelete
  13. how do i make it appear on monile view?

    ReplyDelete

IMPORTANT INFORMATION

Please do bear in mind that any Comment left on this Blog that is in no way related to the post under which it is being left, will not be accepted and so won’t be published. For any such unrelated question and enquiries, please use the Contact Us section to get in touch with us and we promise to get back to you 30 minutes after we get your message.

 
Back to top!