I found a script online that adds a floating Facebook button to right side of your blogs or websites. The button upon clicking slides toward...
UPDATE: Find the Wordpress Version Here
Add Floating Likebox To Blogger
- Go To Blogger > Design > PageElements
- Click on "Add a Gadget"
- Choose HTML/JavaScript Widget
- Paste the following code inside it,
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCgXZdMOoQgP6HT35vT4OzrQknHqwYEvoBZKW36nqGkKwXGIELdudxdja-F850MiskVg_nYYnk85a4YE1Tu3yVBBfQAkkMtb6xDge9eV1Z5bn9J9C71-BOjbWLUSl5mGNkiGF4mf_xypHe/s150/w2b_facebookbadge.pn") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fbloggertricks&width=245&colorscheme=light&show_faces=true& connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span>Widget by:<a href="http://www.MyBloggerTricks.com">My Blogger Tricks</a></span></div></div>
http://www.Facebook.com/Blogger-Tricks/981736126312983612
If you have not yet created a Facebook Username to brand your Fan Page then create it in seconds by clicking this link Once your create a username then replace bloggertricks with your newly created username
6. Save your widget
7. Now go To Design > Edit HTML
8. Search for <head> and just below it paste the following JQuery code, (You can ignore this step if Jquery Link is already added in your template)
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
9. Save your template and you are all done!
Visit your Blogs to see it floating at the right side of your webpage. I hope this widget helps you in increasing the number of your Facebook Readers. The widget code was created by Harish and reshared at MBT.
Need Help?
If you wish to change the width or hight of the Likebox or make the image changes then do let me know. Peace pals! :)
COMMENTS