How to Add a Floating Facebook Like Box in Blogger?

SOCIALIZE IT →

Tweet

---

In last facebook tutorials, I shared how we can add facebook like buttons with like count in blogger blog. In this tutorial, my focus is on facebook like box. There are number of tutorials around the web with different style of Facebook like Box. I also come up with a floating facebook like box. This is very usefull for those Blogs which wants to add more and more widgets and have no space for facebook like box and also looks very attractive. It floats on right side and on Hover we can see it. This widget uses built is JavaScript and HTML, CSS and JQuery. Follow the simple steps below to add this widget in your blog.

Adding Floating Facebook Like Box in Blogger

There are two steps:

1. Adding jQuery Plugin
2. Adding Widget Code

Adding JQuery Plugin

• Sign in to Blogger
• Goto Template > Edit HTML
• Press "Ctrl + F" and find </head> tag
• Before </head> tag add the following code;

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

Warning: Ignore this step if you already have jQuery Code in your Blog.

Adding Widget Code

• Goto Layout > Add a Gadget > HTML /JavaScript
• Add the following code in the content filed;

<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/AVvXsEjQLWLKSj6_qkLjas7K-MJMsGxGjW9TYcI__87FCwLD2ReUa-SMwrY4IX8fag0jCgb79Txa2x0ouxvYT3TUpUUfepGvu1UaglSuj82hhMXtbRe_K_eyWERw5GzxLtXWrkxY5jiBtq_uXmJY/s150/w2b_facebookbadge.png") no-repeat scroll left center transparent !important;display: block;float: left;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"><div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fehowblogger&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=9&amp;stream=false&amp;header=false&amp;height=265" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 265px; width: 245px;background:#fff;"></iframe></div></div>

• Save the Widget.

Customization

• Change ehowblogger with your facebook page name.
• If you want to change the background color, change #fff with your color code.
• Use eHowBlogger Color Generator to choose the color of your choice.

---

Follow @eHowBlogger

Author:

Zaka Ur Rahman

Get Latest Updates

For Further Reading,

Widgets