Search Bar

Facebook Popup (Like Box Widget)

Ahmad 12:14

Add Widget to your blog/site

Login your blogger account and select your blog and click the Layout option as you can see in this photo


A new window will present you this look. Now this click ADD A GEDGET 


A new Popup window appear on your screen. Scroll down and select HTML/JavaScript option.


Now Paste the Script in this window as you ca see in blow photo 



<!-- Facebook Popup Widget START -->
<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/AVvXsEjIxaPYKjOd7ExZjZLW2ORileUhqaqfBF_BvLKtXcCASHQXqrw_qMcjo7ATjQ2Fa6yQUmH_Blfef1HGPlzqNv4VgeGpwUazZBNJuMcu46DPzEt2OYE4sro8suO-4jjTjr0pJ5ri48zoWoxf/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');
});
}

});
</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/jahanzinfo&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.jahanz.com">Widget</a></span></center>
</div>
</div>
<!-- Facebook Popup Widget END. Brought to you by www.jahanz.com -->

Now save it

Enter Your Facebook username

Search this link https://www.facebook.com/jahanzinfo and change it with your facebook fanpage link

Change the 20 Second time Daily

By default this widget facebook popup 20 seconds after the page finishes loading. If you want to increase or decrease the time then first search this code and change according to your desire.

1 sec=1000,  10sec=10000, 50sec=50000

Search this code
.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 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>

If you are still having trouble with the facebook popup like widget, please leave a comment below.  I am happy to help you.


Floating Facebook like Box 




LIke
follow
Send/Share With YOur Firends:
comment box
Tags:

Post a Comment

0 Comments

Post a Comment