Static popout facebook fanpage like box with hover effect for your blog

Most of blogger using facebook fanpages to promote their blogs.This is great and cool widget.I think the common facebook like box get more time to load than this.You can see I have add it to my blog.When your mouse point go over that facebook badge it will apear.If you like our blog don't forget to like us on facebook when you checking it.Let's see how to do this.


First go to Design>>>>Edit html
Then press ctrl+f and seach for tag.
Then paste the this code before </head> tag

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

Now save your template and go to design
click add a gadget and select html/javascript
 Then paste this code in 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/AVvXsEi5Sy-lrm-Y8Fkf6FKKExerR27AmWYPaRGUBeLSwXMzlvuwSs5v78_-3XcQPrqAz6gBzRf8oJDzFEwXXk1Wq-jngaX5KTIRlYcJlQLA0lle5rrSuHTFA7dFaHJBFWcKFg_kLRri8Cu8jT0/s1600/w2b_facebookbadge.png") 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=https%3A%2F%2Fwww.facebook.com%2Fpages%2FComputer-tricks77%2F233018603411493&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><span>By <a href="http://www.way2blogging.org/">Way2blogging</a> / <a href="http://www.way2blogging.org/2011/06/add-static-facebook-pop-out-like-box.html">+Get This!</a></span></div></div>

Replace the 233018603411493 wih your facebook fanpage id


How to find fanpage ID

Copy and paste your fanpage url in to a notepad

It will look like this

https://www.facebook.com/pages/your fanpage name/fanpage id number

See my fanpage url

https://www.facebook.com/pages/Computer-tricks77/233018603411493

"233018603411493" is my fanpage id.

I think every one can find it easily now.Share this with your friend.Don't forget to say thanks if you got something

Posted in: Blogging