On this blog we sometimes insert a Tweet This button. That button didn't exist; I made it.

Reproducing the house style of the Twitter button is simpler than you think. No need to get the colors right or find out which font is used. Simply follow these 7 steps instead and have your own Twitter buttons in minutes.

1. Goto The Twitter Button Page

image

Type in, click on, or otherwise navigate to Twitter's Twitter Buttons resources page.

2. Pick One

image

There are four types of buttons the page can help you generate; share a link, follow, hashtag, and mention.

Pick the hashtag one for things like tweet now, tweet that, tweet whatever.

Pick the Mention one for things like tweet to win, tweet to enter, tweet to whatever.

3. Enter What You Want

image

In the input field under Button Options, enter whatever text you want on the button. Twitter cuts out any spaces. You can add them later on with some cut and paste wizardy (see step 6) but for now go with one word.

4. Screen-clip It

image

The resulting button you see isn't an image you can right-click and save. A handy way to get around that is to take a screen clip of it.

I used Snagit but you can also use something like Windows' free snipping tool or pick up one of the many free solutions out there. For what it's worth, my money is on Snagit.

5. Open In Editor

image

Open the screen clip of the button in a graphic editor you feel comfortable with. Nothing fancy needed here.

Again, my pick is Snagit; it comes with an editor that is simple, perfect, clear, and tuned to perfection to work with screenclips. But anything will do really; every Windows install has Paint on it, for example.

6. Cut

image

image

 

If the button clip shows more than the button trim/crop the clip as precise as you can.

Now cut out the unwanted part of this button. In my case I only needed to remove the # itself; you may want to remove "Tweet #".

If your editor doesn't automatically fill the cut out part, make a selection around the leftover word, cut, paste, and then drag it to its right place.

7. Save

image

Satisfied with your work, save your button image, upload it and use it as you see fit!

To link the button to post a Twitter status message use this code:

<a target="_blank" href="https://twitter.com/home/?status=YOUR-MESSAGE-HERE">
<img src="location-of-your-button-image"></a>

8. Try It

I made a Twitter button with custom text using this walkthrough:

Conclusion

  • Use Twitter's own button generator
  • Take a screenshot of the button you made
  • Cut out the unwanted part(s)
  • Save and use your custom button

More On Twitter:

About the Author: Ruud Hein

I love helping to make web sites make it. From the ground up if needed. CSS challenges, server-side scripting, user and device friendly JavaScript tricks search engines have no problems with. Tracking how the sites perform and then figuring out how to make that performance and the tracking better. I'm passionate about information. No matter how often I trim my feeds in my feed readers (yes, I use more than one), I always have a couple of hundred in there covering topics ranging from design to usability, from SEO to SEM, from life hacks to productivity blogs, from.... Well, you get the idea, I guess. Knowledge and information management is close to my heart. Has to be with the amount of information I track. My "trusted system" is usually in flux but always at hand and fully searchable. My paid passion job at Search Engine People sees me applying my passions and knowledge to a wide array of problems, ones I usually experience as challenges. It's good to have you here: pleased to meet you!