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:


I'm always adding new blogging tips here. Signup now and I'll email you whenever I publish new post.

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 159 awesome articlesfor us.

Comment below, let me know what do you think?

24 Comments so far add one

  1. Gaurav says

    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

    • Ammar Ali says

      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

  2. says

    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.

    • Ammar Ali says

      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!

  3. Justin says

    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)

  4. John says

    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!

  5. Simon says

    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.

Leave a Reply

Your email address will not be published. Required fields are marked *