WE HERE TO OFFER YOU WEB SITE/BLOG DESIGN AND TOOL/CODE FOR YOU BLOG/WEBSITE

Facebook Popup (Like Box Widget) For Your Website/blog

Add this enticing widget to your site and a facebook like box will pop up with the lightbox effect when a user visits your page.

  1. Login into your blogger blog 
  2. Go to Layout 
  3. Click on Add Gadget
  4.  Select  HTML/JavaScript Add 
 5. Then Save



 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style type="text/css">
#fbox-background{display:none;background:rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999}#fbox-close{width:100%;height:100%}#fbox-display{background:#eaeaea;border:5px
 solid 
#828282;width:340px;height:230px;position:absolute;top:32%;left:37%;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}#fbox-button{float:right;cursor:pointer;position:absolute;right:0;top:0}#fbox-button:before{content:"CLOSE";padding:5px
 
8px;background:#828282;color:#eaeaea;font-weight:700;font-size:10px;font-family:Tahoma}#fbox-link,#fbox-link
 a.visited,#fbox-link a,#fbox-link 
a:hover{color:#aaa;font-size:9px;text-decoration:none;text-align:center;padding:5px}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie=function(a,b,c){if(arguments.length>1&&"[object
 Object]"!==String(b)){if(c=jQuery.extend({},c),null!==b&&void 
0!==b||(c.expires=-1),"number"==typeof c.expires){var 
d=c.expires,e=c.expires=new Date;e.setDate(e.getDate()+d)}return 
b=String(b),document.cookie=[encodeURIComponent(a),"=",c.raw?b:encodeURIComponent(b),c.expires?";
 expires="+c.expires.toUTCString():"",c.path?"; 
path="+c.path:"",c.domain?"; domain="+c.domain:"",c.secure?"; 
secure":""].join("")}c=b||{};var f,g=c.raw?function(a){return 
a}:decodeURIComponent;return(f=new RegExp("(?:^|; 
)"+encodeURIComponent(a)+"=([^;]*)").exec(document.cookie))?g(f[1]):null};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_facebook_box') != 'yes'){
$('#fbox-background').delay(5000).fadeIn('medium');
$('#fbox-button, #fbox-close').click(function(){
$('#fbox-background').stop().fadeOut('medium');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fbox-background'>
<div id='fbox-close'>
</div>
<div id='fbox-display'>
<div id='fbox-button'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/KS-Webblog-TOOLS-548388695500504&width=339&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; background: #fff; width: 339px; height: 200px;'></iframe>
<div id="fbox-link">Powered by <a style="padding-left: 0px;" href="http://KS WEB/BLOG TOOLS.blogspot.com/2014/12/facebook-popup-like-box-blogger-widget.html" rel="nofollow">KS WEB/BLOG TOOLS</a></div>
</div>
</div>

CONFIGURE THE CODE

1.LOOK FOR  AND REPLACE IT WITH YOUR OWN FACEBOOK PAGE LINK
 https://www.facebook.com/KS-Webblog-TOOLS-548388695500504

 2.Change the 10 Second Time Delay
By default the widget pops up 10 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.

3. .delay(10000) 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:

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


Change the 7 to any number of days you want it to show up 
(EXAMPLE)
1 for every day 

To make it show every time the page reload remove the link 

AND SAVE

Share:

No comments:

Post a Comment

 
 

Popular Posts

Powered by Blogger.

Labels

Recent Posts

Pages

Theme Support

Need our help to upload or customize this blogger template? Contact me with details about the theme customization you need.