Here's a little PHP code snippet that allows you to create your very own Twitter image badge with your latest tweet. You may have seen this functionality on twitstamp.com. This service however doesn't (yet) feature custom badges with your own image, font and colors and some people rather host things themselves than using a hosted service. In my case the main reason to create this bit of code was the fact that I wanted a stylish looking Twitter badge on MySpace, both for myself and for Pam. MySpace and many other services don't allow any Javascript to be used by users which is why they have to revert to ugly 'applications' or flash based badges. These hardly pass the verdict of the style police which is why I wanted something better.

To use my PHP script you need a PHP installation with support for GD (which is enabled by default) and cURL. If you don't have cURL support the script won't work because that's what it uses to fetch your latest tweet from Twitter. Most people however have hosting environments that meet these requirements. If you don't you'll have to rewrite the bits that deal with fetching the tweets.

How to use

First of all you're going to design a nice looking badge. Use the PNG format. Here's the one I did for myself:

my twitter badge image

You're going to have to think about the size of the area in which your tweets will be printed. Make sure you reserve the right amount of space by simply testing text in Photoshop in the font and font size you intend to use on the badge. Make sure you remember the font and font size for later.

Now you're going to create a directory on your web host. Call it anything you want. I called mine badge/. Make this directory writable by your web server (chmod 777). Then upload the PNG you created into this directory.

Now it's time for the hard part: configure your badge. This is somewhat tricky but I tried to do the best I could to make it as easy as possible. You can get the PHP code right here. Open it in a text editor.

In the file you'll see a whole bunch of define statements. Let's go through them one by one:

• __FONT: This is the font you're going to use. Pick a font and upload it into the directory you created earlier. Enter the filename of this font as a value. In my case it's arial.ttf
• __BADGE_DIRECTORY: The directory you created earlier and uploaded the image and the font into. You can use an absolute path or a relative path. Make sure you have a trailing slash. In my case it's badge/
• __CACHE_TIMEOUT: This is the cache timeout in seconds for generated images. This prevents image generation at every single request which would be very CPU intensive. I set it to 300
• __IMAGE_FILE: The filename of the image you created and uploaded earlier.
• __TEXT_FONT_SIZE: Font size for the rendered text of your tweet on the badge.
• __TIME_FONT_SIZE: Font size for the label showing how long ago your tweet was sent.
• __LINE_HEIGHT: Line height in pixels. This is gonna depend on your font size of course.
• __LINE_LENGTH: Amount of characters per line. If this value is too high the text will bleed out of the badge!
• __TEXT_COLOR: Color of the tweet text. Use a 6-character hex value here.
• __SHADOW_COLOR: Color for the shadow of the tweet text. Use a 6-character hex value here.
• __TIME_COLOR: Color of label showing how long ago your tweet was sent. Use a 6-character hex value here.
• __TIME_SHADOW_COLOR: Color of the shadow for the label showing how long ago your tweet was sent. Use a 6-character hex value here.
• __TEXT_LEFT: Amount of pixels from the left of the badge image where you want the text to start.
• __TEXT_TOP: Amount of pixels from the top of the badge image where you want the text to start.
• __TIME_LEFT: Amount of pixels from the left of the badge image where you want the time text to start.
• __TIME_TOP: Amount of pixels from the top of the badge image where you want the time text to start.
• __TWITTER_USERNAME: Your Twitter username

The hard part

Now here comes the tricky part: figuring out what values to use for __LINE_LENGTH, __TEXT_LEFT, __TEXT_TOP, __TIME_LEFT and __TIME_TOP. The last four values can be found by just measuring pixel sizes in Photoshop. The line length however depends on which font and font size you are using. You can make a fair guess by playing with text in Photoshop like I mentioned but it will probably require some tweaking. This tweaking is the trickiest part and unfortunately I can't really help you with it. It requires a bit of fingerspitzengefühl.

When you've made some sensible estimations, upload the file to your server and name it whatever you want as long as it has the .php extension. Put the file at the same level as the directory you created earlier. NOT INSIDE THE DIRECTORY. You can now check out your badge by calling http://yourserver.com/yourpath/yourfilename.php. Looks good? Use it in the src attribute of an IMG tag on any webpage and the badge will appear.

Here's mine:

Here's Pam's:

DOWNLOAD THE PHP SOURCE HERE

Small update: I changed the code a bit to cut off strings that are very long (99% of the time these are URLs that can't be clicked anyway since it's an image badge). This way there's a lot less chance the text will bleed out of the available space. Enjoy!