Facebook PopUp Like Box with Timer !

Today we are sharing another version with much more control options. This one includes a time counter and instead of likebox it displays a like button that links to your Fan Page and an attractive Image that also links to your fan page letting your visitors to either join your fan page by clicking the like button or by simply visiting your fan page by clicking the image. You can set for how long the widget/plugin must display before disappearing automatically. It also includes a close option.

You can also specify whether you want it to show immediately as soon as a visitor enters your site or after a specified time. The JavaScript code for this plugin is created by kakiheboh termed as "LikeBox FB Fanpage Pro"  and we simply modified the code to create four different backgrounds for the likebox. The installation is extremely easy just follow these steps. This one comparatively loads faster compared to the previous facebook blogger widgets we published so far.


Demo
Important Note: Some of Templates Does Not Support PopUpBox Close Option.
I saw some of blogs are using timeout of 1000 & above seconds plz dont use this, because you will loose  your blog traffic, better use timeout : 10 or 20 second because visitors dont want to wait!!!

Add Facebook LikeBox Popup To Blogger

This popup contains a likebutton instead

1. Go To Blogger > Design > Edit HTML
2. Backup your template
3. Paste the following code just above </body>

<!-- MmkTricks.blogspot.Com Likebox Pro FBFan Code Start -->
<script type='text/javascript'>
//<![CDATA[
KNFBFansPRO='MMKTRICKS'
//]]>
</script>
<style>
#fblikepop{background-color:#fff;display:none;position:fixed;top:200px;_position:absolute; /* hack for IE 8*/width:450px;border:10px solid #900000;z-index:200;-moz-border-radius: 9px;-webkit-border-radius:

9px;margin:0pt;padding:0pt;color:#900000;text-align:left;font-family:arial,sans-serif;font-size:13px;
}
#fblikepop body{background:#FFF none repeat scroll 0%;line-height:1;margin:0pt;height:100%;
}
.fbflush{cursor:pointer;font-size:11px !important;color:#FFF !important;text-decoration:none !important;border:0 !important;
}
#fblikebg{display:none;position:fixed;_position:absolute; /* hack for IE 8*/height:100%;width:100%;top:0;left:0;background:#000000;z-index:100;
}
#fblikepop #closeable{float:right;margin:7px 15px 0 0;
}
#fblikepop h1{background:#900000 none repeat scroll 0 0;border-top:1px solid #900000;border-left:1px solid #900000;border-right:1px solid #900000;color:#FFFFFF !important;font-size:14px !important;font-

weight:normal !important;padding:5px !important;margin:0 !important;font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
}
#fblikepop #actionHolder{height:30px;overflow:hidden;}
#fblikepop #buttonArea{background:#FFFFFF;border-top:1px solid #9000000;padding:10px;minCCCCCCght:50px;
}
#fblikepop #buttonArea a{color:#999999 !important;text-decoration:none !important;border:0 !important;font-size:10px !important;
}
#fblikepop #buttonArea a:hover {color:#900000 !important;text-decoration:none !important;border:0 !important;
}
#fblikepop #popupMessage{font-size:12px !important;font-weight:normal !important;line-height:22px;padding:8px;background:#333 !important;
}
#fblikepop #counter-display{float:right;font-size:11px !important;font-weight:normal !important;margin:5px 0 0 0;text-align:right;line-height:16px;
}
</style>
<script type='text/javascript' src='https://sites.google.com/site/mmktricks/jquery.js'></script>
<script type='text/javascript' src='http://connect.facebook.net/en_US/all.js#xfbml=1'></script>
<script type='text/javascript' src='https://sites.google.com/site/mmktricks/fbpopup.js'></script>
<script language='javascript'>
//<![CDATA[
$(document).ready(function(){
$().KNFBFansPRO({
timeout: 20,
wait: 0,
url: 'http://www.facebook.com/MMKTRICKS',
closeable: true });
});
//]]>
</script>
<div id='fbtpdiv'></div>
<!-- MmkTricks.blogspot.Com Likebox Pro FBFan Code End -->

Make these important changes:

• Replace this MMK Tricks with your Facebook username.
• The timer is set to 30 seconds to change it simply edit timeout: 30
• The widget appears immediately after a visiter eneters. If you want it to appear after one minute or more then edit wait: 0

You can change Background Colors by Editing CSS Code