how to add popup facebook like box in blogger

Here's an incredible thanks to increase facebook likes for your web log or web site.  Add this attractive contraption to your web site and a facebook like box can appear with the lightbox result once a user visits your page.  The facebook contraption can show abreast of your page concerning twenty seconds once the page masses (but are often customized). this is often a surefire thanks to dramatically increase your likes.

Add contraption to Your web site

Add the subsequent code anyplace within the body section of your example. or just click the "add to blogger" button for blogspot blogs.  For Wordpress themes, Weebly templates, and Tumblr, you'll ought to manually copy and paste the script into your example.

<!-- Facebook Popup Widget START --><!-- Brought to you by www.JasperRoberts.com - www.TheBlogWidgets.com -->
<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/AVvXsEihAPaKixuwFejIPoSfVuGiQW_Jy8XKZ6G4oWHeFxpY-C2_OSboi_Si7n8O846bfshjAilaaF0iCZfUjfhVnwGuG7_yjI3_5FWPhQmHWeY4c1-P7kBkEt_C_00oH81sGWwxo3x1JLb-ifEp/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=https://www.facebook.com/pages/Learnonline786blogspotcom/782722665126829&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://learnonline786.blogspot.com/">Samina khan</a> - <a style="color:#a8a8a8;font-size:8px;" href="http://learnonline786.blogspot.com/">Anjum</a></span></center>
</div>
</div>

How to customise

Where to seek out the code?
If you have put in the contraption by clicking "Add to Blogger" you will need to find the code so as to create customizations. so as to seek out the hypertext markup language move to the blogger dashboard&gt;Layout. Click "edit" on the "HTML/Javascript" contraption.

Enter your facebook username
Search for https://www.facebook.com/pages/Learnonline786blogspotcom/782722665126829 and replace it along with your site's facebook page address.

Change the twenty Second Time Delay
By default the contraption pops up twenty seconds once the page finishes loading. rummage around for the code below and alter variety|the amount|the quantity} 20000 to a bigger or lesser number.
1 second = one000. ten seconds = ten thousand. sixty seconds = 60000.

.delay(20000)                                                                                                                                        

Popup when the page masses

By default, sort box contraption solely shows up the primary time the user visits your page.  If you'd just like the facebook box to popup when the page masses, then take away this line of code:

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

Display only user visits your homepage
You can do that by close the contraption code with these conditional tags below. move to example Edit hypertext markup language. currently rummage around for the  tag. Place the facebook popup contraption right on top of this body tag. make certain to incorporate 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 contraption is just displayed once each thirty days. you will ought to delete your cookies if you'd prefer to see it once more.  Or scrutinize the "How to Customize" section on top of, so as to show the contraption when a user visits your web site.

SHARE