Facebook LikeBox jQuery Popup With Timer

We have posted many posts on social media for your blog. But today's post is something different from all of them. Today's widget is a popup Facebook Like Box, with count down timer. This widget has an image link to your fan-page, a small like box, a close button and a count-down timer. You can also set the timer. Your visitors need to wait for the seconds you provide in  the timer to close the popup Like Box, but still they can click on the close button at the top of the pop-out. People might like to click on the button as it interferes while going to your blog.

HOW TO ADD THE FACEBOOK LIKE BOX POP-OUT TO BLOGGER-

1. First sign in to blogger.

2. Go to your blog and jump to "LAYOUT".

3. Add a new "HTML/JAVASCRIPT" gadget.(at any corner)

4. In the "HTML EDITOR" paste the below code-

<script type='text/javascript'>
//<![CDATA[
    KNFBFansPRO='BloggerTricksHut'
//]]>
</script>
<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: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='http://mybloggertricks.googlecode.com/files/jquery.js' type='text/javascript'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/>
<script src='http://blogger-tricks-hut.googlecode.com/files/BloggerTricksHutLikeBoxPopUp.js' type='text/javascript'/>
<script language='javascript'>
//<![CDATA[
    $(document).ready(function(){                       
        $().KNFBFansPRO({
           timeout: 30,
            wait: 0,
            url: 'http://www.facebook.com/BloggerTricksHut',
            closeable: true        });
    });
//]]>
</script>
<div id='fbtpdiv'/>

CUSTOMIZING THE POPUP LIKE BOX-

1. Replace the BloggerTricksHut with your Facebook username.

2. To change the timer edit the timout: 30

3. If you want to make the popup appear after some time when the visitor
    visits, then change the wait: 0

4. If you don't want your visitors to close the popup then change "closeable: true" to "cloasable: false".

If you want to any help regarding this post please feel free to comment.
This post is re-blogged from: www.mybloggertricks.com