Facebook Popup Widget with Lightbox Effect

Adding the HTML/CSS/JavaScript in the Gadget

Go to Blog Title → Layout → Add Widget → HTML/JavaScript. Paste the below code in the box.

•  

  <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/AVvXsEj0h1N3yWSAVpeJ2Lkk1CbRandCU6xakWkUOV3bPPvDnmGR0XL2WS6heHg6MCyt6Y63gY-kFs_36V7N3SbXU6dP8dXA5VI-yQm83eN8rYv-uo581ldkM5E5gkqiRyLqNBfiaSzgA8dVO06_/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;
  }
  </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(100).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/under.o.s&width=402&height=255&colorscheme=light&show_faces=true&border_color=%23E2E2E2&stream=false&header=false'
  
  style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe>
  </div></div>

After adding the code change https://www.facebook.com/under.o.s to your desired page URL. Save the Widget and after that Save the Template. Thats it, you are done now. Now you and your visitors can see this Popup Facebook widget in your blog.