Facebook Popup Like Box With Timer

Facebookthe largest social networking platform is considered as the most useful and fast source for advertising your online business. Facebook is the mostly used platform among all the social networks. Majority of the people around the globe rely on Facebookespecially when it comes to business advertisement. Therefore the FACEBOOK has provided the facility in shape of many widgets and boxes through which the webmasters and bloggers can easily advertise their blog or website and circulate it on the FACEBOOK. Today in this tutorial we are going to share with you the “FACEBOOK POPUP LIKE BOX WITH TIMER”, which you can easily install in your Blogger Blog and attract more visitors and build a better fan following on the Facebook.

How It Works?

Facebook Popup LIKE BOX is created with JQuery contains a LIKE BUTTON and an IMAGE which are link to your Facebook FANPAGE, so either the visitors can become FAN by clicking the LIKE BUTTON or by clicking the IMAGE. You can also adjust change the setting, whether the Popup Box appears immediately when the site loads or after sometime. You can also set the time that for how long the box appears before vanishing automatically. This POPUP LIKE BOX also contains the “CLOSE” option, so that you can also close it manually.

DEMO

How To Add Facebook Popup Like Box With Timer In Blogger?

1. Log in to your Blogger Dashboard.

2. Go to Template > Backup. (Click Here To See How)

3. Click “EDIT HTML”.

4. Inside “HTML EDITOR”, press “CTRL+F”and find </body> tag.

5. Copy & paste the following code, just above/before </body> tag.

<!-- Facebook Popup Like Box With Timer Starts -->

<script type='text/javascript'>
//<![CDATA[
KNFBFansPRO='mytutorialscafeteria'
//]]>
</script>

<style>
#fblikepop
{
background-color:#fff;
display:none;
position:fixed;
top:200px;
_position:absolute;
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;
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='https://googledrive.com/host/0B9e7eeKnhqEVUFBGNGVKRkdHV3M' type='text/javascript'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/>
<script src='https://googledrive.com/host/0B9e7eeKnhqEVM3ppcFdvWkZPUEE' type='text/javascript'/>

<script language='javascript'>
//<![CDATA[
$(document).ready(function(){
$().KNFBFansPRO({
timeout: 30,
wait: 0,
url: 'http://www.facebook.com/mytutorialscafeteria',
closeable: true });
});
//]]>
</script>

<div id='fbtpdiv'/>

<!-- Facebook Popup Like Box With Timer Ends -->

6. Click "Save Template".

You are all done. Refresh your blog to see the Facebook POPUP Like Box With Timer.

Note:-

1. Replace “mytutorialscafeteria” with your own Facebook username.

2. To set the time, after how much time the POPUP Box disappears, set the TIME in “timeout:30” to your own time. E.g. 10, 20 etc.

3. To set the time, after how much time the POPUP BOX appears, when a visitor enters your blog/site, set the time in “wait:0” to your own choice.

Tip:- Do not set the TIMER to maximum in "timeout", because visitors do not wait too long and if the popup box stay so long visitor will leave your website without anything. Similarly do not increase the time in "wait" also, because if the POPUP LIKE BOX appears late, in that time visitor might gone and if they want to be your FACEBOOK FAN, you might lose them.

How To Add Facebook Popup Like Box With Timer In WORDPRESS?

To add the FACEBOOK POPUP BOX in WordPress:

1. Log in to your WORDPRESS Dashboard.

2. Inside THEME SETTINGS, paste the above code immediately before </body>tag.

That’s All.

Need Help?

Don’t forget to spread this knowledge with your friends and subscribe at our blog for more updates. If you need any help, please feel free to ask by leaving your comments below and we will try our best to answer and will be great honor for us. Peace, blessings & cheers.! :)