Today I was searching for a Facebook widget for my blog and Here is an interesting Facebook widget which I found on Internet, It's really great and attractive. It's actually a floating box with Facebook logo on it, When you hover mouse pointer on it, A like box appears with a slide.
It looks awesome, Doesn't take time to load and really attractive. This widget will sure bring lots of likes on your blog fan page, I really liked it and I've personally used it on my blog.
For a Live Working Demo, Click the button below.
Do you want to get this widget for your own Blog? Today In this Post I'll show you How to get it. This widget belongs to MBT
Things You'll Need
- A Facebook Fan Page with Username.
- A Blogger Blog
- Few Minutes time
Before we can begin, You should have a facebook fan page with custom username.(example: www.facebook.com/theArea51blog). If you don't have it yet then Click Here for a tutorial.
How to Get Floating Facebook Like Box
Step 2: Now Click on Add a Gadget and choose HTML/Javascript Widget.
Step 3: Now Paste the following code inside the widget.
<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/AVvXsEipc9L3NJdSrDa6dHz6mn2ha4n8JhN2Cvk4pgMqSrD2O0wmeOJ-b6QMDKvKwXoyYnBuebjfvU0ZjV89q6LsRn1OG96w6h8mtp04CxGsK8tcThp8A-WBCeWNlJEitdIHuf-s5Hv7Nz0PuHxM/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%2Fthearea51blog&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: 255px; width: 245px;background:#fff;"></iframe><span></div>
Step 4: Now Just Replace thearea51blog with your own facebook username (eg: facebook.com/username) and Save Widget.
Step 5: Again Go to Design Tab > Edit HTML
Step 6: Now Add the following Script just below the <head> in your Template.
Now you'll see a facebook logo on right side of your blog, Hope you liked this Tutorial, I tried to make it as simple as I can. So please Share it with your Friends using the widget on left.
Step 5: Again Go to Design Tab > Edit HTML
Step 6: Now Add the following Script just below the <head> in your Template.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>Step 7: Click on Save Template.
Now you'll see a facebook logo on right side of your blog, Hope you liked this Tutorial, I tried to make it as simple as I can. So please Share it with your Friends using the widget on left.
Please Like our facebook page if you liked this Turorial.
Credits: This Widget Belongs to MyBloggerTricks.com and the code was developed by Harish from Way2Blogging.org. Thanks to these guys for creating such cool widget.
About Jimmie Luthra
Blogger Comment
Facebook Comment