Facebook Popup like box widget will appear in the popup window. when someone visits your website for the first time. the popup like Box is created with Jquery so it will not take so much time in loading. to make it more stylish we also used CSS. in the following screenshot you can see how it looks.
Facebook Popup Like box widget For you website stylish Design

Facebook Popup like Box is really useful it helps you to get more likes on your facebook fan page. if you are thinking of using a stylish facebook like Box then this post helps you. because this post is about how to add Facebook Popup like box widget in your blogger.

Add Facebook Popup Like Box widget in Blogger


  1. go to the blogger and log in your google account. 
  2. from your blog dashboard click on template link and from the next page click on edit HTML button. 
    Facebook Popup Like box widget For you website stylish Design
  3.  click anywhere on the code and press ctrl+F blogger search box will appear.   
    Facebook Popup Like box widget For you website stylish Design
  4. search </body> and paste following code just before the </body>. 
  5. visit your blog to see how it looks.

 <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/pages/92tricks-580765418758066&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>
</div>
in blogger, you can also show facebook Popup like box widget on the home page only. to show it on the homepage only just use the following Blogger B: IF condition.
<b:if cond='data:page.type == "index"'>paste facebook Popup like Box widget code here</b:if>

add Facebook Popup Like Box widget without editing your template

Facebook Popup like box gadget is also usable as a simple javascript/HTML widget. 

  1. from your blog dashboard click on the layout link.
  2. the layout page will appear here you will see add gadget link click on the add gadget link. 
    Facebook Popup Like box widget For you website stylish Design
  3. a new window will be shown from this window click on javascript/HTML. 
    Facebook Popup Like box widget For you website stylish Design
  4. Paste the above code in the text box and click on save button. 
    Facebook Popup Like box widget For you website stylish Design


that's it the facebook Popup like Box is successfully added to your blogger blog.
thanks for reading my post keep visiting for more useful posts. if this post was useful for you then drop your comments below.

2 comments:

  1. sir this could be paranoia, but after installing the pop up in my site I'd been monitoring it (my site) throug google analytics, and to me it looks like as soon as put the pop up to your site, facebook reduces the reach of the posts you share to the social network, to avoid artificial grouth to your facebook page, am I wrong? please healp.

    ReplyDelete
  2. This comment has been removed by a blog administrator.

    ReplyDelete