Eye Contact FaceBook Popup LIKE BOX For Blogger

The popular way of enhancing visitors to your blog is getting more facebook subscribers. If facebook fanpage of your blog has more number of likes, your blog traffic will get increased when you share your blog posts to your facebook fanpage. Usually, adding a facebook like box at the right sidebar or somewhere else does not work for all the blogs. That is why we go for the chance to add facebook likebox in popup. This popup is not like a window.

When someone enters to your blog, the popup will open at the center of your blog page and remaining portion will be covered by black shad. If they wish to like your blog for receiving updates through facebook, they will put like for your facebook fanpage. If they won't ready for giving like, they can exit by clicking outside to the popup box. You will get more subscribers from facebook because it has smooth effect and it has good eye contact.

You Might Also Like: Social Popups

Let me explain how can we add the eye contact facebook popup like box to your blogger blog.

Implementation Guide

• Login to your Blogger account

• Go to dashboard and move on Layout section

• Click on Add a gadget link and select HTML/JavaScript option

• Copy the below code and paste to it

<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(http://3.bp.blogspot.com/- NRmqfyLwBHY/T4nwHOrPSzI/AAAAAAAAAdQ/8b9O7O1q3c8/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; } #linkit,#linkit a.visited,#linkit a,#linkit a:hover { color:#80808B; font-size:10px; margin: 0 auto 5px auto; float:center; } </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() : '', options.path ? '; path=' + options.path : '', options.domain ? '; domain=' + options.domain : '', options.secure ? '; secure' : '' ].join('')); } 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(1000).fadeIn('medium'); $('#fanclose, #fan-exit').click(function(){ $('#fanback').stop().fadeOut('medium'); }); } }); </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=http://www.facebook.com/mithileshjoshiS&width=402&height=255&colorscheme=light&show_face s=true&show_border=false&stream=false&header=false' style='border: none; overflow: hidden; margin-top: -20px; width: 400px; height: 230px;'></iframe> </div> </div>

Finally, Save it.

That's all, You are done!

If you like this please share it. Share your experience with us by leaving a comment below.