[PHP] Fancy Forum Signature w/ Last.FM and L33tSig Integration

[Steven]

Fancy Forum Signature w/ Last.FM and L33tSig Integration
by Steven

Introduction
I've been a long time user of both Last.FM and L33tSig. For a majority of that time I've just been using the default images and charts. I wanted to create a unique, custom forum signature that stood out. I created this script a while ago, and I've just decided to make a tutorial out of it.

For this tutorial you'll need a server with:

• PHP 4/5
• GD Image Library
• SimpleXML

You'll also obviously need both a Last.FM account and a L33tSig account. To make your signature images, you'll also need Photoshop or similar (GIMP, Paint.net, etc). You can also use custom TTF fonts. Let's get started, shall we?

Images
The image size for L33tSig is 400 by 100. You'll need a signature background that it suitable for that size. Remember we're also adding a Last.FM feed, so make sure you have room for a line of decent-sized text.

I'm using these images:
http://www.media.phreakyourgeek.com/1.png
http://www.media.phreakyourgeek.com/2.png
http://www.media.phreakyourgeek.com/...ss_example.png (Yay for crappy editing!)

Scripting
First, let's make sure the script is seen by the browser as a PNG image:

PHP Code:

<?php

/**
 * @author Steven
 * @copyright 2009
 */

header('Content-Type: image/png');

?>

Next, let's create very basic cache feature that will reduce load on your server (thanks Tim!):

PHP Code:

if( (file_exists('cache.png')) && (time() - filemtime('cache.png') <= 120) )
{
    readfile('cache.png');    
    exit;
} 


This function is a very crude example of how caching works. It basically checks to make sure the cached image is available and is younger than 2 minutes. If it is, send that image to the browser. This makes sure you're not wasting CPU power to generate the image every time it gets requested.

The next part is to set up your Last.FM feed. Last.FM provides you with a handy RSS feed of your recent tracks, so we'll use that to grab your most recent scrobbled track.

PHP Code:

$remotefile = 'http://ws.audioscrobbler.com/1.0/user/StevenFX/recenttracks.xml';
$localfile = 'StevenFX.xml';
if( (!file_exists($localfile)) || (time() - filemtime($localfile) > 120) )
{
    $contents = file_get_contents($remotefile);
    $fp = fopen($localfile, "w");
    fwrite($fp, $contents);
    fclose($fp);
}
$xml = simplexml_load_file($localfile); 


Be sure to replace "StevenFX" in both of the variables to your Last.FM username - you don't want to grab my music instead of your own.

The next step is just a function to center text in the image. You don't need to worry too much about this.

PHP Code:

function center($image_width, $size, $angle, $font, $string)
{
    $bounding_box = imagettfbbox($size, $angle, $font, $string);
    $text_width = abs($bounding_box[4] - $bounding_box[0]);
    $x = ($image_width/2) - ($text_width/2) + 2;
    return $x;
} 


A few changes could be made in here to "make it better." Generally you'll only be off by one or two pixels using this method, which is about as close as you're going to get to center. You might have to adjust the last " + 2" when setting $x; generally only minor adjustments need to be made.

The next step is to load your signature images and overlay your L33tSig image onto it:

PHP Code:

$src = imagecreatefrompng('http://www.l33tsig.net/sig/2/Tagged.png');
$dest = imagecreatefrompng('./path/to/signature/background.png');

imagealphablending($dest, false);
imagesavealpha($dest, true);

imagecopymerge($dest, $src, 62, 0, 0, 0, 400, 100, 80); 


Basically we fetch your images, then turn on alpha blending (transparency), then overlay the two images. You will have to change the values for imagecopymerge() to match your images; see imagecopymerge() at the PHP manual for more information. Be sure to change "Tagged" in the L33tSig URL to your L33tSig username; again, you don't want my stats instead of your own.

The next step is to set up the Last.FM text.

PHP Code:

$color = imagecolorallocate($dest, 255, 255, 255);
$lastplayed = 'Last track scrobbled:';
$lastfm = $xml->track[0]->name.' by '.$xml->track[0]->artist;

if( strlen($lastfm) > 48 )
{
    $lastfm = substr($lastfm, 0, 45).'...';
} 


First we set a color for the text. Then we set a few strings and grab the last played track from the Last.FM RSS feed.

Next we'll write those strings to the image:

PHP Code:

imagettftext($dest, 7, 0, center(524,7,0,'tf2build.ttf',$lastplayed), 114, $color, 'tf2build.ttf', $lastplayed);
imagettftext($dest, 10, 0, center(524,10,0,'tf2build.ttf',$lastfm), 125, $color, 'tf2build.ttf', $lastfm); 


You'll most definitely have to change these values to match your images. Change tf2build.ttf to match your font. Make sure your size and angle are the same for both imagettftext() and center(). See imagettftext() at the PHP manual for more information.

Your final step is just to clean up!

PHP Code:

imagepng($dest, 'cache.png');
readfile('cache.png');
imagedestroy($dest);
imagedestroy($src); 


Congratulations! Now you have your custom forum signature that displays your computer stats and your Last.FM tracks! The final product for me:

http://www.phreakyourgeek.com/sig.html

This is my BBCode (obviously without the asterisks):

[*url=http://last.fm/user/StevenFX][*img]http://phreakyourgeek.com/sig/1.png[/img*][/url*][*url=http://steamcommunity.com/profiles/76561197996934137][*img]http://phreakyourgeek.com/sig/2.png[/img*][/url*]
[*img]http://phreakyourgeek.com/sig/3.php[/img*]

Thanks for reading, and enjoy your new, custom, unique forum signature! Hope this helped you!