JSFiddle - React, Tailwind, and code Playground
HTML
<div class="w2bslikebox">
<div>
<iframe frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fask4pc&width=245&colorscheme=light&show_faces=true&connections=9&stream=false&header=false&height=270" style="background: #fff; border: medium none; height: 270px; overflow: hidden; width: 245px;"></iframe><a href="http://ask4pc.blogspot.com">Blogger Hoard</a>
</div>
</div>
CSS
.w2bslikebox {
background: url("http://1.bp.blogspot.com/--tscpVzcBjo/TdUarKtcAlI/AAAAAAAAA3I/qVkypiYO9rc/s150/w2b_facebookbadge.png") no-repeat scroll right center transparent !important;
display: block;
float: left;
height: 270px;
padding: 0 46px 0 5px;
width: 245px;
z-index: 99999;
position:fixed;
left:-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;
left: 70px;
text-align: left;
z-index: 99999;
}
.w2bslikebox span a {
color: gray;
text-decoration:none;
}
.w2bslikebox span a:hover {
text-decoration:underline;
}
JavaScript
jQuery(document).ready(function () {
jQuery(".w2bslikebox").hover(function () {
jQuery(this).stop().animate({
left:"0"
}, "medium");
}, function () {
jQuery(this).stop().animate({
left: "-250"
}, "medium");
}, 500);
});