Facebook Popup: How to Add Facebook Popup on Blog of Blogger.

Here's a fantastic because of increase facebook likes for your Blog of Blogger or web site. Add this participating widget to your web site and a facebook  Popup like box will appear with the lightbox impact once a user visits your page. The facebook device will show wise your page concerning thirty seconds once the page loads. usually|this can be} often a surefire because of dramatically increase your likes.

Demo!

Here Some more Similer Widget for Blogger -

- Open in New Tab

- Multi Color Links

Add widget to Your web site

Add the subsequent code anyplace within the body section of your templet. or just click the "add to blogger" button for blogspot blogs.

<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-skoXrUOXGVCWMWqox7f7gY-y16B117PX4xbuZKGsqIFYalVxLMdoHmaY8r4FVNaurxOirjCxaNvAsM9vyierdU-x2Uqn0DFlprXqg332JXzGaKluNh8XR6uij1JHQKnGmE8KjtRWmRx6/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 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(30000).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=https://www.facebook.com/BloggerBlogBlogging&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"><a href="http://www.blogofblogger.com/2013/10/facebook-popup-like-box-widget.html">Facebook Popup Widget</a></span></center>
</div>
</div>

How to Customize

• Search for href=https://www.facebook.com/BloggerBlogBlogging and replace it with your site's facebook page URL.
• Change the 30 Second Time Delay by searching for the code below and changing the number 30000 to a greater or lesser number. 

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

.delay(30000)

• 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 evertime the page loads, then remove this line of code:

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

• Display facebook widget when user visits your homepage: You can do this by surrounding the widget code with these conditional tags below. Go to Template > 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 hassle seeing the facebook widget?

By default, this facebook like box widget is merely displayed once each thirty days. you will got to delete your cookies if you'd prefer to see it once more. Or verify the "How to Customize" section higher than, so as to show the widget when a user visits your web site.

You Also Like:

How to Add Social Media and Newsletter Buttons for Blog of Blogger

Sliding Social icons with Hover effect for Blog of Blogger

Facebook Popup Widget