Popup For Facebook Like Box With Timer

Jquery popup for facebook like box with timer.

As being a blogger you must have facebook fan page right !

But what about the page likes ? Are you just keep on waiting for the likes to come by itself or are you going to pay $100 - $1000 dollars for facebook ads while you can get it for free ?

As you all know facebook is the no. 1 social networking site having 1.5 billion active users, so you can get hell lot of traffic from it. You just need to use it wisely and properly.

I had already shown you 2 amazing ways to get more facebook likes. Must read the below mentioned 2 tutorial if you missed it.

As you can see the second tutorial, it is popup like box plugin but without timer and in this tutorial we will see popup for facebook like box with timer.

A count down timer (which you can define) will be shown with the popup display box and after that, the popup box will be closed by itself. In the mean while, user can also close the box anytime by clicking on the close button.

Features of this widget:

Easy installation - just copy and paste the code.
Increase facebook fan page likes.
Clean and simple.
Loads faster - jquery popup plugin.
Count down timer.
Close button.

Does this sounds interesting to you ? If yes, then lets quickly see how to add this widget on your blog.

Installation of this widget is really simple. You just have follow simple steps written below and you just have to copy and paste the below mentioned code.

About look and feel, you can see the snap shot above and you can download this file and run on your browser, to see live demo.

Must Read :-

Add Popup For Facebook Like Box With Timer Using Jquery:

This popup display box will work for both - blogger and wordpress. Just follow the simple steps written below.

Adding to wordpress :-

step 1 :- Go to header.php

Dashboard >> Appearance >> Editor >>header.php.
Paste the code, just above </body>

Adding to blogger :-

Step 1 :- Go to template.

Take backup of your blogger template (recommended).
Blogger dashboard >> Template >> Edit HTML.
Paste the code, Just above </body>

Step 2 :- Copy and paste the below mentioned code.

.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;
}#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="solvemyhow",
 kakinetworkdotcom01title="Join us at Facebook!",
 kakinetworkdotcom01skin="04",
 kakinetworkdotcom01time="10",
 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>

Step 3 :- Customization.
Now find the comment,



//<![CDATA[
kakinetworkdotcom01username="solvemyhow",
kakinetworkdotcom01title="Join us at Facebook!",
kakinetworkdotcom01skin="04",
kakinetworkdotcom01time="10",
kakinetworkdotcom01wait="0",
kakinetworkdotcom01lang="en"
//]]>



Make changes in the highlighted part. Change "solvemyhow" with your facebook id name. Here "10" is the count down timer. After 10 seconds the popup box will be closed.

You can change the timer but remember do not keep it more than 20 seconds else your visitors may get irritated. So it is recommended to keep the count down timer less than 20 seconds.

Here this widget appears immediately after the visitors comes to your blog. So if you want it to appear after one or two minute, you can change the "0" (highlighted part).

Just give the time in seconds and it will appear after that particular time.

Congrats you just have added and awesome widget to your blog.

What to do next ? Go a head and add awesome subscription box widget to get email id's of your visitors. This will surely help you to increase your blog traffic and will also convert your visitors into loyal readers.

So, this was all about adding jquery popup for facebook like box with timer. Hope you found this tutorial informative and worth reading. Please do let me know if you are facing any trouble in adding the code, in the comments below. I would be glad to solve your doubts. You can also connect with solvemyhow on facebook as well as you can also subscribe for solvemyhow newsletter to get instant updates about blogging widgets, SEO, hacking and wordpress right into your inbox.

Found this tutorial interesting ? Then why not help us by shooting those social media buttons on your left side. After all "sharing is caring" right !

Also See :-