Facebook “Fan Us” fixed position side tab button

Mar 20 2010

Recently I’ve been seeing these “feedback” tabs fixed to the left or right side of websites that open up customer feedback forms by companies like UserVoice. While browsing websites that use this product, these buttons have really gotten my attention. So I thought.. why not make one to promote a website’s Facebook Fan Page, so more users become a fan? So I did, and here’s the code :)

Examples

Hotel Spinner Example

First I’ll show you a live example on a production website. We have it running on the detail pages of our site, Hotel Spinner. See how the tab stays in the same position on your screen no matter where you scroll? It’s a pretty sweet floating effect that’s quite hard to ignore, and that’s why it’s so effective. (Oh and while you’re checking out the demo, you might as well become a fan of Hotel Spinner ’cause it rocks!)

Basic Example

I’ve also put together a basic example where you can view all the code without all the clutter. (Experts can grab what you need here and have this up in 2 minutes.)

How To Install the Facebook “Fan Us” (Become a Fan) fixed tab / button / can’t get it off my screen thingy

Step 1.

Right click and save this image to your computer. Then, FTP it into the images folder on your website.

Step 2.

Insert the following CSS into your style sheet. Be sure to set the image path to the location of the Facebook “Fan Us” image you downloaded in Step 1.
Hint: To make your tab on the left side of your page change the “right” to “left” in the css below. 

/* ==== START Facebook Tab by Schoberg.net ==== */
#fbtab{
background: url(icon-fbtab.png) no-repeat; /* Path to Image */
right:1px;  /* change this to left: 1px; to put it on the left of the screen */
top:40%;height:41px;width:30px;margin:0;padding:0;position:fixed;z-index:5000;}
#fbtab a{display:block;width:100%;height:100%;}
/* ==== END Facebook Tab by Schoberg.net ==== */

Step 3.

Finally insert the below HTML just before the closing </body> tag of your website. Be sure to update the href value to the destination of your Facebook Fan Page.

<!-- Start Schoberg.net Fb Tab -->
<p id="fbtab"><a href="http://facebook.com/hotelspinner"></a></p>
<!-- End Schoberg.net Fb Tab -->

Compatibility

This code will works perfectly in all modern Mac and PC browsers including: IE7+, Firefox, Safari, Chrome, Opera, etc. Basically it just doesn’t work in (the finally dying) IE6 since it doesn’t support position:fixed; without a bunch of hacks.

The image is an 8bit Transparent PNG that will look good on both dark and light backgrounds.

Taking it Further

This concept doesn’t just have to be for your Facebook Fan Page. It could easily be extended to promote anything you want. (Think: Twitter, mailing list signup, RSS feed, featured product, donation cup, your sister-in-law’s candle company) The possibilities are really endless.

To do this is simple. Create your own image. Tweak the css to the height, width and path of the new image. Then change the href in your html to point at whatever you want. Shazam!

Are you using the Schoberg.net Facebook “Fan Us” Tab?

Let me know if you’re using it and I’ll link up the best sites in this post!

Did you enjoy the post? Why not or subscribe to my RSS feed?

Filed under: Web Design | Social Tags: ,

56 Replies to “Facebook “Fan Us” fixed position side tab button” Reply Now »

Mar 20 2010

BEBEN says:

3:25 pm

it can be do like this, and add on your body tag
<a href=’http://facebook.com/hotelspinner’ style=’display:scroll;position:fixed;top:XXpx;right:XXpx;’ target=’_blank’ title=’Follow me on Facebook’><img alt=” src=’http://Your-link-pic.png’/></a>

Mar 20 2010

Jesse Schoberg says:

3:43 pm

@Beben
Yes you could put the style inline, but I find it’s better practice to separate the CSS from the HTML. Also note display:scroll; is not valid (or needed). And in practice I found that it’s best to have a z-index declared as well.

Mar 21 2010

thesydneygirl says:

6:03 am

