How To Add Facebook PopUp Like Box In Blogger

In my previous post we discussed about highlighting codes in Blogger with Syntax Highlighter. Today, we are going to know about Facebook popup like box for Blogger. We will discuss the various easy process to insert Facebook popup like box in Blogger and why you should use or avoid using popup like box in Blogger. Facebook is one of the largest using social networking site in the world and it can fuel large number of audience to your Blog. But you have to use it in proper way. Let's start the tutorial.
Many of bloggers are not able to increase their audience in the social sites due to less social features in their Blog. Facebook is the largest social network. Many bloggers wants to create a page in facebook to give support to their users through their Facebook page. But sadly, they are not able to bring peoples attention to their page. If you are also not able to increase your audience in Facebook and want to increase Facebook Page like than you are lucky. Facebook Popup like box will surely bring your users attention to your Facebook page.
But sometimes it may not be a good idea to make a box pop out whenever a user browse your site. If you are using lots of scripts in your Blog than it may slow down your page loading time. And you may lose some users. So, if you have very much JavaScripts in your page than it is always advised to not to mess your Blog with more Scripts. If you don't use so much scripts than feel free to use the Facebook Popup like box for your Blogger blog.

Facebook Popup Like Box For Blogger

If you think it will help in increasing your Facebook likes than follow the below given very easy steps. If you will follow each step carefully than you will see a Facebook Like Box will popup whenever users visits your blog/site. Now see the instructions below.

• First of all make a backup of your Blog Template. It will help you in future if by chance you destroy your template.
• Now, go to Blogger Home and Sign in with your Blogger/Google Account.
• After signing in Go to Blogger Dashboard.
• In the Dashboard Click on Template.
• In the Template page click on Edit HTML which is below the live preview of your blog.
• Now in HTML page search for the code given below:

]]><

• Now add the code given below just above ]]><.

#htback {
display:none;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}
#ht-exit {
width:100%;
height:100%;
}
#htbox {
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;
}
#htclose {
float:right;
cursor:pointer;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2a7vcP8SEpCS9vZix-zm12VjpZznpboxENl3Z31oY2JTioY74a_AZgIqh5voiTxQhjnIylcEtNLkfAAjL1t7VZZLp-BsM-szin0RitNXEALtL4aqceRJOqBrt6BnkPS1q40NJF0qaU2sI/s1600/fanclose.png) repeat;
height:15px;
padding:20px;
position:relative;
padding-right:40px;
margin-top:-20px;
margin-right:-22px;
}
#htclose:hover {
opacity: 0.96;
}
#htclose:active {
position:relative; top:1px;
}
.remove-borda {
height:1px;
width:366px;
margin:0 auto;
background:#F3F3F3;
margin-top:16px;
position:relative;
margin-left:20px;
}

• After adding the above CSS code in the proper place follow next step.
• Now search for the tag given below:

</body>

•  Now add the couple of codes given below just above/before </body> tag.

<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'){
$('#htback').delay(30000).fadeIn('medium');
$('#htclose, #ht-exit').click(function(){
$('#htback').stop().fadeOut('medium');
});
}
});
</script>
<div id='htback'>
<div id='ht-exit'>
</div>
<div id='htbox'>
<div id='htclose'>
</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/YOUR-PAGE-USERNAME&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>
</div>
</div>

You are required to Replace YOUR-PAGE-USERNAME with the username of your Facebook page. Don't forget to do this. If you are not able to save your template due to some error than add replace all & sign with &amp; which is after YOUR-PAGE-USERNAME. It happens sometimes. Now you are ready for the next step.

• Now as you have written your Facebook Username in the required place. Save the Template.
• Congrats! you will now be able to see a Facebook like will popup in your Blogger blog.

Demo

Clicking demo button will reload this page. It is because I have added the Facebook PopUp Like Box in this page. It will 30 seconds after page fully loads. But you can change this value. Just see customization below.

Customization

• By default the like box pop up 30 seconds after loading of your page. But if you want it appear little before or after than search for the following line of code and change 30000 to your required number.

.delay(30000)

Tip: 1 seconds = 1000, 10 seconds = 10000, 20 seconds = 20000, Change the above number keeping this in mind.

I wish it will help you in adding Facebook like box in your Blogger blog. If you face any problem in adding the like box in your blog than feel free to ask me.

Hope You Like This Post in Adding Facebook popup Like Box in Blogger.