Featured Article
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
Article Abstract
Posted 19 June 2006. Approx. 577 words.
Forced onto the MySpace social network at work, I quickly find ways around the stock profile abilities and personalise the place for myself. In the process, I created a five-day workshop in doing it to your own profile.
From Our Sponsors
Comments
Comments RSS Feed for “this post”
I agree.
ItSpace is long overdue for a cosmetic makeover.
Let the games begin!
Great job! I think your analysis is spot-on. Keep familiar functionality, keep it social.
After telling myself for such a long time that I didn’t a myspace profile, I’ve finally given in.
Thankfully, with the help of your write-up I’m on my way to having a profile that’s not full of distracting animation and sound.
It’s still a WIP but you can check it out and maybe let me know what you think.
Here
Lots of work still to do.. I doubt the code is ideal considering I’ve just started learning css.
Looking forward to it falling over when I try some cross-browser testing. Haha!
Another MySpace makeover made by myself can be foud at http://www.myspace.com/kmrohe. I used CSS to hide all unwanted elements and to display a complete new page. Just have a look at it…
hey there,
nice profile, i just finished mine and was looking for forums or other websites that post cool profiles for people to discuss and give constructive critisism on how to make your layout work and look better.
-the one.
Great article and really creative profiles guys. I hope to try out some of these techniques soon. Here’s mine currently.
James
i envy every single one of you, my profile sucks, its one of those common ones that are premade, i want to learn how to costumize my own profile, but i just cant understand it, maybe someone could help me put achieving a better profile, well hopelly someone will help me out , cheers for all ur awesome profiles, hopelly someday ill learn how to design and handle the codes, take care everybody
Does anyone know what the MyToken variable is for when using the message and friending links on profiles? Is it possible without this variable a message link or comment might compromise an account?
I should clarify that the variable is used in the URL as a GET method when clicking on a message or add to friends link on any regular profile.
Nick:
Little is known about what MyToken is actually used for. There was an XSS exploit found in MyToken a while back, but there’s no current evidence that it can be used for compromise. That said, MyToken is a token that refreshes every time a new page is loaded or a variable is clicked, leading me to believe that the token has something to do with path tracking or another such metric, not necessarily being that of a Session ID.
beautiful myspace page.
I work for a UN agency looking to redo our page and developing a unique marketing campaign around a global poverty initiative.
please contact me for more information
best,
amil
I used your information and came up with this: http://www.myspace.com/rhscruise - I was able to incorporate comments and a dynamic friends list as well. Thanks!
Thank you very much for this guide, it helped me greatly.
Just writing to thank you for this very useful tutorial - it allowed me to satisfactually reinvent my myspace page even though I had never used CSS until yesterday.
I apprectiate the time taken to share the information, and lets all build a more attractive myspace network!!
Nice adaptations, I frequent this blog (clearly not that frequent if the adaptations are not new :P ) and its has had quit a transformation for the better. I love the concept, ad I am a web dev. I sure your aware but your top on G****e when you type web designer’ guide to myspace. That is quit an achievement _-bravo-_, Anyways love the blog keep it up and just popped d/l to grab the hack pack (again well done).
—cheers—
Hi Eston, do you think it is possible to code one’s friends comments in a div overlat without using flash?
What can you say about such a customizing with band profile? Is it possible?
hi eston, thanks a lot for your tutorial. i really like the idea with the overlaying div and then customizing the layout to my heart’s desire. but there is something which prevents me doing that - when i try to apply the css/html to my profile, myspace requires to preview it and then confirm the changes made to the profile. and thats the problem - with the overlaying div, i cannot even confirm the changes i made to it, its only the overlaying div i see.
however, i tried to do this on an “artist” profile - could this be the problem? thanks for your time and for any suggestions helping me to get through this.
I was wondering how to edit the navigation bar after inputing the div codes.
I have tried many commercial codes and none can interact with the div.
Some visualization problems with Firefox + AdBlock Plus
Thanks for creating the best resources for completely custom myspace profiles. This is one of the only guides thats is so detailed and beautifully designed. As a designer, this was quite the golden find!
http://www.myspace.com/hereinarms
I’ve found a bug in Safari that you might know more about. The ‘area shape’ (for a hyperlinked image map) is fine within firefox and IE but completely broken in Safari. I’ve googled my heart out in search of forums chatting of this Safari Bug, but nothing really digs into the problem. Any suggestions from experience?
Thanks again!
Hey, this is Amanda. I did my MySpace layout on my own. All my CSS/HTML and graphic-use knowledge is self-taught. I was just wondering if you could take a look and tell me what you think of it, if you don’t mind. :) I would love to hear what a professional has to say about it!
http://www.myspace.com/unknown05
Thanks,
Amanda
You have some great material here. the best ive seen online actually. it helped me out quite a bit with my profile:
http://myspace.com/redsparrowmusic
thank you.
Love this site, by the way! :D I actually have a question regarding the image used in this article. Would you happen to recall the sans font used for the headline text in the image? (the font used where the “e” is a slanted sans) I’ve been searching WhatTheFont, Adobe Fonts and FF Fonts and haven’t been able to find it!
Rigo, that’s an alternate lowercase e for ITC Avant Garde Gothic from Eisner+Flake. You can buy it here on FontShop.
excellent! by far the best myspace design ressource! inspired me to get my minimal myspace layout done…
you are invited to check it out at:
http://www.myspace.com/880s
this page is designed using div overlays. I am having problems with it looking the same in firefox and the new korea and japan myspaces though. Anyone know how to make it load alternate CSS for those browsers?
Write Your Own Comment
To preserve legitimate discussion, please use your real name and email address.
Your email address will not be published. Derogatory comments will be deleted.
External Discussion
Displaying the only trackback.
Ramblings of an American…
there was another method that caught my interest, this time brought to you by Eston Bond. Eston’s a far better web designer than I will ever…
Nice write-up on the MySpace customization options. I’m all for the whole “cover as much of that eyesore as possible without getting in trouble by MySpace” notion. Anyone with a little time on their hands, some basic know how, and a willingness to stretch their imaginations can achieve results similar to yours. As much of a hinderance as it is to have the limitations in place by the MySpace admins, it’s definitely a motivating factor to push the limits.