-

14 September 2012

Facebook LikeBox JQuery Popup with Timer!

VM | 5:40 pm |
image










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> 

<script type='text/javascript'>
//<![CDATA[
    KNFBFansPRO='BloggerTricks'
//]]>
</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='http://mybloggertricks.googlecode.com/files/jquery.js' type='text/javascript'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/>
<script src='http://mybloggertricks.googlecode.com/files/mbtlikebox2.js' type='text/javascript'/>
<script language='javascript'>
//<![CDATA[
    $(document).ready(function(){                       
        $().KNFBFansPRO({
           timeout: 30,
            wait: 0,
            url: 'http://www.facebook.com/BloggerTricks',
            closeable: true        });
    });
//]]>
</script>
<div id='fbtpdiv'/>

Make these important changes:
  • Replace this BloggerTricks 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
Change Facebook FanPage Background Image:
The above code displays the following image:
fbbutton
To use the following images, simply replace http://mybloggertricks.googlecode.com/files/mbtlikebox2.js with anyone of the given links

BecomeFanOnFacebook
http://mybloggertricks.googlecode.com/files/mbtlikebox4.js
facebookbutton
http://mybloggertricks.googlecode.com/files/mbtlikebox3.js

like us on facebook

http://mybloggertricks.googlecode.com/files/mbtlikebox.js

Add Facebook Likebox Popup To Wordpress

Simply copy the above code and paste it juts above </body> inside your wordpress theme. You can find this tag inside your Theme settings. For those who you Genesis Framework, you may simply paste this code above </body> by going to Genesis > Theme Settings.


No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...

Subscribe Updates, Its FREE!