jQuery Popup For Facebook Like Box With Timer!

After our previous jQuery Popup For Facebook Like Box  version1 ~ version2. Today we decided to present some cool jQuery Popup For Facebook Like Box With Timer for wordpress and blogger blogs.

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. It also include a timer too! The JavaScript code for this plugin is created by kakiheboh termed as “LikeBox FB Fanpage Pro”. Installation is totally simple just follow following steps to add jQuery Popup For Facebook Like Box With Timer to WordPress and Blogspot blogs.

Tip: Copy the code given give below and paste it inside this editor to see live demo.

jQuery Popup For Facebook Like Box With Timer!

Adding Popup For Facebook Like Box With Timer (Updated!)

You just need to place a code to your blog widget Follow following steps to add Like Box popup to WordPress and Blogger.

Adding To Blogger

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

Adding To WordPress

  1. Go to Dashboard > Appearance > Editor > Header.php
  2. Paste the following code just above </body>
<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: 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: #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://www.google.com/jsapi"></script><script>google.load("jquery", "1");</script> 
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script type="text/javascript">
//<![CDATA[
 kakinetworkdotcom01username="allbloggingtips",
 kakinetworkdotcom01title="Join us at Facebook!",
 kakinetworkdotcom01skin="04",
 kakinetworkdotcom01time="20",
 kakinetworkdotcom01wait="0",
 kakinetworkdotcom01lang="en"
//]]>
</script>
<script type="text/javascript" src="http://cdn.allbloggingtips.com/wp-content/uploads/2012/06/popup-with-timer-codez.js"></script>
<script type="text/javascript">
//<![CDATA[
 $(document).ready(function(){$().kakinetworkdotcom({ closeable: true });});
//]]>
</script>

Make following important changes:

  • Replace this AllBloggingTips with your Facebook username.
  • The timer is set to 20 seconds to change it simply edit timeout: 20
  • The widget appears immediately after a visitor enter your blog/site. If you want it to appear after one minute or more then edit wait: 0

 Credits

This New Popup For Facebook Like Box is first shared on AllBloggingTips. Bloggers are requested to link back if they are going to share above widget with there visitors.

More Widgets:


Article by

Hi! I'm +Ammar Ali Part time Blogger, young entrepreneur, affiliate marketer and student. I help people in bulding a profitable blog easily. Read more about me. You can connect on Twitter, Facebook.

Ammar has written 151 awesome articles for us.

Write for us Guest Post?

Comment below, let me know what do you think?

24 Comments so far add one

  1. Amazing bro !!!!!!
    This one is superb…………

  2. I tried applying this code on my wordpress site but it didn’t appears can give me the same jquery that will work for wordpress

    • Hi

      Well to be honest I don’t think it works well with your wordpress blog by just adding above code :) Just download this plugin WP Super Popup and than put above code within this plugin setting page hope it will work :D

      ~Ammar

  3. Hey it’s super cool. Really amazing work! Ammar you’re becoming a pro :D

  4. Not working…….

  5. @All,

    Code is update. Please try again and let me know if you are facing problems :D

  6. i cant seem to get the “wait” function to change from loading when the page first loads. what are the parameters? are they seconds or minutes? Ive tried 10, 15, 30, .10. I’d like it to load 10 seconds after the page is loaded.

    • Just search for kakinetworkdotcom01time="20", and The timer is set to 20 seconds to change it simply edit timeout: 20 to any time (seconds) you want!

  7. Also, it appears that this script disabled my pirobox script. Any ideas on how to get them both to work? my site (www.jguffphotography.com) has the pirobox working (without your script), and on my practice page (www.jguffphotography.com/prac.html) i have your script in there, which disables the pirobox)

  8. Is this like box appear only @ one time ?

  9. If i put this poup on my website it is agree from google adsense ? I want to put this pop-up, but dont want to broke my google adsense account.
    You know if this things it s ok for adsense?
    Thanks!

  10. Hi Anmar,

    How do we show the fan box just like yours in the pop-up?

    Thank you

  11. How do I run a one-time 24 hours per ip?

  12. How about one like the one you are using now ?? please

  13. Hi ammar,can i get the facebook pop up code that u have on your blog currently.I liked it very much.

  14. I did like the script, but I want it to use my own “APP ID” instead the generic FB app id when people clicks on like, which then redirects to FB Login Screen (where its the FB Generic App ID) So I wanna use my own instead? Possible.

  15. Cant copy the codes. give me the code in mail or tinypaste pls. kakinetwork.com was not working previously. have you updated the code?

Speak Your Mind