Adding a Tweet This graphic to WordPress

I’ve been meaning to add a “Tweet This” button to this blog for awhile but I didn’t want the standard look of the WordPress plugins that were available. Instead, I decided to add the code right to my theme so there would be no need for a plugin, plus I could customize the look of the button.

I decided on this graphic and just added “Tweet This” to the sign using Fireworks:

There are lots of free Twitter graphics kicking around the web or you can create your own. Either way, you’ll need one for this tutorial so I’m assuming you’re going to do that right now or you already have one.

This requires you to be registered with bit.ly which is a URL shortening service much like TinyURL. I like bit.ly because of their link tracking features and many people are now switching from TinyURL to bit.ly. If you want to use this code to track your ReTweets, you’ll need to go ahead and register with them.

You’ll need access to your server so an FTP program is recommended. If you don’t have one, you can download one for free. I’ve got a quick post about installing an FTP program here.

Once you have access to your server, you’ll need to edit your header.php file. This is in your themes folder which is located in the wp-content folder.

In your FTP program, right click the header.php file and click “Edit”. Search for the tag </head>.

Copy the code below and paste it right above that </head> tag.

<?php if ( is_single() ) { ?>
<script type="text/javascript" charset="utf-8"
src="http://bit.ly/javascript-api.js?version=latest&login=LOGIN&apiKey=KEY"></script>
<script type="text/javascript" charset="utf-8"
src="http://s.bit.ly/TweetAndTrack.js?v=1.01"></script>
<?php } ?>

Where it says LOGIN and KEY in the code above, you need to enter your own bit.ly login and API key so that you can track your links. This is important, so don’t forget.

Make sure you save your header.php file and close it. Now right click the single.php file and edit that.

Look for the part that says “php the_content”. If you need to, paste the entire file into a text editor and use the Find command to locate it.

Right under that line, paste the following code:

<a href="#" onclick="return TweetAndTrack.open(this, '<?php echo get_permalink();?>');"><span style="display:none;">RT @cassiegermsheid: "<?php the_title();?>"</span><img src="/twitter.png"></a>

Change “@cassiegermsheid” in the code above to your own Twitter name so that any ReTweets will show in your Twitter timeline.

You’ll also need to save the Twitter graphic you want to use to your root folder. You can simply drag it in there using your FTP program. Your root folder is the folder your blog was installed in.

The code above assumes your Twitter graphic will be named “twitter.png”. If it isn’t, be sure to change it in the code to match your graphic name.

Save the single.php file and close it.

Now it’s time to visit your blog and admire your work.

With this code, your Tweet This graphic will show on individual posts. If you want it to show on the main page as well, you’ll need to add this code to the header.php file. Just put it under the last code you entered, right above the </head> tag.

<?php if ( is_home() ) { ?>
<script type="text/javascript" charset="utf-8"
src="http://bit.ly/javascript-api.js?version=latest&login=LOGIN&apiKey=KEY"></script>
<script type="text/javascript" charset="utf-8"
src="http://s.bit.ly/TweetAndTrack.js?v=1.01"></script>
<?php } ?>

You’ll also need to add the same code you pasted in the single.php file to the index.php file. Look for the part that says “php the_content” again and paste it right underneath.

Now your Tweet This graphic will show on individual posts and the main page.

If there are any questions or you need help, please leave a comment.

Thanks to labnol.org for the code.

RT @cassiegermsheid: "Adding a Tweet This graphic to WordPress"