HTML for MySpace

MySpace.com draws people from many different backgrounds to its vast realm of social networking. Unfortunately, many users lack the basics of web design skills to utilize the program to its fullest extent, often forcing their friends to click around needlessly in order to, for example, read their new blog entry they've announced in a bulletin.

The process of finding the blog by first visiting a profile can sometimes take several minutes if the page contains numerous elements like a music player, images, videos, friend comments, etc.

Supplemental code

Some people quickly discover MySpace helper sites providing profile layouts, images, videos, etc. to pimp their page via simple instructions to copy and paste the HTML/CSS code provided into the desired location. Unfortunately, most users don't actually understand the code these sites provide.

In the case of this help file, HTML refers to web page elements such as links and images while CSS refers to style elements altering the visual appearance of the HTML.
While this help file is far from a comprehensive tutorial of HTML/CSS, it will provide the essentials of common, everyday needs one will encounter on MySpace.

It is worth mentioning that MySpace messages, bulletins, blogs, and some users' comments incorporate a user-friendly HTML-enabled protocol (often referred to as Rich Text). That is, they treat what you type as a modified version of HTML code.

For example, blocks of text separated by a blank line will automatically be separated by a blank line in the final result.

Links

The most common HTML element one deals with are links to other web pages. These are typically displayed as underlined colored text (blue by default using Microsoft Internet Explorer (MSIE) browers) although MySpace often overrides this behavior using CSS to display the links without the underline.

Also, when the mouse hovers over the link using MSIE, the cursor changes to a different pointer and shows the target web page address (or URL) in the status bar at the bottom of the browser window.

It should be noted that MySpace will often change the URL you provide to one of it's own pages at www.msplinks.com to help prevent links to undesirable web pages that may phish (or try to steal) login information or contain other harmful elements.
MySpace has also upgraded its Rich Text editors to automatically convert web addresses into links without the need for writing the actual code for a link. At the same time, MySpace also inserts spaces into the URL which must be deleted after a copy/paste elsewhere such as a text file.

The HTML code for links are called Anchors and are represented by the <A> tag (note that the case of tags is unimportant: <a> works just as well).

An anchor tag also requires a closing tag </A> be included to wrap the text or image the link displays to the viewer.

An anchor meant to link to another web page (as most are) must include an "HREF" parameter set to the target URL as in the following example:

<a href="http://www.skewsme.com/html_for_myspace.html">HTML for MySpace</a>

This will appear as HTML for MySpace as the end result give or take the specific CSS formatting of anchors MySpace typically includes.

The href=URL in the above example doesn't require the quotation marks wrapping the URL, but MySpace will automatically change the code to include them once you post the message, bulletin, etc. to meet new coding standards.

Sometimes you may want your link to open in a new window instead of redirecting the one your visitor is currently viewing. This is a good idea if you wish to include links on your profile. To launch a new browser window, add to your anchor tag the parameter/value "TARGET=_blank" as in:

<a href="http://www.skewsme.com/html_for_myspace.html" target=_blank>HTML for MySpace</a>

You may also wish to include description text to the anchor that will appear as a popup rectangle when hovering over the link. This is accomplished by adding TITLE="description without any quotation marks within the description" as in:

<a href="http://www.skewsme.com/html_for_myspace.html" target=_blank title="Skews Me's MySpace help file">HTML for MySpace</a>

If you need to include quotation marks in the TITLE text, use the HTML equivalent " as in:

<a href="http://www.skewsme.com/html_for_myspace.html" target=_blank title="Skews Me's MySpace help file for "newbies"">HTML for MySpace</a>

Some URLS you may wish to use may include a pound symbol (#) after the .html followed by a name that represents a location on the page to jump to when it loads (e.g., ...file.html#chapter2). MySpace doesn't appear to support this feature, omitting the pound symbol and breaking the link (...file.htmlchapter2) so you must manually delete the latter part of the URL in your link (in this case: #chapter2).

Images

Images are the next most common HTML element on MySpace and are represented by the <IMG> tag. Image tags, unlike anchors do not require a closing tag.

You may notice that MySpace will automatically insert a slash (/) before the closing greater-than sign (>) in tags that don't have a paired partner once the message is posted, though including them yourself isn't required.

The basics of an IMG tag requires a "SRC" parameter pointing to the URL of the picture you wish to display. For example:

This will appear as in the final result.

Once again, the quotes around the URL aren't required but will be included by MySpace once posted.

To help increase the speed of loading a page, it is courteous to include the dimensions of the images you supply using WIDTH and HEIGHT parameters as in the example:

Once again, MySpace will automatically wrap values to the right of the equal sign with quotation marks once posted.

The width and height parameters may also be used to distort the image, typically to scale down a large picture to fit better on the page.

To use an image as a link, just replace the visual text -- "HTML for MySpace" in the previous Link examples -- with the IMG tag as in:

By default, linked images will display a colored border though MySpace typically alters this using CSS. If you do not wish to include a border, add the parameter/value "BORDER=0" as in:

Dividers

By default, the width of the lefthand column on a MySpace profile is quite narrow. Including a wide image or video there will stretch the column appropriately, but text displayed in that column won't extend to the right along with it. This is where HTML combined with CSS comes in handy.

To allow the text in each field (General, Music, Movies, etc.) to span the the full width of the field, wrap all the code in each field with a <DIV> tag paired with a closing </DIV> tag as in the following example which uses the typical width of a video included from somewhere like YouTube:

<div style="width:425;">
The text to be displayed
</div>

Note that "width" and "425" are separated by a colon (:) and not an equal sign (=). This is required by CSS. Also, the entire STYLE= set of parameters MUST be wrapped in quotation marks. It is good practice to end each style parameter with a semicolon (;) as including multiple parameters requires them as separaters.

Pimping your blog

Say you've just written a blog entry and want to tell your friends about it. Before you go to post a bulletin announcing it, view it under your blogs and click on the time posted located at the bottom-left of that blog entry. That will reload the page displaying only that entry.

In the browser's URL at the top of the page it will read:

http://blog.myspace.com/index.cfm?fuseaction=blog.view&friendID=

followed by numbers and additonal parameters.

At the end of the line there is a parameter &Mytoken= that you do not want to include as part of your link URL. For example:

Instead of:

http://blog.myspace.com/index.cfm?fuseaction=blog.view&friendID=231817211&blogID=359855465&Mytoken=9D52...

You only want to copy:

http://blog.myspace.com/index.cfm?fuseaction=blog.view&friendID=231817211&blogID=359855465

This will be the URL you include in a link to your new blog as in: