jQuery Popup For Facebook LikeBox

Update: Version 2 has been released. Please find it here: [a href="http://www.mybloggertricks.com/2012/01/jquery-facebook-likebox-popup-for.html" target="_blank"]Facebook Likebox popup V2[/a]

---

[a href="http://editor.mybloggertricks.com" target="_blank"]Try it now![/a]

How it works?

/*-----------------------------------------------------------------------------------*/
/*   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-title {
   color: #F66303;
   font-size: 20px !important;
   font-weight: bold;
   margin: 10px 0;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:10px;
line-height:25px; font-family:arial !important;
}
.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='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>

<script src="http://mybloggertricks.googlecode.com/files/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*30;
       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;'>
        <h3 class="box-title">Receive all updates via Facebook. Just Click the Like Button Below<center><p style="line-height:3px;" >▼</p></center></h3> 
      <center>

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fbloggertricks&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:35px;  font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.mybloggertricks.com">Blogger Widgets</a></p>
</div>
</div>

 

Make this simple change:

• Replace bloggertricks with your facebook username.

Update: If your Facebook URL is too long and contains numbers then you may first create a branded Facebook username in seconds at [a href="http://Facebook.com/username" rel="nofollow" target="_blank"]Facebook.com/username[/a]

   5.   Hit the save button. Drag the widget to anywhere on your right sidebar.

     6. Click the orange save button towards top right.

done! Visit your blogs to see it poping up just beautifully. To review the widget just delete your browser cookies and refresh the page to see it appearing again.

Want the widget to appear Repeatedly

If you want to prompt the likebox every time the visitor enters your blog then simply delete this *30 from the code above.

Do let me know if you needed more help. Peace and blessings pals! :)

Source: http://www.mybloggertricks.com/2012/01/jquery-popup-for-facebook-likebox.html