Add a floating Facebook like box to your blogger blog

Tweet

The floating facebook like box can be made to float on either side of the blog depending on which sidebar you paste the code. Just follow the steps to implement it on your blog.

1> Go to your Blogger Account.

2> Edit HTML --> Template

3> Using Ctrl+f, find a code like this :

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

4> If it's there, then you don't have to add the code. Else, add the code just above </head> line.

5> Then go to your Layout --> ADD THE CODE BELOW INTO A HTML/JAVASCRIPT GADGET in any one of the sidebar.

<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/AVvXsEiqtXoEbqmcs6v9tGQd78hxEtkymhQbw1hiO7l3vl0ztO2fFdfngKjC0fwgqeovz0Fe_WRwlid_o4fWR1BM8HaLSI73Sg16S3htJeXZIJr1xeZWNUW6a7LhaDfdPz-3j4U0AxrIPDFgaRD9/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%2FYOUR-FACEBOOK-PAGE-USERNAME&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe></div></div>

5> Provide your facebook fan page username in the place highlighted in red , otherwise, the code won't work.
 
6> Then Save the gadget and view your blog to see the effect.

Posted in: blogging tips , HTML , Javascript