i’m having some trouble with it on blogger :(

Mar 21 2010

Jesse Schoberg says:

12:50 pm

@thesydneygirl
I’m not very familiar with the template system on Blogger… can you be a bit more specific of the problem? or do you have an example of where you’ve put the code?

Mar 22 2010

BEBEN says:

12:22 pm

thanks for your input…i see i see
that’s true, HTML for blogger little different method…:)

Mar 22 2010

Jesse Schoberg says:

12:29 pm

@beben
Yea I talked to her via email and got it working. She tweaked it to show some other icons.  It turned out great!

May 04 2010

TONY says:

5:07 pm

Hi, thanks for this but how would this work with 2 links and a mouseover effect like on http://www.llow.it/ ?
thanks in advance

May 04 2010

Jesse Schoberg says:

5:14 pm

Hi Tony,

You’ll have to set up 2 instances in the HTML and the CSS with different IDs referenced. Then you’ll need to alter the top: to space them apart. To get the hover effect I’d suggest moving the background: to the #fbtab a and then creating a #fbtab a:hover with a different background image or better yet using an image sprite.

May 10 2010

Heidi says:

7:06 pm

Do you have any ideas why in IE  8, the fan us facebook is stuck on the bottom instead of behaving the way you describe.   It works fine in Firefox.   The link:
http://campfirebayresort.com/lodge.html

May 11 2010

Heidi says:

1:28 pm

nevermind.  I think it got working.

May 12 2010

denise says:

11:06 pm

can the like button be mounted the same way?

May 13 2010

marc says:

10:04 pm

Hi,
Can’t get it working. Do i include these  */ before and after path. AND, does path start with http etc… or just www. etc…
Last but not least, I have a </body> tag in the

Footer (footer.php)
Header (header.php)

which one should I choose?

Thanks for your patience. i am new at this

May 14 2010

Jesse Schoberg says:

2:04 pm

@Denise.. yes it could but you’d have to tweak a few things.

@Marc… You should not have a </body> tag in the header.php file. The code should go in the footer.php file. For the path you’ll need to make to wherever the image is located. A good tip would be to see how the other images in your stylesheet are linked. Then use the same format and put your fb image in the same folder.

Jun 01 2010

jagvist says:

12:33 pm

Thanks for this tutorial, I have been trying to learn to do this without java script for quite some time.
 

Jun 16 2010

Justin Dupre says:

3:10 am

You got a great idea! I’m going to try this out.  I have a few new ideas to do something with this to promote other websites.

Jul 27 2010

stupidcube says:

9:06 am

Jesse,  thanks for this awsome snippet of code.  Your explanation is quite good as well as I like your cut and paste approach.  You’re a good tutorialist (is that a word?), seriously props on this!
 
Cheers!

Aug 15 2010

Peter Kao says:

11:28 pm

Hi – thanks for your tutorial! I wrote a tutorial of my own using your method. It offers more social media buttons like Twitter and RSS. You can also download the original Photoshop (.PSD) files as well for editing.

Check it out: 
http://peterkao.com/2010/08/13/howto-add-fixed-position-side-tab-buttons-to-your-website/

Aug 17 2010

Jesse Schoberg says:

2:29 pm

@Peter – Good work Peter!  I’ve been meaning to update this with “Like” and also a twitter option. But you’ve beat me too it. The only thing you might consider is combining those into one image with the image sprite method to reduce server requests. Nice Job :)

Sep 20 2010

Rob says:

9:29 pm

Thanks man. Worked good for me. I added FB and twitter.  Will probably add a blogger and contact us link. Think it will slow down the site?
 

Sep 21 2010

Jesse Schoberg says:

10:25 am

@Rob -  Looking good on your site! One suggestion for you and anyone putting multiple on a page is to set the top: values to a px instead of a %. This way different screen heights do not have issues with overlapping icons. And no, adding another will not slow down your site.

Oct 13 2010

Amanda says:

