Sunday, 27 May 2012

Pin It

How to add Facebook LikeBox JQuery Popup with Timer!

Facebook LikeBox JQuery Popup with Timer!


i have posted many blogger tips for widgets and tricks , today we are going to see , how to add a pop up facbook like button with timer , where these helps out the blogger to promote their website easily


i would like to thank MYBLOGGERTRICKS.COM for this wonderful post , CLICK HERE TO VIEW THE ORIGINAL POST


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.  

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='MECHFUTUREKINGS'
//]]>
</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/MECHFUTUREKINGS',
            closeable: true        });
    });
//]]>
</script>
<div id='fbtpdiv'/>
 3 IMPORTANT THINGS TO DO:
  • Replace this MECHFUTUREKINGS 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
 
FIXED ISSUE:

the pics of liked people doesn't appear in the pop up box ,
how to make it visible?
 
i found a way to make pics visible in popup fb like box
i have changed the value of "height30px to 60" in the following line , and change the timeout to some extend to load the pics in pop up box .. "timeout to 40"

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

now the pics of of liked people are visible cleanly ,









if you like this post join me on

0 comments:

Post a Comment

Widget by:Blogger 4 Ever