Avatar

HOWTO: Add fixed position side tab buttons to your website

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:

fixed position side tab buttons

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

Side tab button 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

Focus on your core business by using websites like Shorttask and Fiverr

There are tasks that you should dedicate time on and there are tasks that are just blatant chores. With online services like Shorttask or Fiverr, you can find people that will get rid of these headaches for you.  The services are cheap too, under $5 for all the offerings I’ve seen.

What kind of helpful services for your business are there? Here are a few:

From Fiverr

- I will make a colorful contact form for your landing page for $5

- I will create a custom logo for your business or website for $5

- I will write a short review of your site and bookmark your site link once on twitter,digg,reddit,stumbleupon, propeller and yahoo buzz for $5

- I will write you a new slogan for your business/product for $5

- I will become a fan and suggest your page to my over 10,000 friends for $5

Right now, I would recommend using Fiverr over Shorttask, seeing there are more people offering services. Although, I guess it doesn’t really matter since you can make postings to request specific services on both sites. Fiverr looks more user-friendly though!

Peter Kao

HOWTO: Sync Your Desktop Across Multiple Computers

I’ve finally found a way to sync files on my desktop, which is where I keep most of my most used docs and latest projects, across multiple computers.

My desktop is like my work desk. It’s crowded, and packed with a lot of junk but I like to call it organized chaos. It becomes a hassle to access project files when they are located on one of my 4 desktops (Windows XP/Ubuntu on VMware, Windows 7 on both my laptop and desktop computer.

Here’s a way to mitigate the problem:

1) Download Link Shell Extensions and install it.

2) Get the free Dropbox account.

3) Navigate with Windows Explorer to your desktop folder that you want to synchronize to the Dropbox server.

The directory path to your desktop folder should be something like this: C:\Users\YourUsername\Desktop or C:\Documents and Settings\YourUsername\Desktop

4) Right click on the desktop folder and choose Pick Link Source as it appears in the context menu.

5) Navigate to your Dropbox folder, which should be located in C:\Documents and Settings\YourUsername\My Documents\My Dropbox unless you changed it during installation.

6) Right click on the Dropbox folder and choose Drop As…then, select Junction.

Now do the same for other desktop folders (or any folder, in fact) to keep them all synchronized!

- Peter Kao

Credit source

HOWTO: Download and Install Paid Apps on Canadian Android Market

Unfortunately, Canadians carrying Android phones don’t have access to paid apps on the Android Market as it is currently open for only the US and UK. This was a huge problem for me since I’m absolutely terrible with directions – I needed a GPS-software on my HTC Hero!
The current “best” GPS-app is the Copilot by ALK Technologies, and sadly I couldn’t pay and download their application. Searching on the Android Market didn’t work. Direct URL via barcode scanning didn’t work. Nothing did! Or more correctly put: there was no simple way of doing it.
In order to access paid applications with a non-US/UK Android you have to do the following:
1. Root your phone
2. Install Connectbot (only if you have an HTC Hero)
3. Install MarketEnabler
Sounds simple right? Not really. Be prepared to set aside an hour or so (it took me nearly 3 hours with lots of Googling. Hopefully this will help you shave off some time).
Are you in your comfy clothes yet? Let’s begin!
1. Root your phone
This will take up most of your time. It will take up even more time if your phone has Firmware 2.73.x.x or above, since you’ll have to downgrade your phone first. There’s currently no way to root your phone from more updated phones.
Since the steps are a bit complicated and long, I won’t paraphrase or try to simplify/clarify the instructions that I’ve found. Instead, I’ll just link them.
1. You’ll need to set up ADB/USB Drivers for Android  Devices so your computer can properly communicate with your phone.
2. Downgrade Your HTC Hero So It Can Be Rooted or if you have another Android-enabled device that is newer.
3. Root your HTC Hero or if you have a G1 or Mytouch.
4. Pick and install a custom (rooted) ROM for your device. For my HTC Hero, I used MoDaCo’s Custom Hero ROM. To get this to work with other devices, you’ll have to find custom (rooted) ROM’s specific to your device. Custom ROM’s also provide better stability and speed so you get the double benefit! This step is mandatory in order to root your Android.
2. Install Connectbot (only if you have an HTC Hero)
Phew. Now, the easy stuff. Remember to skip this step if you don’t have an HTC Hero, since there’s a bug in MarketEnabler which prevents it to work with HTC Hero.
1. Download Connectbot here.
2. Open Connectbot and hit ‘Local’ when prompted for connection location.
3. Enter ‘su’ to get Super User permissions and type ‘rm -rf /data/data/com.android.vending/cache/*’.
4. Reboot, and move on to the last step!
3. Install MarketEnabler
Download MarketEnabler and select T-mobile to emulate your location to the US. Open up ‘Market’ and enjoy!
- Peter Kao

Unfortunately, Canadians carrying Android phones don’t have access to paid apps on the Android Market as it is currently open for only the US and UK. This was a huge problem for me since I’m absolutely terrible with directions – I needed a GPS-software on my HTC Hero!

The current “best” GPS-app is the Copilot by ALK Technologies, and sadly I couldn’t pay and download their application. Searching on the Android Market didn’t work. Direct URL via barcode scanning didn’t work. Nothing did! Or more correctly put: there was no simple way of doing it.

In order to access paid applications with a non-US/UK Android you have to do the following:

1. Root your phone

2. Install Connectbot (only if you have an HTC Hero)

3. Install MarketEnabler

Sounds simple right? Not really. Be prepared to set aside an hour or so (it took me nearly 3 hours with lots of Googling. Hopefully this will help you shave off some time).

Are you in your comfy clothes yet? Let’s begin!

1. Root your phone

This will take up most of your time. It will take up even more time if your phone has Firmware 2.73.x.x or above, since you’ll have to downgrade your phone first. There’s currently no way to root your phone from more updated firmware.

Since the steps are a bit complicated and long, I won’t paraphrase or try to simplify/clarify the instructions that I’ve found. Instead, I’ll just link to them.

1. You’ll need to set up ADB/USB Drivers for Android  Devices so your computer can properly communicate with your phone.

2. Downgrade Your HTC Hero So It Can Be Rooted or if you have another Android-enabled device that is newer.

3. Root your HTC Hero or if you have a G1 or Mytouch.

4. Pick and install a custom (rooted) ROM for your device. For my HTC Hero, I used MoDaCo’s Custom Hero ROM. To get this to work with other devices, you’ll have to find custom (rooted) ROM’s specific to your device. Custom ROM’s also provide better stability and speed so you get the double benefit! This step is mandatory in order to root your Android.

2. Install Connectbot (only if you have an HTC Hero)

Phew. Now, the easy stuff. Remember to skip this step if you don’t have an HTC Hero, since there’s a bug in MarketEnabler which prevents it to work with HTC Hero.

1. Download Connectbot here.

2. Open Connectbot and hit ‘Local‘ when prompted for connection location.

3. Enter ‘su‘ to get Super User permissions and type ‘rm -rf /data/data/com.android.vending/cache/*‘.

4. Reboot, and move on to the last step!

3. Install MarketEnabler

Download MarketEnabler and select T-mobile to emulate your location to the US. Open up ‘Market’ and enjoy!

- Peter Kao

Twitter for Entrepreneurs

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

,

My Favorite Sites

May these links be a guide to web enlightenment. Schwing!

  • Trendwatching