The web designer’s guide to MySpace

MySpace is one of those sites that you try to ignore for as long as you possibly can. After all, everyone these days seems to have some sort of social networking horror story: that creepy guy that stalked your Internet activity for months, that girl that was actually a guy, that awful photo of you after four tequilas too many. Of course, in the web design community, we witness a large amount of nasty habits from “designers”: multilayered streaming audio, tiled and animated background GIFs, and comments littered with Flash e-vites to club events you don’t want to go to in the first place.

Unfortunately, friends and colleagues pressure you to look at people on MySpace, requiring you to register for access to picture and video galleries. Now that you’re there, why not populate your profile? For that matter, why not take advantage of those HTML/CSS capabilities and flex some web design muscle?

I’ve seen (and referenced) numerous others who have used HTML/CSS tastefully in their profiles; Mike Davidson built a wonderful template, as did Keegan Jones. Every hack method to date, however, has had shortcomings: Keegan’s exploited MySpace and removed the advertisement, violating the terms of service; Davidson’s was (characteristically) no frills and only restyled MySpace’s built-in content.

Derek Punsalan of 5thirtyone picked up on my old Facebook exploits, and I eventually had an exchange with him that led me to his div overlay technique. Basically, Derek dropped a div over the existing content that allowed for practically limitless HTML/CSS design under the MySpace control area. The shortcoming in the div overlay method, however, is obvious - it blocks all underlying MySpace functionality - but, at the same time, allows the most design flexibility.

With Punsalan’s container allowing me design flexibility, it was then time to restore MySpace functionality. I then decided that it would be coolest to use my existing tools on MySpace: I’d love to replace the MySpace blog with an entry from hyalineskies, tie my pictures to my Flickr photostream, my videos to YouTube, et cetera, leveraging my established content elsewhere while using MySpace for its massive social networking capabilities.

Of course, there are technical limitations to the MySpace HTML/CSS codebase, and without the usual tools of JavaScript, the <object> tag, or iframes, pulling dynamic content into a page not meant for it requires serious trickery. After tons of purposefully-poorly-written CSS, deprecated HTML hacks, some WordPress tricks, and a heaping dose of Flash (a program I have never worked in before,) my MySpace page is entirely custom, extracts RSS from hyalineskies to display the latest blog entry, offers links to my Flickr photostream, allows embedding of any MP3 audio, and still works within MySpace’s TOS. In true blogger fashion, I’ve documented all of my work and will progressively release this guide over the next week (as well as my source code) so you, too, can have your own custom MySpace profile from scratch by next weekend, just in time to make friend requests of people you meet at the club.

As a bit of forewarning, it won’t come easily. It will require a large amount of knowledge in HTML, CSS, and Actionscript, as well as some knowledge of WordPress, to get everything to play nicely, but the payoff is truly unique.

Table of Contents

Day One: Social Network Information Architecture
Day Two: The Div Overlay Method
Day Three: Restoring Music Functionality
Day Four: Importing RSS via Flash