Top Ad unit 728 × 90

How to Add Facebook Like Box Pop-Up in Blogger Blog

Today in this small article, i will tell you that how to add Facebook like box pop-up in blogger blog. Facebook is the number one social media sharing site that is mostly used by everyone now a days, It has a very huge number of users and visitors especially new generation like students including Teenage and adults. Facebook is a major source and can be valuable for your blog or website for getting more visitors and readers to your blog. So today we will add Facebook Like Box Pop-Up in our Blogger Blog, so that we could increase our visitors and users.
With this Pop-up Box you can increase the number of likes of your blog, also you can tel your visitors to share your posts to other friends.
[post_ad]
Facebook Like Box Pop-Up

How to Add Facebook Like Box Pop-Up in Blogger

  • Go to Dashboard >> Layout >> Add a Gadget >> HTML/JavaScript
  • And copy the below set of code and paste it.
<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%;
}
#Burptech {
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;
}
#Burp {
float:right;
cursor:pointer;
background:url(http://1.bp.blogspot.com/-AzNDzeaTaT4/VFhm6Z_kYwI/AAAAAAAAAWc/NF6UvOFtS3Y/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(1000).fadeIn('medium');
$('#Burp, #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='Burptech'>
<div id='Burp'>
</div>
<div class='remove-borda'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/pages/Bloggercellcom/935684026448561&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.BloggerCell.com">Blogger Tips</a> - <a href="http://www.bloggercell.com/2014/11/add-facebook-like-box-pop-up-in-blogger.html">FB Like Box Popup Widget</a></span></center>
</div>
</div>
Make some changes in your widget according to your requirements

Add your Facebook Fan Page URL Address (Necessary)
Change "https://www.facebook.com/pages/Bloggercellcom/935684026448561" with your Facebook page address

Change the Time Delay Settings (Optional)
By default this Social Gadget appears 1 seconds after your blog's page finishes loading. If you want to change it, then simply search for ".delay(1000)" and replace 1000 with greater value as your choice.
Note: Here (1000 = 1 Second) and (10000 = 10 Seconds), Like 1000 mean 1 Second

Popup every time the page loads (Optional)
By default, the social like box gadget only shows up the first time when the user visits your page. If you want the Facebook box to popup every time the page loads, then simply search for the below code and replace "yes" with "no".
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });

Appears only when user visits your homepage
If you want this widget show up only when user visit your blog's homepage then, Go to Template > > Edit HTML, and search for this </body>. Now paste the above Set of code right above </body>.

Final Words

This is the best Gadget that i will share with you, with this you can increase the number of likes for your blog. Hope you got this article easily, if you face any problem then tell me i solve it. If you like this article then simply share it with your all friends and stay updated for more beneficial posts.
How to Add Facebook Like Box Pop-Up in Blogger Blog Reviewed by Tariq Rafique on 11:50 pm Rating: 5

1 comment:

  1. it worked.. Thanks.. Except I had to add & before width, height etc

    ReplyDelete

All Rights Reserved. www.BloggerCell.com © 2014-2015
Follow my blog with Bloglovin - Do not reproduce any article without author's permission.

Contact Form

Name

Email *

Message *

Powered by Blogger.