Another Cool jQuery Popup For Facebook Like Box

This is a 4th version of jQuery popup facebook like box.Facebook likebox is widely used social plugin from Facebook developers. The importance of the Facebook Likebox is tremendous in terms of the number of likes it brings.This widget pops up a jQuery window containing Facebook likebox as soon as a new visitor arrives.See demo first.

View Demo 

How It Works

This popup appears only once to every new visitor. The ip address of the visitor is stored in browser cookie and as the page loads again the widget wont be called again for the same visitor thus eliminating the chances of bugging regular readers. Because of course it will look weird if the popup appears again and again on every pageview. It will appear both on homepage and sub pages depending which page the visitor is accessing. I have set the cookie refresh time to 7 days, which means that this lightbox will appear again for the same visitor after 7 days. We can easily set the number of days to prompt the visitors about your Facebook Fan page. Lets get straight to the one step installation process.

How To Add It To Your Blog

1. Go to Blogger Dashboard > Design > Page/Edit Layout.
2. Click on Add a Gadget
3. Select HTML/JavaScript.
4. Paste the code after replacing my username with yours.

<style>

/*
ColorBox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
/*


User Style:
Change the following styles to modify the appearance of ColorBox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;opacity:0.5 !important;}
#colorbox{
box-shadow:0 0 15px rgba(0,0,0,0.4);
-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
}
#cboxTopLeft{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHgKy54MZxu51kXyx_HnA9BoknrfxIhpKnpHa5RmkhFeCiX58FYQa_iwRVUPbc-XbKEqSNb4W2L3hsoKXB9AcpYXF0-iV8HBTLmTIZvt1Dgfg4690hx7aLDXUF-FgtCBNUUlSPtB3tq42Y/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBnOCcgfxaclyoR4W5b4kW5ZWVgjZs1nzfhZ2LvJWMCo3H8tK1Z4KjO8fRI9aMFvWCfc8VZKphtskCuzlJy7RgEjrPb9P5VDcGBjXO0Ct1ajeQAQz-_5nMB0uf_vk9WUp4cyhBYQgIFfNb/s1600/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHgKy54MZxu51kXyx_HnA9BoknrfxIhpKnpHa5RmkhFeCiX58FYQa_iwRVUPbc-XbKEqSNb4W2L3hsoKXB9AcpYXF0-iV8HBTLmTIZvt1Dgfg4690hx7aLDXUF-FgtCBNUUlSPtB3tq42Y/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHgKy54MZxu51kXyx_HnA9BoknrfxIhpKnpHa5RmkhFeCiX58FYQa_iwRVUPbc-XbKEqSNb4W2L3hsoKXB9AcpYXF0-iV8HBTLmTIZvt1Dgfg4690hx7aLDXUF-FgtCBNUUlSPtB3tq42Y/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBnOCcgfxaclyoR4W5b4kW5ZWVgjZs1nzfhZ2LvJWMCo3H8tK1Z4KjO8fRI9aMFvWCfc8VZKphtskCuzlJy7RgEjrPb9P5VDcGBjXO0Ct1ajeQAQz-_5nMB0uf_vk9WUp4cyhBYQgIFfNb/s1600/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHgKy54MZxu51kXyx_HnA9BoknrfxIhpKnpHa5RmkhFeCiX58FYQa_iwRVUPbc-XbKEqSNb4W2L3hsoKXB9AcpYXF0-iV8HBTLmTIZvt1Dgfg4690hx7aLDXUF-FgtCBNUUlSPtB3tq42Y/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHgKy54MZxu51kXyx_HnA9BoknrfxIhpKnpHa5RmkhFeCiX58FYQa_iwRVUPbc-XbKEqSNb4W2L3hsoKXB9AcpYXF0-iV8HBTLmTIZvt1Dgfg4690hx7aLDXUF-FgtCBNUUlSPtB3tq42Y/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHgKy54MZxu51kXyx_HnA9BoknrfxIhpKnpHa5RmkhFeCiX58FYQa_iwRVUPbc-XbKEqSNb4W2L3hsoKXB9AcpYXF0-iV8HBTLmTIZvt1Dgfg4690hx7aLDXUF-FgtCBNUUlSPtB3tq42Y/s1600/controls.png) repeat-y -211px 0;}
#cboxContent{background:#fff; overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ3I70VRe2HNKPi4l8vkbpZSj4b-ck69Dy3jtkvBvgNFCEWTNbtBRJ4si-gk8CL-vzNw162QgJBO1lk3aaZWtCL7AWr3bUKg8LuhCSzsURXYEynSvYIAc4Gm-Zl1TUYQeA0GcfDKq0Catq/s1600/loading-background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu8iRTjtYZ-sSoBU8eOIB4FG4TkBFD3Ax8FyjoUE4tGWMH8NXzz0KldnPmf7ln0d_FtLDkko_RjylqQApm4ncPtITUtbBEwhKzfhYGjMOsE0rm07Vac_xoDuAxkLrJHHGb2I3DpOZCg-dc/s1600/loading.gif) no-repeat center center;}
#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#F1F1F1;}
#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#F1F1F1;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHgKy54MZxu51kXyx_HnA9BoknrfxIhpKnpHa5RmkhFeCiX58FYQa_iwRVUPbc-XbKEqSNb4W2L3hsoKXB9AcpYXF0-iV8HBTLmTIZvt1Dgfg4690hx7aLDXUF-FgtCBNUUlSPtB3tq42Y/s1600/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
#cboxPrevious{left:0px; background-position: -51px -25px;}
#cboxPrevious.hover{background-position:-51px 0px;}
#cboxNext{left:27px; background-position:-75px -25px;}
#cboxNext.hover{background-position:-75px 0px;}
#cboxClose{right:0; background-position:-100px -25px;}
#cboxClose.hover{background-position:-100px 0px;}
.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}
/*-----------------------------------------------------------------------------------*/
/* Facebook Likebox popup For Blogger
/*-----------------------------------------------------------------------------------*/
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration:none;
}

.box-tagline {
color: #999;
margin: 0;
text-align: center;
}
#subs-container {
padding: 35px 0 30px 0;
position: relative;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}
</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script src="http://yourjavascript.com/11215013191/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*7;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", inline:true, href:"#subscribe"});
}
});
</script>
<!-- This contains the hidden content for inline calls -->

<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1A2ClS_suOCY9NNjz0VPJw26elo5CFjTdClkzYQwRU3kQ6oJsSth-Doa3lR8eiolENXBBA7p7WHPz-Rzo9lZg6-bSWOEQzoQVGgpruNle8TkabBj5m2YISzxiFLzf25a75mLDzWQ4DEZm/s1600/LikeUsOnFacebook.png" width:300px; height:150px;"/></center>
<center>

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fbtsnts&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>

</center>
<p style=" float:right; margin-right:45px; font-size:4px;" ><a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://www.helperblogger.com/">Blogger Widgets »</a> </p>
</div>
</div>

Make This Change

Simply replace btsnts with your facebook username.(Line Number - 103)


Replace btsnts with your username.

Customizations

I have set the cookie refresh time to 30 days, which means that this lightbox will appear again for the same visitor after 30 days.To change it just change the value 7

I hope this widget brings more likes for your page.