Make Your Own Twitter Button With Custom Text

by Ruud Hein April 4th, 2012 

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="http://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:

Ruud Hein

My paid passion at Search Engine People sees me applying my passions and knowledge to a wide array of problems, ones I usually experience as challenges. People who know me know I love coffee.

Ruud Hein

You May Also Like

3 Responses to “Make Your Own Twitter Button With Custom Text”

  1. C Speno says:

    Not only did I enjoy this post, but LOVE the way you organized the information – in true technical writer fashion. Great job, as always, Ruud. Now I'm off to personalize my twitter button :)

  2. Great post, Ruud. Quick question, how did you get the URL to show up in the Tweet message? I'm not sure how to do that. It's not showing up when I try to use your suggested URL format. Thanks!