UPDATE 10/18/2010: I’ve updated the image files. The link below should redirect you to the newer version.

Social media integration with your website is very important, but where do you put the links to your Facebook page or Twitter account?

The usual method of placing a few buttons or two on your sidebar helps with their visibility, but I’ve found a better way to do it: fixed position side tab buttons.

That’s a long name for it isn’t it? Here’s what it looks like:

Here’s what it looks like in action on Postertext.com:

The concept is simple: When the webpage is scrolling up and down, and there are elements that do not move (remaining in a fixed position), the elements that are not moving immediately grab your attention. For example, I’m pretty sure you’ve come across those nifty Feedback tabs that sit on the sides of a website. You remember it because it jumps right out at you. Hell, I’ve even clicked on it before. Now, you can do the same for your social media buttons.

Here’s how to do it:

1) Download the necessary button images here (I’ve also included the .PSD files):  http://peterkao.com/documents/Fixed-side-tabs-v2.zip

2) Upload the images to your server.

3) Copy and paste the following CSS code into your style sheet. Remember to change the URL path of the images! Also, you can switch the position of the tabs from the right side to the left side by changing “right” to “left.”

/* ==== START Side tabs buttons by Peterkao.com ==== */

#fbtab{

background: url(http://postertext.com/sites/all/themes/frame/images/Like.png) no-repeat; /* Path to Image */

right:1px;  /* change this to left: 1px; to put it on the left of the screen */

top:275px;height:45px;width:32px;margin:0;padding:0;position:fixed;z-index:5000;}

#fbtab a{display:block;width:100%;height:100%;}

#twtab{

background: url(http://postertext.com/sites/all/themes/frame/images/Follow.png) no-repeat; /* Path to Image */

right:1px;  /* change this to left: 1px; to put it on the left of the screen */

top:328px;height:45px;width:32px;margin:0;padding:0;position:fixed;z-index:5000;}

#twtab a{display:block;width:100%;height:100%;}

#rsstab{

background: url(http://postertext.com/sites/all/themes/frame/images/RSS.png) no-repeat; /* Path to Image */

right:1px;  /* change this to left: 1px; to put it on the left of the screen */

top:381px;height:45px;width:32px;margin:0;padding:0;position:fixed;z-index:5000;}

#rsstab a{display:block;width:100%;height:100%;}

/* ==== END Side tabs buttons by Peterkao.com ==== */

4) Insert the following HTML code just before your closing </body> tag of your website. Again, remember to change the URL to your own:

<!– START Side tabs button by Peterkao.com –>

<p id=”fbtab”><a href=”http://facebook.com/MYURL”></a></p>

<p id=”twtab”><a href=”http://twitter.com/MYURL”></a></p>

<p id=”rsstab”><a href=”http://MYURL.com”></a></p>

<!– END Side tabs button by Peterkao.com –>

Your all set!

This will work for all browsers except for Internet Explorer 6, which Microsoft is killing off anyways.

Enjoy!

PS: I first found out how to create these tab buttons here, and extended it to include more social media buttons. Credit goes to schoberg.net!

- Peter Kao

Related Posts

• HOWTO: Fix upload errors for Wordpress on sites hosted on Nearlyfreespeech
• Twitter for Entrepreneurs
• HOWTO: Configure Microsoft Exchange and Outlook Web Access for Thunderbird