Tuesday, October 12, 2010

How To Customize Twitter Follow Me Buttons

Make Your Own Follow Me Button.
I'm sure everyone has seen the common "Follow Me" buttons on web pages. They look like those to the right and can be found  on Twitter at http://twitter.com/goodies/buttons.

I think having a button which shows your name, company or brand is better.

Customize Your Button

Anyone can have a customized button with very little effort.

All you need are some basic skills in Photoshop (or a similar image editing program) and a bit of HTML knowledge.

Creating the Graphic - Novices
If you are a Photoshop beginner, I'd suggest starting with on of the buttons Twitter provides you with.
  1. Go to http://twitter.com/goodies/buttons and copy an one of the images.
    You will need to be logged into Twitter to see that page.
  2. Open the image in Photoshop and remove the "Follow Me On" text.

    I like copying and pasting over the text with a blank section from the button, but you can do it any way you want.
  3. Add "Follow (You Company) On" text
  4. Save the file as a PNG or GIF.
  5. Upload to your website.
Experienced Photoshop Users
If you have experience creating graphics using Photoshop, then feel free to build whatever image you want.

Adding the Code
The HTML code that goes with the image is simple and easy to get.
  1. Go back to http://twitter.com/goodies/buttons and click on any of the images.
    Twitter will show you, in a pop-up, the code needed to build the button for that image.
  2. Copy the code and paste it into Notepad (or your HTML Editor).
  3. Keep the anchor tag (I've shown it in blue) and change the image tag (gray) to use the image file you created.
  4. Put that code on your web pages.


You're Done.

Your web page now has a customized "Follow Me" button.

0 comments:

Post a Comment