Left Floating Fan Page for Facebook
I found a popular script in many places that describe how to add a pop-out hover tab for facebook like button but they were all for the RIGHT side of the screen and I wanted this on the LEFT. With a little time and experimentation I managed to get this working the way I wanted.
This is the code I used:
[code]
<script type=”text/javascript”> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(“.likebox”).hover(function() {jQuery(this).stop().animate({left: “0”}, “medium”);}, function() {jQuery(this).stop().animate({left: “-250”}, “medium”);}, 500);}); /*]]>*/ </script> <style type=”text/css”> .likebox{background: url(“http://**IMAGE_URL**/facebookbadge_left.png”) no-repeat scroll right center transparent !important;display: block;float: left;height: 270px;padding: 0 24px 0 5px;width: 245px;z-index: 99999;position:fixed;left:-250px;top:10%;} .likebox div{border:none;position:relative;display:block;} .likebox span{bottom: 12px;font: 8px “lucida grande”,tahoma,verdana,arial,sans-serif;position: absolute;right: 7px;text-align: right;z-index: 99999;} .likebox span a{color: gray;text-decoration:none;} .likebox span a:hover{text-decoration:underline;} </style> <div class=”likebox” style=””> <div> <iframe src=”http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2F**FACEBOOK_PAGE_NAME**&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: 270px; width: 245px;background:#fff;”></iframe> </div> </div>
[/code]
You need to change the following to get this working for your Facebook page
**FACEBOOK_PAGE_NAME**
This should be changed to your page name (note: this script does not work for personal pages)
https://www.facebook.com/**THIS IS YOUR FACEBOOK PAGE NAME**?ref=hl
http://**IMAGE_URL**/facebookbadge_left.png
**IMAGE_URL** should be changed to wherever you host your image file for the hover tab. (shown below)
Please do not link to the image here. It will not remain here long and your page will break. You need this image (or one of your own creation) on your server. If you do use a different sized image you will have to tweak the numbers in the script to have the window display in the correct location.