If you had told me a year ago that I would be an active member of MySpace I would have laughed. From what I had seen of the social network back then, I had decided that it was simply a meeting place for people like “Kenny” from Can’t Hardly Wait. On top of that, most MySpace profiles I had seen at the time violated every principle of good design and web standards that I hold dear. Some much worse than others.

These dissenting opinions kept me away for a while, but I finally caved to the peer pressure of a few close friends and set up an account. After a few months of being discovered by and finding old friends I started to realize the value of this system. Despite all the negative hype from the web design community, MySpace really is an effective tool for staying in touch with people. Of course, there is still the problem of bad design. The default profile layout for MySpace accounts is bearably plain design-wise, but it begs to be customized. The problem is that the profile HTML was never meant to be custom as there is no tool to change the display of a profile within the settings interface. All profile design changes are basically hacks that are achieved by by injecting quasi-CSS and extra HTML into a textbox that is meant to contain info about yourself. Out of this tiny loophole of potential has come a wellspring of custom layout sites and tutorials. Most of which are horrible… Why? Mainly because the HTML consists of nested tables with very few IDs or classes to grab hold of and style.

I tried for a while to create a custom MySpace profile that represented me as a designer but walked away frustrated every time. After reading Mike Davidson’s informative tutorial back in April my hope was renewed and I created a profile that I was somewhat proud of. A few months later, I took it down. Why? Because my design got posted to “free layout” site without my permission. I only realized this after noticing hundreds of requests for the images used in the design in my server log files. To stop the hotlinking, I swapped in images like this:

and this…until people finally stopped linking to my files:

While that was fun, my problem wasn’t really that people were using my design, but that they were eating my bandwidth, and at a viral rate. I wanted to have a custom MySpace, but didn’t want my webhosting account to be the repository for world’s profile background images. For a while I looked into .htaccess as a possible solution, but didn’t have much luck. I could block hotlinking altogether from myspace.com, but I couldn’t figure out a way to allow my own profile to hotlink.

The Solution: Serve Images with PHP

While working on a client project for work, I rediscovered The Random Image Rotator PHP script from Automatic Labs. On its own, the script is actually very handy. By placing it in a folder of images and visiting the page in a browser, it will automatically display a random image from that directory. You can use the URL of the php file as the src for an img tag, or even as the url for a background-image in css. If there is only one image in the directory, it will always show that one image. At some point, I got the idea that I could use a similar script to serve my MySpace profile images. I’m not a PHP guru, but I know that PHP can return the referring URL of a page…and if I could get that, I could determine whether or not to show my image. After a few hours of trying to roll my own PHP image serving script, I realized that the Automatic Labs script had everything I needed but the referrer checking. To check the value of the referrer variable, I simply set it to display an image on my profile and added the following code to the top of the script to create a simple log file:

$ref = strtolower($_SERVER['HTTP_REFERER']);
if (file_exists('log.txt')) {
    $date = date('m/d/Y');
    $time = date('g:i a');
    $content = $date.','.$time.','.$ref."\n";

    $file = "log.txt"; 
    $fp = fopen ("$file", "ab"); 

    fwrite($fp, $content); 
    fclose($fp);
}

Then…I waited, letting the log file build up so that I could see what URLs I wanted to allow thorough. After some time, I noticed that all the URLs in the file were in one of the following formats:

http://myspace.com/jasongraphix
http://profile.myspace.com/jasongraphix
http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=40898145

There were some longer ones like the last one that had some other query string values, but every referring url from my MySpace profile contained either “myspace.com/username” or “friendid=idnumber”. Taking this knowledge back to my php file, I added the following code after the logging if statement:

$friendid = '40898145';
$username = 'jasongraphix';
$check_id = strpos($ref, 'friendid='.$friendid);
$check_name = strpos($ref, 'myspace.com/'.$username);
if ($check_id === false && $check_name === false) {
    exit;
}

Basically, what this does is check to see if the referring URL ($ref) contains either “friendid=4089145” (my MySpace friend ID) or “myspace.com/jasongraphix” (my permanent url/username). If it doesn’t have either of those, it exits the script and the image is not served. Theoretically, I could use that if block to define a fun alternative image to show, but why waste the bandwidth? This probably isn’t the most elegant solution to the profile-image hosting problem, but it works for me.

I saw this picture over at Alex Rudloff’s post about UCF’s 42-0 loss to UF and had to repost it. Amy and I were at home watching South Carolina get the same treatment from Georgia…but at least that matchup was worth watching. 42-0? C’mon Gators? Why couldn’t you just go pick a fight with someone’s grandmother and leave my poor Knights alone.