How to show facebook like box into popup on blogger

Every body want to increase traffic on there blog or website. Social networking site is the best medium to increase your blog traffic. Today every body have there facebook account so its a good way to built your audiance threw facebook.
I want to discuss my own experiance about my blog php programming solutions(http://phpsollutions.blogspot.in). Innitally when i started my blog i am very upset because i have almost zero hit per day of my blog because i am not sharing my post on any social networking sites other than blogger. But when i started to share my post i started to given likes and my blog traffic has been increased day by day and now i got 500 to 600 hits every day on my blog. This could be possible due to facebook because i create a page on facebook with the name php programming solutions(http://facebook.com/websollutions) and also start sharing my post on facebook as well. I also add a pop up on my blog to collect likes from my blog visitors.
Below i am going to explain the method in four simple steps that how you can add pop on your blog to collect facebook likes from your visitors :


Step 1 :  Copy the entire below code and don't forget to change my facebook page link "http://facebook.com/websollutions" with your own link.


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script><br /> <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/AVvXsEhM-7u8Cva6gvVAbOmMXkazVJd2qmpeqKZMCyF39QjSmg-Nf5hg5rIOX9_ISASSvimkaIQDWAKQd3XdVeh2a6f2wwt2rUleCYrljkvGJhKO3PbmJDwWaOa5hBySt25IehgfzY5vnkbUyij2/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 a.visited,#linkit a,#linkit a:hover { color:#80808B; font-size:10px; margin: 0 auto 5px auto; float:center; } </style><br /> <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><br /> <script type='text/javascript'> jQuery(document).ready(function($){ if($.cookie('popup_user_login') != 'yes'){ $('#fanback').delay(10000).fadeIn('medium'); $('#fanclose, #fan-exit').click(function(){ $('#fanback').stop().fadeOut('medium'); }); } $.cookie('popup_user_login', 'yes', { path: '/', expires: 7 }); }); </script><br /> <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://facebook.com/websollutions&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false' style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe></div> </div>

Step 2 :  Click on the layout in your blogger admin panel and select  "Add a Gadget "  from layout screne like below

Step 3 :   Now select" HTML/JAVASCRIPT " from the list of gadgets like below

Step 4 :  This is your final step now you have to paste here your entire code which you are copied into the first step like below screne shot -

Customize Your Facebook Popup Code :

1 - Replace facebook.com/websollutions with your Facebook page name.

2 - If you want the Popup to appear every time the User Reloads  or access the website. Find and Delete the below code from the above script :

      $.cookie('popup_user_login', 'yes', { path: '/', expires: 7 }); 

3 - If you want to change the delay time of the Facebook popup widget then search for “delay” in the code and change its value, currently you’ll find something like below :

   .delay(10000)

Now Its Time To See Output : Now refresh your blog/site and see the output a popup will be display in front of you in which a facebook like icon showing like below screne shot -

 

 Please don't forgot to leave a comment if you like this post 

Chears...

Happy Coding :)