Facebook Page Like Pop-up with Timer Control

Here is yet another useful widget for blogger/blogspot. You probably have a Facebook Page for your blog and would definitely like to have maximum number of "Likes" for your blog's FB page. You might have seen  pop-ups on various blogs asking their blog viewers to "LIKE" their Facebook page. I am talking about the same widget, with advance features and attractive GUI.

This widget would not only increase your Facebook page LIKES but would also help you in having consistent traffic i.e. you can increase return-traffic rate. You can also control "number of seconds" you want to display the widget on page.

For DEMO, you can check my blog home page where I am using the same pop up (with a customized image used within popup). The actual pop-up would look like above shown image.

How to Add a Facebook Page Like Popup ?

• Login Your Blogger account
• Go to Dashboard > Design > Edit HTML
• Find 

</body>

• Copy the below shown code and paste it just above the </body> tag

<script type='text/javascript'>
//<![CDATA[
KNFBFansPRO='Softarea'
//]]>
</script>
<style type='text/css'>

#fblikepop{background-color:#fff; position:absolute; /* hack for IE 6*/width:450px;border:5px solid #e4e4e4;z-index:200;margin:0pt;padding:0pt;color:#333333;text-align:left;font-family:"Open Sans",verdana,arial,georgia;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 6*/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:#3a60a4 none repeat scroll 0 0;color:#FFFFFF !important;font-size:18px !important;font-weight:normal !important;padding:5px !important;margin:0 !important;font-family:"Open Sans",verdana,arial,georgia;}
#fblikepop #actionHolder{height:30px;overflow:hidden;}
#fblikepop #buttonArea{background:#F2F2F2;border-top:1px solid #e4e4e4;padding:10px;min-height:50px;}
#fblikepop #buttonArea a{color:#3a60a4 !important;text-decoration:none !important;border:0 !important;font-size:10px !important;}
#fblikepop #buttonArea a:hover{color:#333 !important;text-decoration:none !important;border:0 !important;}
#fblikepop #popupMessage{font-size:12px !important;font-weight:normal !important;line-height:9px;background:#fff !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 src='http://code.jquery.com/jquery-1.9.1.min.js' type='text/javascript'></script>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'></script>
<script src='http://softarea.googlecode.com/files/fb-like-popup.js' type='text/javascript'></script>
<script language='javascript'>
//<![CDATA[
$(document).ready(function(){ 
$().KNFBFansPRO({
timeout: 100,
wait: 0,
url: 'http://www.facebook.com/offical.softarea',
closeable: true });
});
//]]>
</script>
<div id='fbtpdiv'/>

• Change the text in bold
• Save the template.

As I always here, if you get into troubles, you can use the comment form or Our Facebook Page !