Adding a "Tweet This" Image Link To Your WordPress Blog

Recently on Smashing Magazine, there was a fantastic article by Jean-Baptiste Jung of Cats Who Code, called 10 Killer WordPress Hacks. Now, many times when you see a title like that, you probably do the same thing I do: yawn. Because you know as well as I do that out of those 10, only two or three are probably going to be any good.

Au contraire this time, my friends. Jean-Baptiste rocked the house with this one. I was already using one of his tricks, I immediately put three of them into practice while reading the article, and two more are on my to-do list now done. It only took me about ten minutes, tops.

But I’m a code-happy kinda guy.

I realize that what I can do in three minutes might take you thirty, at least, just because you’re doing other things during your day besides coding, and I, on the other hand, do a lot of it.

So, because Twitter and blogging are getting to be so much more widespread these days, I thought I’d break down “Tip #5: Create a ‘Send to Twitter’ Button” for you, in case you’ve got a more complicated installation than just adding a link. If your theme uses images along with your links, as one of my client’s sites does, then just adding the code is going to break your visual layout, and make you look like a hack.

We can’t let that happen now, can we?

Send to Twitter, with CSS Image Sprites

A css sprite—because I know that’s your next question—is a really cool way of creating two-in-one rollover images. You see, when you have an image that’s a link, and you want it to change color when you roll over it, you can:

• use two separate images… but that makes your reader’s browsers have to load two images, which slows down your site, or
• use one image file that contains both images, set apart from each other, and use css to get it to work right.

Because of the problem inherent in the two-image method, most worth-their-salt theme designers will use sprites for instances like we’re talking about here. If you look at the code I’m going to describe in just a minute, you’ll know if your theme uses sprites, too, and if you can use this technique, or not.

Now, I’m not going to show you how to create css sprites from scratch, because there are plenty of articles out there that do, and they’re great. And besides, the idea behind this tutorial is that you’re using a WordPress theme that already uses sprites, and you just need to know how to duplicate what your theme’s designer has already done.

That said, let’s get this wagon rolling already!

1. Get into the code

Here’s the original code from Jean-Baptiste:

1

<a href="http://twitter.com/home?status=Currently reading <?php the_permalink(); ?>" title="Click to send this page to Twitter!" target="_blank">Share on Twitter</a>

This will produce a simple text link, like this: Share on Twitter, but that’s it. If you want it to match your existing styles, you’re going to have to style it up a bit.

As an example theme, I’m going to use my client’s site. What we’ve got are links that look like this:

If you open up the index.php file, and find the code of the links, you’ll see they all look like something like this:

1

<li class="post_stumble"><a title="Click here to stumbleupon this post" href="http://www.stumbleupon.com/submit?url=<?php the_permalink() ?>&amp;title=<?php the_title();?>">Stumbleupon</a></li>

(If that’s not something you think you can find on your own, then I highly recommend you grab a brilliant Firefox extension called Firebug. It will allow you to “look beyond the Matrix” and see the code that makes up any element on any website. It rocks. Get it. It’s totally indispensible.)

Now, copy-n-paste the existing code that you see, change the class name, and add in the ‘share on Twitter’ code, so it looks like this:

1

<li class="post_twitter"><a href="http://twitter.com/home?status=Currently reading <?php the_permalink(); ?>" title="Click to send this page to Twitter!" target="_blank">Twitter</a></li>

Duplicate this in the single.php and archive.php, to be sure the Twitter link is on both the blog index, the individual post’s page, and the site’s archives, and you’re all set. (Those three files should be the only place this code is called, unless you have a very pimped out theme… be sure you look through your theme’s files to see if there’s anywhere else this code would be called on, such as category.php, page.php, or search.php…)

2. Create the Image Sprite

Now that you’ve got the structure in place, it’s time to create the sprite image.

Chances are, the existing sprite images are in your theme’s images folder (but you can always double-check by using Firebug and/or combing the css file). Find an existing image, and open it in a photo editing program. I use Fireworks, but there are plenty to choose from.

What you’ll see is that there are two images in one; the ‘resting’ state, and the ‘hover’ state. You’re going to want to match those two styles exactly with your new Twitter images. In this case, I need a greyscale ‘t’ and a full-color ‘t’, so it’s off to Google Image search to grab a Twitter ‘t’, and open it in Fireworks.

Next, shrink down your Twitter image so it’s the same size as the example image you’re using. Duplicate it, and apply whatever style is necessary to make it look like the second image. In my case, I used a command tool to make it greyscale with one click; depending on your image editor, you may need to desaturate it or something else.

Now, align the two images so they’re exactly like the example sprite you pulled from your theme. They should look like this:

Upload your new twitter sprite so it sits alongside the others.

3. CSS Time!

Now open up your theme’s stylesheet, most likely the style.css file.

Duplicate the code used to make the example image you used do its sprite dance (again, use Firebug if you have a hard time finding it), and change the class name and image name to your new twitter class and name.

Here’s the original css:

1
2

.postmetadata li.post_stumble a { display:block; float:left; height:14px; padding-top:2px; background:url(images/bk_stumble.png) bottom left no-repeat; padding-left:20px; }
.postmetadata li.post_stumble a:hover { background:url(images/bk_stumble.png) top left no-repeat; }

And here’s the duplicated css along with the original:

1
2
3
4

.postmetadata li.post_stumble a { display:block; float:left; height:14px; padding-top:2px; background:url(images/bk_stumble.png) bottom left no-repeat; padding-left:20px; }
.postmetadata li.post_stumble a:hover { background:url(images/bk_stumble.png) top left no-repeat; }
.postmetadata li.post_twitter a { display:block; float:left; height:14px; padding-top:2px; background:url(images/bk_twitter.png) bottom left no-repeat; padding-left:20px; }
.postmetadata li.post_twitter a:hover { background:url(images/bk_twitter.png) top left no-repeat; }

That should do the trick. Save and upload everything, and test it. Let’s take a look…

Voila!