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%20side%20tabs.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

Here’s another website that uses the Twitter model: it’s called Sprouter - just launched this week!

Check out their video tour.

I don’t use Twitter anymore, but I’m enjoying this neat little startup though. With Twitter, there is too much noise from too broad of  a network. All I see when I log in to my Twitter account are short, barely-descriptive statuses written by bored people. Too often I see the extended version of these statuses on Facebook, so why even bother logging in at all? (More beef on Twitter later in my upcoming blog post)

I think Sprouter (and also Yammer) did exactly what Twitter needed to do, but didn’t: divide and conquer. There is a need for micro-blogging, but it is important for users to sift through the sea of statuses. Twitter could have done that by implementing filters to segment different interest groups, but they decided to invest in the unfamiliar realm of real-time search instead. This is great, but it requires active involvement – the act of ‘searching’ – too bad people are lazy online!

In the near future, there will be more and more startups applying the micro-blogging concept (or Twitter model). And Twitter will be a dead bird – a martyr for micro-blogging – the Youtube comments of the internet.

You can follow me on Sprouter here: http://www.sprouter.com/peterkao

Peter Kao

I just arrived in Taiwan and checked Facebook to see this ad:

What this means is that the kind of ads displayed is determined by the IP of the viewer. Now, I’m not sure whether the ads are contexual or not, but it sure doesn’t seem like it!

- Peter Kao

One more final to destroy then I'm off for Taiwan for Christmas!

On a side note, I just came across this picture which describes Facebook in 30 years:

Click here for a larger version.

Good luck on your exams!

- Peter Kao

I would like to say…THANK YOU FACEBOOK and it’s about !@%(* time.

I remember the beginning few weeks of using Facebook was a chore since I had to come up with phrases starting with only “is” to describe my ‘status’. I had to change it everyday, because it was the cool thing at the time so naturally that made things even worse. But I believe I became mentally sharper and 120 times of a greater man after being introduced to Facebook since I now can describe anything in any situation with phrases that start with “Peter Kao is”

Anyways, all your headaches are gone! And it’s all because of a Facebook group called, “Petition to Get Rid of “is” from Facebook Status Update!“

The collective voice triumphs yet again!

- Peter Kao