Floating widget for facebook like box
11:52 PM | 
Posted by
Sabin Bhatta |
![](http://4.bp.blogspot.com/-3MxMMVxk2VA/TzYIlQd5rfI/AAAAAAAAAro/TkvqW-U20So/s1600/postediticon.png" ){kind=small}
Facebook
is one of the most famous social networking sites in the world. Many bloggers
now days use Facebook to drive traffic to their blogs by publishing their feeds
and post to their official facebook fan page.Generally when we move around
another blog/sites,we can find their respective facebook like box of their page
mostly entitled as “Follow us on Facebook”.
In this post I came up with new floating widget for managing those fan page which requires almost no space and it looks more attractive than that of simply keeping the like box.This widget further helps to increase the number of fans and gives your blog a smart layout.
If you want this widget in your
blog. follow the given instructions
Step 1: Adding Jquery JavaScript Plugin
- Sign in to blogger
- Go to design>Edit HTML
- Find the </head> tag (press ctrl + F to open the find box and copy the code to find box for quick finding)
- Below that code copy the given code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
Step 2: Adding Widget Code
it's Simple
Replace my facebook page URL below with the URL for your page.
(Note:- Facebook URL Must starting with "http://" and it contains no space or illegal Characters )
That’s it……..Enjoy…..
Please
Comment regarding this post.Feel free to comment if you have any problem or
views regarding any post……
Labels:
18 comments:
Thankjs.
how can i float this widget in left side?
@Admin
Go to page elements and just open the gadets and you will find css codes like
.w2bslikebox{background: url("http://1.bp.blogspot.com/--tscpVzcBjo/TdUarKtcAlI/AAAAAAAAA3I/qVkypiYO9rc/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;}
Change all "right" to "left"
Thanks for your widget tutorial. I installed it in my Site and it's working fine
Thanks for the Share ,i had Used this In My Tech Blog
Many thanks
Thanks
visit my site http://www.hdwallbase.com
What if you wanted to add this code to a website out side of Blogger how would you do that?
@AnonymousFor that you need to just add the css code(to be placed in head section or can be placed in external css sheet) i.e
<style type="text/css">
.w2bslikebox{background: url("http://1.bp.blogspot.com/--tscpVzcBjo/TdUarKtcAlI/AAAAAAAAA3I/qVkypiYO9rc/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>
IT's script code(to be placed in head section) is
<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>
and this is the code to be placed in body section
<div class="w2bslikebox" style=""><div><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FYOUR PAGE USER NAME&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>By <a href="http://www.sabinbhatta.blogspot.com/">Sabinbhatta.tk</a> / <a href="http://sabinbhatta.blogspot.com/2011/10/floating-widget-for-facebook-like-box.html">+Get This!</a></span></div></div>
Note;-replace YOUR PAGE USER NAME with your own page user name for example like meroblog
Wonderful stories, keep them coming :) This is the very first time i have commented, b¨´t i have been lurking for a while.
Post a Comment