What Is the Tweet Button?

Recently, Twitter released an official “Tweet” button. You can read more about it in jeffbullas.com’s excellent post, or watch the video:

And of course, you can see and try it (please!) on the top of this page.

Why Do I Want a Tweet Button?

I think this one quote provides plenty of reason to consider adding this to your WordPress Blog:

…the Retweet button has increased traffic to my blog by 55% by making it easy for people to ReTweet my blog without cutting and pasting.

– Jeff Bullas

The Bad News

Twitter hasn’t yet provided a simple plugin on their installation page for WordPress Users, which seems like a bad decision on their part. There are currently over 25 million WordPress sites in use. They just give you the HTML code, so we need to know how to put that into our WordPress installation.

Isn’t There An Easier Way?

Well, sure. There’s already a Plugin written that will install the Official Tweet Button into WordPress, but it doesn’t give you as much flexibility in choosing how the Tweet Button will look, or where it will go. I preferred to have my Tweet Button at the top of posts, and to be able to choose from the various designs Twitter makes available (see the picture below), so I installed mine manually. Keep reading for instructions.

How to Install the Tweet Button on WordPress

First, you’ll go to Twitter to get the code for the Tweet Button. Log into Twitter if you’re not already (yes, you need an account!). Then go to http://twitter.com/tweetbutton. You’ll see a screen similar to the one below. Choose from the options available, make sure your twitter account is listed, and then copy the code in the final box by selecting it and hitting Ctrl+C on your keyboard.

Add the Code to Your WordPress Installation

Make a Backup First

This part is a little scary if pages of code intimidates you, but you don’t need to write any. You’ll need to go into the files that create your WordPress site. Log in to your WordPress Control Panel, and Choose Appearance, Editor in your WordPress menu, and you’ll see a list of those files. The one you’re probably going to modify will be called something like Single Post (single.php).  If there’s no file with a name like that (perhaps you’re using the default Twenty Ten theme), look for page.php. You need to make sure you have a backup of this file, and the ability to replace it if something goes wrong, before you continue.

If you know how to use an FTP program like Filezilla, this is pretty easy. Just navigate into your WP-Content, Themes folder and choose the WordPress Theme you have installed. Find the file you want to modify, and drag it to your desktop. This will make a copy which you can use as a backup in case you break your WordPress site. Make sure you ONLY modify a file you have a backup copy of!

Install the Code for the Tweet Button

Ok, you’ve found the file that describes a single post, and made a backup of it. That means that if you make a mess here, all you have to do is drag the backup file from your desktop back into the same folder in your FTP, and overwrite the one you tried to modify. In other words, this is safe, because you can back out and make it as if it never happened, if you don’t like the results.

Back in the WordPress Editor where you view the Single Post file, you’ll see a bunch of code. Your challenge is to figure out where best to insert the Tweet Button code. You’ll want to do it fairly near the top. Make sure you don’t delete or overwrite any code which is already there. Putting the Tweet Button code just after the code that creates the date, or just after the code that creates the Title of the post, might work well for you. You’ll have to see what looks good in your Theme. In the example below I’ve got the Tweet Button code right after the string of code which creates the date. That’s what gave me the result you see at the top of this page. I put my new code in just before the < /p >, which ends the paragraph the date is in. In my Editor, it looks like this:

Make sure you hit the Update File button at the bottom, once you’ve inserted your Tweet Button code. Then open a post in your blog, in a new window, and see how it looks. Congratulations on your new Twitter Tweet Button! Try it out!

If you don’t like the position of the button, try moving it around in the Editor. If your blog won’t open (ooops, broke it!), just go into your FTP program and put the original file back where it came from, overwriting the one you changed. Everything will go back to normal. Learning how to install your own Tweet Button will improve your understanding of how your WordPress site works, and build your confidence to make changes to help your site market more effectively. Remember, if you ever want to change the style of the button, you just repeat the process, replacing the code you inserted originally with the new code Twitter gives you for the Tweet Button.

About the author

Karilee

I'm a big fan of entrepreneurship. Most of my learning, teaching and business is focused on effectively creating "freedom businesses" that allow you to focus on your strengths, and bring what you're really good at to the world - profitably. My clients are looking for more of the right customers - and I show them how to make that happen. I help them develop their web presence through their website, SEO, social media and other marketing tactics.