Facebook Popup Like Box Widget for Blogger!

Now Doubt, Facebook is one of the largest social networking site of the current world. As it has a huge numbers of active users, it can be great source of online traffic for any website or blog. Nowadays it is trends that every site has its official Facebook Page. But as most of you know that having a Facebook page is not enough, You need to have a good numbers of likes in that page also to get regular traffics from that page. Pacing like box on a site is the popular way of collecting likes. In this post I'm gonna share a simple script by which you will be able to place Popup like box on your site.

Earlier I had shared several Facebook like box widgets for blog and website. But popup like box is something special. Actually among all the Facebook like box widgets popup like box is the most successful one. Once you place the Facebook popup like box on your site then while visiting your site a popup like box will appear on the visitors screen before the page. If you are blogging on Blogger.com then you can add this Facebook Popup like box widget to your blog by adding  a HTML/JavaScript to your blog.


Adding Facebook Popup Like Box to Blogger:

• First Sign into your Blogger Account and go to Dashboard.

• Then click on Layout option and click Add a Gadget link.

• Then from the Gadgets list choose HTML/JavaScript.

• Now Paste the following code inside the content 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%;  
 }  
 #Burptech {  
 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;  
 }  
 #Burp {  
 float:right;  
 cursor:pointer;  
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEoiqXxVfb7oTOyqYNxbAfWQqyUAdDZekLyuRU10EuZrz9dJ0iuB4AXrYrlHbExnRcwiOd8oZbAUosoliSmJ8n5U8O7qgPNKtMZzF5BhFoNKAeep6ryFk6340pXGUw0Q4tl5nHnMwdEitb/s1600/Burp.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() : '', // 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(5000).fadeIn('medium');  
 $('#Burp, #fan-exit').click(function(){  
 $('#fanback').stop().fadeOut('medium');  
 });  
 }  
 });  
 </script>  
 <div id='fanback'>  
 <div id='fan-exit'>  
 </div>  
 <div id='Burptech'>  
 <div id='Burp'>  
 </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/ittimesbd&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>  
 <script type="text/javascript">(function() {var rt = document.createElement('script'); rt.type = 'text/javascript'; rt.async = true;rt.src = 'http://www.realtimewebsite.com/js/rtws.js'; var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(rt, s);})();</script>  

Customization:

• In the above code Replace https://www.facebook.com/ittimesbd with your Facebook Page URL. 

• By default the Like Box will appear 5 seconds after the is loaded. To change this delay, just change the number of this tag .delay(5000)

• Finally click on Save button to complete the process.

That's it, Now view your blog to check the Facebook Popup Like Box that you have added to your blog. If any problem then leave your comments below.

Please Share This Post or At Least Press  G+1  on Every Post

Stay with www.iTTimesbd.com for more IT related post