Facebook likebox is widely used social plugin from Facebook developers. By adding this jQuery popup Facebook likebox widget you can easily bring thousands of visitors to your blog. Today I am going to share the latest jQuery LIGHTBOX Popup Facebook Likebox widget. Facebook has given a lot of benefits to pro bloggers, so take this advantage today by adding this useful widget to your blogger blog (blogspot). For this you have to follow some simple steps.
How To Add jQuery LIGHTBOX Popup Facebook Likebox To Blogger
1. Login to blogger.com
2. Click on Dashboard
3. Click on Design Tab
4. Click on "Add a Gadget"
//*MakeSomeSense Lightbox Style Popup Facebook Likebox Widget**//
<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/AVvXsEgAQi3O-lVqjmBfnCpHzXAUy4FH-vDaN5EOHaJryeHaIaRK2GqA7nQDCCtTvcobieJQ76tJokMY-8KRpampJ11_jKG7V24H0WzjG03WEffW1turGGN5mjoBm2nC8AsPnK7GrcVHLmXK2ejw/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIhTI-YSg_6TdJnWJuOtes1cAlTN6IoIwRdCCPAVEZ-mE00xTEKbHN78A89O5MncUhHuWL6mCnyAwSfXDr_xQgg_CI4vOceh0XPHdHtPwyReMJyibc7g8dS81xxFg2WVC39Hb5lKffDXWO/s1600/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAQi3O-lVqjmBfnCpHzXAUy4FH-vDaN5EOHaJryeHaIaRK2GqA7nQDCCtTvcobieJQ76tJokMY-8KRpampJ11_jKG7V24H0WzjG03WEffW1turGGN5mjoBm2nC8AsPnK7GrcVHLmXK2ejw/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAQi3O-lVqjmBfnCpHzXAUy4FH-vDaN5EOHaJryeHaIaRK2GqA7nQDCCtTvcobieJQ76tJokMY-8KRpampJ11_jKG7V24H0WzjG03WEffW1turGGN5mjoBm2nC8AsPnK7GrcVHLmXK2ejw/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIhTI-YSg_6TdJnWJuOtes1cAlTN6IoIwRdCCPAVEZ-mE00xTEKbHN78A89O5MncUhHuWL6mCnyAwSfXDr_xQgg_CI4vOceh0XPHdHtPwyReMJyibc7g8dS81xxFg2WVC39Hb5lKffDXWO/s1600/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAQi3O-lVqjmBfnCpHzXAUy4FH-vDaN5EOHaJryeHaIaRK2GqA7nQDCCtTvcobieJQ76tJokMY-8KRpampJ11_jKG7V24H0WzjG03WEffW1turGGN5mjoBm2nC8AsPnK7GrcVHLmXK2ejw/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAQi3O-lVqjmBfnCpHzXAUy4FH-vDaN5EOHaJryeHaIaRK2GqA7nQDCCtTvcobieJQ76tJokMY-8KRpampJ11_jKG7V24H0WzjG03WEffW1turGGN5mjoBm2nC8AsPnK7GrcVHLmXK2ejw/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAQi3O-lVqjmBfnCpHzXAUy4FH-vDaN5EOHaJryeHaIaRK2GqA7nQDCCtTvcobieJQ76tJokMY-8KRpampJ11_jKG7V24H0WzjG03WEffW1turGGN5mjoBm2nC8AsPnK7GrcVHLmXK2ejw/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/AVvXsEgCX-lPABmvq7WE7amWSfiJT38R5kaeBsPvD2AQsFjLhHzaN3kGYUNTtCFwK4PRSg72P8F07PKC9OQNp0XD_YG5pA_YyioJMTdhjSEWXE3_t4Pz50U8JSCx3lmJvkFCcRPh4up9GgJRiBbN/s1600/loading-background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhASjpuwBI2pg6zngVU5eHAPJ6EBprRTFocnlNXuG3jDxwkGp0Rvm9ugHviQkq0f8h758hY0Fb5O5wBqy3TuP_qB1ji6dLTo8B90Nm_K_jPRYLriQXW7wEOf0CnD9oegJVfVSvcFM5lHNC_/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/AVvXsEgAQi3O-lVqjmBfnCpHzXAUy4FH-vDaN5EOHaJryeHaIaRK2GqA7nQDCCtTvcobieJQ76tJokMY-8KRpampJ11_jKG7V24H0WzjG03WEffW1turGGN5mjoBm2nC8AsPnK7GrcVHLmXK2ejw/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.5/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/AVvXsEi3TrUb4szmrOm8ASIcvDsHA_4uA7ABrqosZYDSktXCo3Sg320aeB9ldHUIzdLdB6HzearB3V0BXbUkjFNoqEJUnrYDCD2VEdZidF6PAZr5bCshW-OKIg3GUEF_Xymi0N6cWSCswpGcPNh3/s1600/LikeUsOnFacebook.png" width:300px; height:150px;"/></center>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fmakesomesenseblog&width=300&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&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:35px; font-size:4px;" >Powered By <a style=" font-size:5px; color:#3B78CD; text-decoration:none;" href="http://www.makesomesense.com">Blogger Widgets</a> | Customized By: <a style=" font-size:5px; color:#3B78CD; text-decoration:none;" href="http://www.makesomesense.com">Blogging Tips</a> </p>
</div>
</div>
5. Now simply change the word "
makesomesenseblog' with your own Facebook fan page name.
6. Save it.
Customization: This Facebook widget saves up a cookie in the visitors computer. You can also change the frequency. Just change the number 7 to the number of days your wish. If you want your Facebook widget to reappear after 30 days after the first time than simply change 7 to 30.
Work Done!
