Facebook Like PopUp Box

Hi readers, I think you all have liked my writing style that you accepted it and are still reading it. I think my posts have helped you in developing your blog with popularity. After so much of hard work I think you are now going to increase your Facebook likes.

This is a jQeury and javascript widget for blogger blogs. This is a very simple and elegant looking widget. The widget has a close button which enables visitors to close it if they have already liked your page.
It sometimes annoys your visitors too much if you use it most frequently. But they help you develop your blog when they like your page and share your post. The widget boosts your Facebook likes too.

Live Demo

How to add widget to blogger

1. Go to blogger blog's dashboard
2. Click on Template tab
3. Now on Edit Html
4. Find the following code

</head>

     5. Paste the below code before/above </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script><script src='http://yourjavascript.com/69231961363/jquery-colorbox-min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function(){
if (document.cookie.indexOf(&#39;visited=true&#39;) == -1) {
var setDays = 1000*60*60*24*7;
var expires = new Date((new Date()).valueOf() + setDays);
document.cookie = &quot;visited=true;expires=&quot; + expires.toUTCString();
$.colorbox({width:&quot;400px&quot;, height:&quot;430px&quot;, inline:true, href:&quot;#facebook-popup&quot;});
}});</script>

+ (var setDays = 1000*60*60*24*7) *7 Setting this value will effect cookie refreshment. I have set the likebox to appear once to the visitor and likebox will appear again after 1 week. If you want to display likebox to your visitors after a 1 day then set 7 to 1. if you set the value to 1 then it can annoying your regular readers.
 
   6. Now search for below code

</b:skin>

   7. Place the below code above <b:/skin>

/* Colorbox Core Style: The following CSS is consistent between example themes and should not be altered. */ #colorbox, #cboxOverlay, #cboxWrapper { position: absolute; top: 0; left: 0; z-index: 9999; overflow: hidden; } #cboxOverlay { position: fixed; width: 100%; height: 100%; } #cboxMiddleLeft, #cboxBottomLeft { clear: left; } #cboxContent { position: relative; } #cboxLoadedContent { overflow: auto; -webkit-overflow-scrolling: touch; } #cboxTitle { margin: 0; } #cboxLoadingOverlay, #cboxLoadingGraphic { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow { cursor: pointer; } .cboxPhoto { float: left; margin: auto; border: 0; display: block; max-width: none; -ms-interpolation-mode: bicubic; } .cboxIframe { width: 100%; height: 100%; display: block; border: 0; } #colorbox, #cboxContent, #cboxLoadedContent { box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; } /* User Style: Change the following styles to modify the appearance of Colorbox. They are ordered and tabbed in a way that represents the nesting of the generated HTML. */ #cboxOverlay { background: #000; } #colorbox { outline: 0; } #cboxContent { margin-top: 20px; background: #000; } .cboxIframe { background: #fff; } #cboxError { padding: 50px; border: 1px solid #ccc; } #cboxLoadedContent { border: 5px solid #123D60; background: #fff; box-shadow: 3px 3px 3px #fff; } #cboxTitle { position: absolute; top: -20px; left: 0; color: #ccc; } #cboxCurrent { position: absolute; top: -20px; right: 0px; color: #ccc; } #cboxLoadingGraphic { background: url(http://2.bp.blogspot.com/-jcn46y_t6D0/Uc8cG9q6ExI/AAAAAAAAC1k/K63u_2VkemM/s32/loading.gif) no-repeat center center; } /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */ #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose { border: 0; padding: 0; margin: 0; overflow: visible; width: auto; background: none; } /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */ #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active { outline: none; } #cboxSlideshow { position: absolute; top: -20px; right: 90px; color: #fff; } #cboxPrevious { position: absolute; top: 50%; left: 5px; margin-top: -32px; background: url(https://sites.google.com/site/techprevue/home/controls.png) no-repeat top left; width: 28px; height: 65px; text-indent: -9999px; } #cboxPrevious:hover { background-position: bottom left; } #cboxNext { position: absolute; top: 50%; right: 5px; margin-top: -32px; background: url(https://sites.google.com/site/techprevue/home/controls.png) no-repeat top right; width: 28px; height: 65px; text-indent: -9999px; } #cboxNext:hover { background-position: bottom right; } #cboxClose { position: absolute; top: 5px; right: 5px; display: block; background: url(http://4.bp.blogspot.com/-wQsw3MW4DK4/Uc7_hhV5UzI/AAAAAAAAC1U/Uskeu5jhHbo/s130/controls.png) no-repeat top center; width: 38px; height: 19px; text-indent: -9999px; } #cboxClose:hover { background-position: bottom center; }

     8. Now find the following code

</body>

     9. Paste the below code above </body>

<div style='display:none'>
<div id='facebook-popup' style='background:#fff;position:scroll;z-index:99999;'>
<div style='text-align:center;padding-top:15px'> <h3 style='font-family: &apos;Source Sans Pro&apos;, Sans Serif; Font-size: 18px; font-weight: 300px; '>Receive All Free Updates Via Facebook.</h3>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fmakingeffective&amp;width=342&amp;height=300&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=false&amp;header=false&amp;appId=' style='border:none; overflow:hidden; width:342px; height:300px;'/><span style="color: #cccccc;"><a href="http://makingeffective.blogspot.in/2013/08/facebook-like-popup-box.html" target="_blank">(Get It)</a></span>
  </div>
  </div>
    </div>

+ Replace makingeffective with your own facebook page username

Now save your template and check your blog. The widget will appear. It will definately give your blog a professional look.

Last note

Too much use of this widget will also effect your blog traffic. So use it with same setting. And also read + sign notes which are mentioned under code box. If you like my post please share it.