jQuery Popup For Facebook Like Box With Timer – 2015 Edition Updated today

jQuery Popup For Facebook Like Box With Timer – 2015 Edition Updated today

 

You have created Facebook page of your blog.

But what about page likes?
Do you just keep waiting for likes to come to your page itself?
It’s recommended to use some type of Facebook like box on your blogs and encourage users to like your page.
Facebook has always become a useful and resourceful site to every bloggers. Today
I brought a new stylish facebook popup like box with timer. It is a beautiful facebook like box popup with timer.

This one includes a time counter and instead of likebox it displays a like button that links to your facebook 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!
Features of Facebook Like Box With Timer

• Easy to install and configure
• Helps to increase fans
• Full control over customization
• Countdown timer
• Clean and simple
• Close button

Installation is totally simple just follow following steps to add jQuery Popup For Facebook Like Box With Timer to WordPress and Blogspot blogs.
If you want to see like demo. Just copy the code given give below and paste it inside html editor to see live demo.
TIP: I see many people who make a big mistake by setting timer to more than 20 seconds. Dont do that. Set the popup timer between 10-20. Don’t go beyond that. It will bother your visitors and you’ll start loosing potential visitors. So, it’s always better idea to keep the popup time less than 20 second.

Adding Popup For Facebook Like Box With Timer

You just need to place the facebook like box with timer code given below in your blog widget. Follow steps given below 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>

<pre><style>#fblikepop {    background-color: #fff;<br />    display: none;<br />    position: fixed;<br />    top: 200px;<br />    _position: absolute;<br /> /* hack for IE 6*/<br />    width: 450px;<br />    border: 10px solid #6F6F6F;<br />    z-index: 200;<br />    -moz-border-radius: 9px;<br />    -webkit-border-radius: 9px;<br />    margin: 0pt;<br />    padding: 0pt;<br />    color: #333333;<br />    text-align: left;<br />    font-family: arial,sans-serif;<br />    font-size: 13px;<br />}#fblikepop body {<br />    background: #fff none repeat scroll 0%;<br />    line-height: 1;<br />    margin: 0pt;<br />    height: 100%;<br />}<br /><br />.fbflush {<br />    cursor: pointer;<br />    font-size: 11px !important;<br />    color: #FFF !important;<br />    text-decoration: none !important;<br />    border: 0 !important;<br />}<br />#fblikebg {<br />    display: none;<br />    position: fixed;<br />    _position: absolute;<br /> /* hack for IE 6*/<br />    height: 100%;<br />    width: 100%;<br />    top: 0;<br />    left: 0;<br />    background: #000000;<br />    z-index: 100;<br />}#fblikepop #closeable {<br />    float: right;<br />    margin: 7px 15px 0 0;<br />}#fblikepop h1 {<br />    background: #6D84B4 none repeat scroll 0 0;<br />    border-top: 1px solid #3B5998;<br />    border-left: 1px solid #3B5998;<br />    border-right: 1px solid #3B5998;<br />    color: #FFFFFF !important;<br />    font-size: 14px !important;<br />    font-weight: normal !important;<br />    padding: 5px !important;<br />    margin: 0 !important;<br />}#fblikepop #actionHolder {<br />    height: 30px;<br />    overflow: hidden;<br />}#fblikepop #buttonArea {<br />    background: #F2F2F2;<br />    border-top: 1px solid #CCCCCC;<br />    padding: 10px;<br />    min-height: 50px;<br />}#fblikepop #buttonArea a {<br />    color: #999999 !important;<br />    text-decoration: none !important;<br />    border: 0 !important;<br />    font-size: 10px !important;<br />}#fblikepop #buttonArea a:hover {<br />    color: #333 !important;<br />    text-decoration: none !important;<br />    border: 0 !important;<br />}#fblikepop #popupMessage {<br />    font-size: 12px !important;<br />    font-weight: normal !important;<br />    line-height: 22px;<br />    padding: 8px;<br />    background: #fff !important;<br />}#fblikepop #counter-display {<br />    float: right;<br />    font-size: 11px !important;<br />    font-weight: normal !important;<br />    margin: 5px 0 0 0;<br />    text-align: right;<br />    line-height: 16px;<br />}</style><br /><script src="http://www.google.com/jsapi"></script><script>google.load("jquery", "1");</script> <br /><script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><br /><script type="text/javascript"><br />//<![CDATA[<br /> kakinetworkdotcom01username="<b>ebolabird</b>",<br /> kakinetworkdotcom01title="Join us at Facebook!",<br /> kakinetworkdotcom01skin="04",<br /> kakinetworkdotcom01time="20",<br /> kakinetworkdotcom01wait="0",<br /> kakinetworkdotcom01lang="en"<br />//]]><br /></script><br /><script type="text/javascript" src="http://cdn.allbloggingtips.com/wp-content/uploads/2012/06/popup-with-timer-codez.js"></script><br /><script type="text/javascript"><br />//<![CDATA[<br /> $(document).ready(function(){$().kakinetworkdotcom({ closeable: true });});<br />//]]><br /></script></pre>

Make following important changes:

• Replace this ebolabird with your Facebook username
• The timer is set to 20 seconds to change it simply edit timeout: Search for kakinetworkdotcom01time=”20″, and replace “20” with any time you want (it should be in seconds)
• The widget appears immediately after a visitor enter your blog/site. If you want it to appear after one minute or more then edit kakinetworkdotcom01wait=”0″,