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.

Mike Davidson, you are officially the man. Or as Scrivs exclaimed in the first comment on Mike’s latest post, Hacking A More Tasteful MySpace, “You are a god amongst teenagers”! Where most self-proclaimed web professionals are squeamish about the very idea of creating a MySpace account, Mike saw it as a design challenge and produced one of the best MySpace profile page I’ve ever seen, along with a great tutorial: http://www.myspace.com/mikeindustries. I plan to jump head first into Mike’s tutorial soon, posting my experiences here, but for now here are a few other nice custom MySpace profiles.

• http://myspace.com/creamapparel
• http://myspace.com/missionarypositions
• http://www.myspace.com/chase45
• http://myspace.com/danielstephenrubin
• http://myspace.com/thebled
• http://www.myspace.com/dstout

Update: I recently wrote a post about hosting MySpace profile images so that nobody else can use them on their profile. Most profile images on MySpace are not actually hosted on MySpace, but rather on other private servers. This is known as hotlinking, but what if you wanted to allow your profile to hotlink images from your server but not other people’s profiles. This is essentially what I’ve figured out how to do using PHP. It prevents other people from using your MySpace images and stealing your bandwidth. Check it out.

As a webdesigner, or I guess as anyone who spends a lot of time working online, it’s easy to get a condescending view of tools that help people who know very little about the web create an online presence. It’s a childish and discriminative tendency, but time after time I fall into that trap and boycot tools like these for no good reason. The fact is, way back in the days when I knew very little about building websites, I used WYSIWYG editors and sliced-image table layouts. I used geocities, xoom, and angelfire to build my first pages. When I was first learning about content management, I even made use of blogger for a while. For some reason though, I had this disdain for LiveJournal. It was as if I thought I was technologically above it…until I found a friends LiveJournal page that I hadn’t seen since middle school. I realized then that it wasn’t just some toy for elementary school students, but rather a valuable tool for keeping up with friends.

For the longest time, I’ve had the same opinions about Myspace. I knew that some of my friends used it, but I refused to setup an account and insisted that they email or IM me. Well, after finally signing up a couple weeks ago, I again feel like I’ve been snob. There are a lot of people on Myspace that I know from my hometown, from high school, and from college. To make me feel even worse, the biggest group of friends (by far), are all the people from my Digital Media classes at UCF. These are people who now have cool jobs like designing rides at Disney, building 3d animation for gaming companies, and (like me) developing websites. So much for my theory. I’m just going to shut my mouth now and post my Myspace url: http://www.myspace.com/jasongraphix

For those of you reading out there with Myspace accounts, sorry for not doing this sooner. Go ahead and add me to your friend list if you haven’t already. If you don’t already have a Myspace account, here’s my shameless plug:

• It’s free.
• It’s easy to setup.
• There are probably dozens of people on it that you already know (including myself).
• You can use it as a blog if you don’t already have one.
• You can customize the snot out of it. Honestly though, the only good example I’ve seen of this would be Chrissy’s profile.