TUTORIAL: How to make Twitter buttons

While there are tons of plugins to automatically add Twitter buttons to blog posts for sharing, many are not customizable for each and every post. Sometimes we also need a Twitter button for our readers that we want to put within a post instead of at the beginning or end as most sharing plugins place them. For these special instances Twitter itself gives us a great tool to use.

Simply go to the Twitter Button page and you are presented with multiple options to create a unique button for your post. I will walk you through each of the four options Twitter gives to you and give you a test Twitter button for each so you can see how they work.

Twitter Button Tutorial Options

CHOOSE A BUTTON

Your first decision is what kind of button you want to make. I use option #1 most often, “Share a link” – this is sort of the do-all option. Option #2 is “Follow” which is making a simple button that when clicked lets the user easily follow the Twitter user given. Option #3 makes it easy for your readers to send a tweet with a specific hashtag. Finally, option #4 is to tweet with a mention of a specific user.

Twitter Button Tutorial

OPTION #1 SHARE A LINK

As I said, I use this most often. When I host giveaways and want to give the option of sending a tweet for an extra entry this works out perfectly for me.

  • Share URL: You can select from using the page URL, or select the field below it to enter your own custom URL. I recommend using this custom field and you can use a shortened link that you have created in bit.ly or any other shortener service you like. This helps keep your character count lower and makes it easy to track results using the shortener analytics.
  • Tweet Text: This is an important field. Selecting to just use the title of the page is really not the best option. Instead select the custom field below it and type the exact tweet that you want to use. You do not need to include your Twitter name, links or any hashtags in this field, they are added automatically based on other fields.
  • Show Count: By default this is turned on. If you do not want it, just uncheck the box. This will show how many times this tweet is sent next to the button.
  • Via: Put your own Twitter name in this box! This way it shows who created the content. You can of course use a client name or any account you want here.
  • Recommend: This field allows you to recommend Twitter users for your readers to follow after they have used the Twitter button. You will not see this in the actual text of the tweet. You can put your own Twitter name here or that of the client, brand, or other involved in the campaign. Note that this field does not always work for everyone.
  • Hashtag: The coveted hashtag goes in this field.
  • TEST THE TWITTER BUTTON: I circled the button in the screenshot above. After you have completed the form click the button and a box will pop up showing the tweet you created. CHECK THE LENGTH! You want to make sure you are under 140 characters – actually 120 is better so it leaves room for RT/adding something by others. You do not have to send the tweet, just close the box after you check it. If you have to make changes, click the button again to recheck until it is right.
  • COPY CODE: Once the button is set up the way you would like, copy the code in the the box. Now paste that wherever you want it to appear on your blog post. You will need to paste it into the HTML/SOURCE view of the blog post you are working on.
  • Try it – here is a button I created of this type for you to try:

Twitter Button Tutorial

OPTION #2 FOLLOW

The second option is to create an easy follow button. When users click this it will automatically have them follow the user shown if they are already logged into their Twitter account. If they are not logged into their own Twitter account they will have to log in first.

  • User: Put your Twitter name, or the client, or whomever, in this field. This is who will be followed.
  • Show username: By default this is selected and I would recommend leaving it alone. This means that the Twitter button will say “Follow @RobynsWorld” (or whatever user you provide)
  • COPY CODE: Once the button is set up the way you would like, copy the code in the the box. Now paste that wherever you want it to appear on your blog post. You will need to paste it into the HTML/SOURCE view of the blog post you are working on.
  • Try it – here is a button I created of this type for you to try:

Twitter Button Tutorial

OPTION #3 HASHTAG

If you would like to encourage your readers to create their own unique tweet, but still use a specific hashtag then use this option. It has many of the same options as Option #1.

  • Hashtag: The coveted hashtag goes in this field.
  • Tweet Text: The default is none which allows the reader to add whatever text they would like when they hit the Twitter button. However, if you want to have some predetermined text select the second field and type in what you would like. You do not need to include your Twitter name, links or any hashtags in this field, they are added automatically based on other fields.
  • Recommend: This field allows you to recommend Twitter users for your readers to follow after they have used the Twitter button. You will not see this in the actual text of the tweet. You can put your own Twitter name here or that of the client, brand, or other involved in the campaign. Note that this field does not always work for everyone.
  • URL: You can leave the default of no URL if it is not needed. However, a link to somewhere is always a good suggestion. I recommend using this custom field and you can use a shortened link that you have created in bit.ly or any other shortener service you like. This helps keep your character count lower and makes it easy to track results using the shortener analytics.
  • TEST THE TWITTER BUTTON: I circled the button in the screenshot above. After you have completed the form click the button and a box will pop up showing the tweet you created. CHECK THE LENGTH! You want to make sure you are under 140 characters – actually 120 is better so it leaves room for RT/adding something by others. You do not have to send the tweet, just close the box after you check it. If you have to make changes, click the button again to recheck until it is right.
  • COPY CODE: Once the button is set up the way you would like, copy the code in the the box. Now paste that wherever you want it to appear on your blog post. You will need to paste it into the HTML/SOURCE view of the blog post you are working on.
  • Try it – here is a button I created of this type for you to try:

Twitter Button Tutorial

OPTION #4 MENTION

Finally, we have the final option to create a Twitter button that will mention a specified user.

  • Tweet to: This is where you will put the Twitter name you want mentioned in the tweet, generally your own name or client.
  • Tweet Text: The default is none which allows the reader to add whatever text they would like when they hit the Twitter button. However, if you want to have some predetermined text select the second field and type in what you would like. You do not need to include your Twitter name, links or any hashtags in this field, they are added automatically based on other fields.
  • Recommend: This field allows you to recommend Twitter users for your readers to follow after they have used the Twitter button. You will not see this in the actual text of the tweet. You can put your own Twitter name here or that of the client, brand, or other involved in the campaign. Note that this field does not always work for everyone.
  • TEST THE TWITTER BUTTON: I circled the button in the screenshot above. After you have completed the form click the button and a box will pop up showing the tweet you created. CHECK THE LENGTH! You want to make sure you are under 140 characters – actually 120 is better so it leaves room for RT/adding something by others. You do not have to send the tweet, just close the box after you check it. If you have to make changes, click the button again to recheck until it is right.
  • COPY CODE: Once the button is set up the way you would like, copy the code in the the box. Now paste that wherever you want it to appear on your blog post. You will need to paste it into the HTML/SOURCE view of the blog post you are working on.
  • Try it – here is a button I created of this type for you to try:

So what did you think of trying out these custom Twitter buttons? As you can see they really are pretty simple to create using the Twitter tool. Even if you have other sharing buttons on your blog post, you can still add any of these buttons to a post also. I think sometimes these stand out a little more for our readers to take action on.

Come back again next week for another Work Wednesday post to help you with your work in social media.

Robyn