How to Add Facebook Lightbox Style Pop Up Like Box to Blogger

Facebook Pop up Like box is a essential tool to increase like in your Facebook Page. I personally dont like to force my visitor to like my facebook page. It will not be good. But you may differ from my point of view. And there is also an Cross Sign to bypass the like ! Thats why I may recommend this. In a previous post, I showed you How To Add jQuery Facebook Pop-up Like Box For Blogger. But that’s not working now. Also it has cookie function, so it will not appear every time anyone visits the page. So this better than the Previous one. If you have a blogspot site, you may want to check out these Blogspot Tips and Tricks

Also it is very easy to install this Facebook Pop Up Like Light Box. Just add the code in a Gadget. Whenever you dont like it, just remove the gadget. In WordPress there are many plugin to do that, But in blogger Blogspot it has to do by this way.

You can See here a Demo:

Add Facebook Lightbox Style Pop Up Like Box to Blogger

Steps to Add Facebook Pop Up Like Box to Blogger:

  • Go to Blogger > Dashboard
  • Click Layout
  • Click Add Gadget and select HTML/javascript
  • Copy/Paste the following code
  • Save your gadget.

<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( 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 : '', ? '; 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: 10 }); }); </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='// href=' style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe> </div></div>

Customize Facebook Pop Up Like Widget:

  1. Change the Facebook fan page username ‘resultsAndcircular’ with your own Facebook page name.
  2. Change the number ‘10‘ to the number of days you want it to appear again to a user.

Have any question? Ask me in the Comment. Feel free to share your thought via comment box below.

Check Also

How To Submit Verify And Add Google XML Sitemap To Blogspot Blog

Sitemap is very much essential for a website to be crawled effectively. Every site must …

Leave a Reply

Your email address will not be published. Required fields are marked *