How to Add Facebook Popup (Like Box Widget) For Blogger

How to Add Facebook Like Box Pop-Up on your Blogger

Facebook is one of the best ways to get traffic to your website or blog.

Facebook Popup (Like Box Widget)

So In this tutorial i will show you how to add a cool floating Facebook like widget for Blogger that slides to the left on mouseover. becouse

How To Add Facebook Like Box Pop-Up widget :

Go To Blogger >> Layout >> Add a Gadget

Choose HTML/JavaScript

Paste The Following Code in Content Box

Add Widget to Your Site

Add the following code anywhere in the body section of your template. Or simply click the "add to blogger" button for blogspot blogs. For Wordpress themes, Weebly templates, and Tumblr, you will need to manually copy and paste the script into your template.

<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%;
}
#JasperRoberts {
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;
}
#TheBlogWidgets {
float:right;
cursor:pointer;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn5vUHBq33JUxD13os9w_LKEW5n_reCe-fL85Jq6dYXM3iaW5KaBNlKY1BIPxXFD5H_wBhuTIrhfuI2tlsayZZUDiVztZ8DRJZ_fcNLb-OEVHwwHSyZn65oT_0d8FuIHTPvq6K9IVIGHHS/s1600/TheBlogWidgets.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');
$('#TheBlogWidgets, #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='JasperRoberts'>
<div id='TheBlogWidgets'>
</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/theblogwidgets&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 style="color:#a8a8a8;font-size:8px;" id="linkit">Powered by <a rel="nofollow" style="color:#a8a8a8;font-size:8px;" href="http://jasperroberts.com">Jasper Roberts Consulting</a> - <a style="color:#a8a8a8;font-size:8px;" href="http://www.theblogwidgets.com">Widget</a></span></center>
</div>
</div>

How to Customize

Where to find the code?

If you've installed the widget by clicking "Add to Blogger" you'll need to locate the code in order to make customizations. In order to find the html go to the blogger dashboard>Layout. Click "edit" on the "HTML/Javascript" gadget.

Enter your facebook username

Search for http://www.facebook.com/googlebinger and replace it with your site's facebook page URL.

Change the 20 Second Time Delay

By default the widget pops up 20 seconds after the page finishes loading. Search for the code below and change the number 20000 to a greater or lesser number.

1 second = 1000. 10 seconds = 10000. 60 seconds = 60000.

.delay(20000)

Popup every time the page loads

By default, the like box widget only shows up the first time the user visits your page. If you would like the facebook box to popup every time the page loads, then remove this line of code:

$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });

Display only when user visits your homepage

You can do this by surrounding the widget code with these conditional tags below. Go toTemplate > Edit HTML. Now search for the </body> tag. Place the facebook popup widget right above this body tag. Make sure to include the conditional tags below.

<b:if cond='data:page.type == "index"'>
REPLACE-WITH-FACEBOOK WIDGET-CODE-HERE

</b:if>

Having trouble seeing the facebook widget?

By default, this facebook like box widget is only displayed once every 30 days. You may need to delete your cookies if you would like to see it again. Or check out the "How to Customize" section above, in order to display the widget every time a user visits your site.

If you're still having trouble with the popup widget, please leave a comment below. I am happy to help you!.