MySpace Dev. 3: The div overlay method

Yesterday, I covered some basic architectural guidelines for building a navigable MySpace page. Now that we have some basic idea of what to build (or, hopefully, a PSD mockup of what we want to build,) it’s time to get into the HTML/CSS.

What, though, is giving us this creative freedom? If you’ve read over the fine print on the MySpace Safe Mode page, supposedly DHTML is allowed; however, JavaScript — the dynamic part of DHTML — isn’t, due to the ability to build XSS exploits and other malicious scripts. For our case, then, the D in MySpace’s DHTML must stand for damaged.

By default, the MySpace codebase renders itself in quirks mode due to the HTML 4.01 Document Type Declaration without a SYSTEM identifier. (For those not speaking W3C speak, it’s got an old architecture.) To make things worse, you, too, are stuck writing quirks mode code thanks to MySpace’s heavy HTML/CSS parsing limitations. On the HTML end, MySpace strips <script>, <object>, and <iframe> upon form submission. However, we see people embed Flash and movies into their profiles all the time. They’re using the Netscape-based, long-since-deprecated <embed> tag, read by Mozilla, KHTML (Konqueror and AppleWebKit/Safari), and IE for backwards compatibility.

The CSS abilities allowed by MySpace are also broken. MySpace disallows any CSS using the id selector (#), so all targeted markup must use the class attribute. This filter also destroys hexadecimal colours, ruling out the use of shortcuts (such as #fff) and those CSS properties with hexadecimal colour inline (font, border, etc.) For some unknown reason, MySpace was also breaking directly before a font-family declaration in the body properties of my CSS with .r { }, ruining the font-family and anything underneath. (I assume that this is a bug in the parser; this makes very little sense to me on the frontend.)

That means that our HTML and CSS will be poorly formed and intentionally broken to work on MySpace. It’s an unfortunate truth of the site, but for all of its shortcomings, we have to thank the MySpace guys for giving us at least something to work with, unlike other networks such as Facebook.

We’re not done with restrictions yet, though. MySpace has one more tucked away at the bottom of its page: the MySpace Terms of Service. In the Prohibited Content section, you’ll notice a few things that are broken constantly: posting e-mail addresses or site URLs, for example. One that MySpace won’t tolerate, however, is obscuring their advertisement at the top of the page. Although the ads that roll through are sometimes garish, unless you want to pay MySpace tens of thousands of dollars (like some have,) your profile page is on a one-way trip to deactivation.

Now that we know what we’re getting into, we have to build some way to 1. hide MySpace’s built-in code and 2. apply our own design to the page without tainting the ad. Although there are many restyling methods, the div overlay method presented by Derek Punsalan at 5thirtyone gives us space to work with while not violating the MySpace TOS. In just a few lines of code, you can effectively lay your own div over myspace and display your own code.

Before we actually write the div overlay code, we need to know where to place it. Using the MySpace Safe Mode, all CSS is inserted in “About Me” and all HTML in “Who I’d like to meet.” By doing this, your CSS will load before your HTML in a proper fashion. To start the div overlay, add this core CSS to “About Me”:

<style type="text/css">
.main {
position:absolute;
left:50%;
top:125px;
width:800px !important;
z-index:1;
margin-left:-400px;
}
</style>

(Obviously, change colours if you see fit, but do not change width or positioning properties.)

With CSS in place, it’s time to add HTML and complete the overlay. Add this code to “Who I’d like to meet”:

<div class="main">
<table style="width: 800px;
height: 800px;
cellpadding: 0px;
cellspacing: 0px;
background-color: FFFFFF;">
<tr><td valign="top">
… your content here …
</td></tr></table></div>
<div style="position:relative; height:400px; overflow:hidden; border:0px;"><table><tr><td><table><tr><td>

Now, if you view your profile page, you’ll notice everything below the ad is blank. If information is protruding from the bottom of the div, increase the height of div.main and delete as much content as you can from your profile underneath. If you want some quick example code to work from, Derek has offered his Dark minimal MySpace div overlay for download here.

Now that we have a core overlay, we’ll need to add in our own MySpace interface links. Get your Friend ID, as it’s necessary for most of the links. Core actions are as follows; just replace #friendID# with your friend ID (If you don’t know how to get your friend ID, this tool will help you.)

Send Message

http://mail.myspace.com/index.cfm?fuseaction=mail.message&
friendID=#friendID#

Add to Friends

http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&
friendID=#friendID#

Add to Group

http://groups.myspace.com/index.cfm?fuseaction=groups.addtogroup&
friendID=#friendID#

Forward to Friend

http://mail.myspace.com/index.cfm?fuseaction=mail.forward&
friendID=#friendID#&f=forwardprofile

Add to Favourites

http://collect.myspace.com/index.cfm?fuseaction=user.addToFavorite&
friendID=#friendID#&public=0

Block User

http://collect.myspace.com/index.cfm?fuseaction=block.blockUser&
userID=#friendID#

Rank User

http://collect.myspace.com/index.cfm?fuseaction=RateImage.UserRating&
UserID=#friendID#

If there are other MySpace interactions you’d like to use, just use Copy Link Location on the link to get its target URI. Generally, you need to replace the number after userID or friendID with your Friend ID.

If it isn’t obvious by the overlay’s effect or its name, everything must be recreated within your overlay. If you want music, you’ll have to recreate it. If you want blog functionality, that, too, must be recreated. Due to interactivity limitations, all of these dynamic elements will have to be done through Flash; the next two tutorials will build code in Flash (or, in the case of the music player, some XML with an existing Flash application) to restore this functionality.

For now, however, HTML and CSS must be written. If you need some direction, you can use my markup. downloadable below. Mind you, the code is Creative Commons-licenced, so do not copy this for commercial purposes. If you’d like more base layouts, Derek has a pack of Minimal MySpace overlays in Lime, Orange, and Pink for download. What are you waiting for? It’s time to get coding.

Correction (10 August 2006) — MySpace changed some CSS and for a while the !important rule was necessary to force the width of div.main. Things have returned to normal now. Go figure. I’m leaving the !important rule in the code for now.