Facebook LikeBox Popup With Timer

When a visiter open your site facebook likebox popup and after some time popup box disapper. This popup has a like button that links to your page and an image that also links to your facebook page. Your visiter will be able to like your page or visit your fan page. Popup will disappear after some time you can set that time.
It's very easy to add this widget to your blog.


Just follow these simple steps:-

Don't fotget to BackUp blogger template.

Step1.   First of all login to your blogger account click on dropdown menu and then click on template.

Step2.   Click on "Edit Html" and then find </body> ( Press CTRL+F for a search bar )

Step3.   Now just above the </body> tag paste the following code.

<script type='text/javascript'>
//<![CDATA[
KNFBFansPRO='IACTips'

//]]>
</script>
<style>#fblikepop{background-color:#fff;display:none;position:fixed;top:200px;_position:absolute; /* hack for IE 6*/width:450px;border:10px solid #6F6F6F;z-index:200;-moz-border-radius: 9px;-webkit-border-radius: 9px;margin:0pt;padding:0pt;color:#333333;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 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:#6D84B4 none repeat scroll 0 0;border-top:1px solid #3B5998;border-left:1px solid #3B5998;border-right:1px solid #3B5998;color:#FFFFFF !important;font-size:18px !important;font-weight:normal !important;padding:5px !important;margin:0 !important;font-family:&quot;Lucida Sans Unicode&quot;, &quot;Lucida Grande&quot;, sans-serif !important;}

#fblikepop #actionHolder{height:30px;overflow:hidden;}

#fblikepop #buttonArea{background:#F2F2F2;border-top:1px solid #CCCCCC;padding:10px;min-height:50px;}

#fblikepop #buttonArea a{color:#999999 !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:22px;padding:8px;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='iac.googlecode.com/files/jquery.js.txt' type='text/javascript'/>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/>

<script src='http://iac.googlecode.com/files/IAC%20Tips%20likebox1.js' type='text/javascript'/>

<script language='javascript'>
//<![CDATA[
$(document).ready(function(){
$().KNFBFansPRO({
timeout: 30,
wait: 0,
url: 'http://www.facebook.com/pages/IAC-Tips/182271551882103',
closeable: true });
});
//]]>
</script>
<div id='fbtpdiv'/>

 And click on Save Template

Step4.  

•  Replace this /pages/IAC-Tips/182271551882103 with your facebook username.
• To change the timer change timeout: 30.
• Pupup will appear immediately when a visiter open your blog. If you want that Popup will appear after some time then change wait:0

Step5.    If you want to change the image of popup replace this http://iac.googlecode.com/files/IAC%20Tips%20likebox1.js  with any one of following code

http://iac.googlecode.com/files/IAC%20Tips%20likebox1.js

http://iac.googlecode.com/files/IAC%20Tips%20likebox2.js

http://iac.googlecode.com/files/IAC%20Tips%20likebox3.js 

http://iac.googlecode.com/files/IAC%20Tips%20likebox4.js






Drop Your Comments.........

Share it Please

Tweet

Unknown

I am a student of computer science.Owner of IAC Tips blog. I love to share my knowledge and experience with others. Follow my blog for tips tricks of internet, computer and software.