6:54 pm

I don’t have an html code to go by. How do I write it correctly?

Oct 13 2010

Jesse Schoberg says:

6:57 pm

@Amanda – Please see Step #3 for the html.

Oct 13 2010

Amanda says:

7:17 pm

I did. I don’t have a <body> </body> section to insert it into or any html. (I use Hostbaby wizard) + it won’t go lower on my page. It just stays at the top.

Oct 19 2010

shreyans says:

11:58 am

Hi Jesse,
Am unable to add it on my blogger… However you can have a look at the other widgets i have on it!
I am unable to understand where should i add the code that you have given and which is the text that is to be removed.
Please help at the earliest..
Loved http://peterkao.com/ work too…
But again he has it in CSS. Can i get it entirely in HTML? Coz i guess bloggre has the edit HTML option only.
Awaiting reply!
 

Oct 22 2010

Beben Koben says:

7:16 am

i found code like it…
Kode CSS:
#trik_pojok {
position:fixed;_position:absolute;top:30px; right:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth – offsetWidth); }
Kode HTML:
<div id=”trik_pojok”>
—content—
</div>
how about that???

Feb 28 2011

Matt Silva says:

7:13 pm

This is not working for IE 7 & 8 on a PC, but fine for FF… and fine for all MAC browsers.
 
With IE on a PC it shows on the bottom left and not fixed

Mar 09 2011

pamuji99 says:

11:35 pm

info sidetab…thank share your site

May 14 2011

Maka says:

8:22 am

i dont know what i m doing wrong, but it doesnt work for me :(
 

May 25 2011

goseethem says:

11:53 pm

thanks for this, I got it working pretty quickly.

Jun 03 2011

Lasting Rose says:

4:13 pm

Cute little coding trick, useful foe many things at the same time.
I got it installed in Blogspot after some tweaks
http://lastingrose.blogspot.com/

Don’t know if it will work for seperate multiple tabs, can’t see why not by repeating with different images

Jun 08 2011

John Arturo says:

7:29 pm

Awesome, thanks a ton for this!  Now just have to figure out how to have multiple links on one image…

Jun 24 2011

Jason Krue says:

5:37 pm

Terrific tip – thanks a lot for sharing this tip with the rest of us. Great to see many people like Jesse willing to share.
Thanks man.

Jul 08 2011

Daniel says:

2:42 pm

any idea on how I can do this on shopify with liquid & css? Thanks

Jul 13 2011

Daniel says:

2:02 pm

I figured it out! I just didn’t realize that I had to put the first part within my <style> tag.  Thanks for this, it’s great!

Oct 04 2011

Kevin says:

5:17 pm

Thanks works like a charm!

Oct 30 2011

forummaker says:

11:58 am

Just what I’m looking for! But… I can’t get it to work properly in IE8. The image sits at the bottom of the page. Any help would be greatly appreciated. Thanks again.

Nov 17 2011

niki says:

9:56 am

It worked perfect for me :) Tnx so much for sharing this great tip!!

Feb 07 2012

TonyaTko says:

11:43 pm

I’m designing a new site on 3d cart. I have gotten Jquery to work for the tab-slide-out…. but I CAN’T get this to work.

I’ve tried Peter Kao’s version first & that didnt work either.
I’ve tried:
=Placing the CSS portion of the code in the section that controls the body of the website.
=The head, footer & side navs.
=Using the exact url of an image which DOES show up on the site
 
and Still, I can NOT get this coding to work at All. It doesnt show up on the bottom, on the top, on the left nor right. It shows up no where… like I never input the code at all.

Not sure what Im doing wrong.
Any help would be greatly appreciated

-Tko

Feb 08 2012

Jesse Schoberg says:

5:23 pm

Can we get a url to where you have the code?

Feb 09 2012

TonyaTko says:

10:43 am

 
I erased it yesterday, but I’ve just recreated it.
the site is
http://tkoskin.3dcartstores.com/
I have input both your and peter’s coding
this is the location of the fb tab
https://tkoskin.3dcartstores.com/admin/thumbnail.asp?file=../assets/images/socialmediaicons//fb_60.png
The site uses the (..) to indicate the url before it. Not sure why the double (//) before the file name. But I have tried many different versions of this, with the // with one /, I’ve tried with the complete URL… Nothing seems to work.
I tried using only peter’s, then only yours, I’ve tried the URL to the icons which DO show up at the bottom of the screen, they didnt show up on the side. I have tried this 37 different ways and nothing seems to work..
 
so, if you can figure out something, I’ll be glad to try 3 more times :)
-Tko
 

Feb 09 2012

Jesse Schoberg says:

10:52 am

@Tko  It’s just an issue with your path due to the structure of the cart template system. Change that line in the css to:

background: url(/assets/images/socialmediaicons/fb_60.png) no-repeat; /* Path to Image */

Feb 09 2012

TonyaTko says:

11:02 am

THANK YOU!! I Could just Kisss You!! It worked..! :-D
But :-(
Im trying to get Peter’s code to work because his has all of the icons I need. Any input on that?

Your coding is working with the change you made above… but Peter’s is still on the fritz.

-Tko

Feb 09 2012

Jesse Schoberg says:

12:08 pm

@Tko Well I see two issues with the code there. First it looks like you have angled quotes in the html instead of straight ones. This could be a copy paste issue. I would suggest just backspacing them and typing new ” for all his html. Also you don’t seem to have any css in there for those right now. Just be sure you do image paths like the one I put above and you will be set :)

Feb 09 2012

TonyaTko says:

1:19 pm

Wow Jesse! You are so smart!!

Im so glad I didn’t give up: Because now it works!!
It took some playing around with the code to realize that the
height:41px;width:30px
Was not the size of the icon, but of what would be displayed of the icon.
also, the left, right appears after each image (for peter’s version) and must be changed.

This is Amazing! My website is going to be so beautiful.
One last thing… would you happen to know how to control the size of the image displayed?

Once I can control that, I am ALL Set!
Also… would you happen to know… some websites have the # of the amount of pple who “Like” a page displayed.
Like this: http://artofmanliness.com/2012/01/03/a-resolution-for-romance-the-52-loves-notes-challenge/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+TheArtOfManliness+%28The+Art+of+Manliness%29%2F/

You both have done a fantastic job and as a newbie I’ve learned a lot.

I hope other newbs who cut and paste will read this portion and fix their quotation marks.

Again… Thank you! You’re the greatest. Don’t ever let anybody tell you any differently! :-D

-Tko
 

Feb 09 2012

Jesse Schoberg says:

1:24 pm

@tko  This setup does not control the image size. You need to actually change the size of the image itself in an image editor to resize it. Then those height / width items should be the same as the image itself. Also you are opening another can of worms with the count display. To do that you need to bring in the Javascript from Facebook which is bascially like starting over :P

Glad you were able to get things going though :)

May 23 2012

ismail says:

8:45 pm

i’m going to try it …. :)

Jun 05 2012

ismail says:

10:54 am

this work thank you very much…. :D

Jun 05 2012

lyndon says:

12:46 pm

i have the facebook tab, but there is a light hover over it? can any1 help me out with this?

Jun 06 2012

arthurmani says:

5:36 pm

Hi, is there a way to replace the image by a facebook like box?
Many thanks!

Sep 09 2012

Darse Nizami Online says:

3:43 pm

Gooooooooood  Work

Mar 29 2013

ray says:

6:42 pm

Works brilliantly. Will be adding this to my new design site soon :-)
 
 

Leave Your Response

If you want your own icon get a gravatar.

  Next Post »
« Last Post   

About Schoberg

Jesse Schoberg

Jesse Schoberg is a web developer. He founded LJ Host in 2001. He has a passion for CSS and other web technologies.

More About Schoberg