it's too bad that their names are so similar. in the logs i'm seeing people trying to use the myspace pet code in their MSN space. it's not surprising, i guess–that final page of codes is overwhelming, and a quick scan could easily lead one to use the wrong one. i really need to redesign that page somehow.

oh, also, i never noticed this before, but myspace disallows <!-- HTML comments --> in user profiles: it strips out the opening comment mark, leaving the comment visible in plain text. i'm not sure of their rationale for that, but it's good to know…

warning: long ramble! these are just some notes to myself about providing code for people to embed their pets in their own web pages.

goals

1. code pasted into the web page shouldn't be TOO long — macromedia's recommended HTML code for flash is pretty verbose (there are shorter versions, but they all have minor issues with one browser or another that affect my pets)
2. link text back to the site should be in the external page itself, rather than in an iframe or generated from javascript, so that search engines will find it on their page
3. should work on windows and mac, internet explorer 5+, mozilla/firefox, safari

approaches

• use macromedia's flash tags as is. this violates goal #1.
• <script> tag with external src file (this is what i currently use). the script generates the verbose flash tags. script tag is surrounded by a table so that the "adopt your own virtual pet!" link can be directly below it. it would be nice if the script generated the entire table, too (good for goal #1) but then that would violate goal #2. i suppose i could also do the text-link alignment with CSS instead of tables…
• iframe. the iframe's src points to a script that generates all the flash tags. this would also require a table around the iframe (or div/css solution) so that the "adopt" link can be directly below it.

why did i go with embedded scripts instead of iframes? i think it's because i was still partially supporting netscape 4.x (!), which doesn't know iframes. the reason i was still partly supporting netscape 4 is because the toronto public library's public internet terminals were still using netscape 4 as recently as last year (!!), and i felt like i needed to support local kids using library computers, for whatever reason…. today, though, the library computers run IE, i don't test on netscape 4.x at all, and the browser barely registers in my stats, so it's no longer really a concern.

that's also why i used tables instead of divs, come to think of it…

specific services and HTML filtering

i never considered livejournal, xanga, msn spaces, myspace, etc when i first created the pets, so i hadn't considered what those sites allow.

• livejournal strips out most of everything (javascript, objects/embeds, iframes), so only images are allowed. msn spaces is pretty much the same way.
• xanga allows javascript in parts of your layout, so the regular version of the code works.
• myspace has strange filters. scripts are stripped out. images are allowed, unless they don't end in .gif, .png or .jpg (so my original image script broke because the url looked like /adopt/petimage.php?param=value. i had to change it to /adopt/petimage/encoded-params.png…). objects are not allowed. embeds are allowed, but only if the filename ends in .swf (i think some other extensions are allowed too, i haven't tested)… but embeds are turned into iframes! plus all the embed parameters are stripped out. iframes are allowed, but only for certain filename extensions (like embed).

i'm about to make some myspace-specific code for the pets, using iframes and a bogus .swf extension… but perhaps i will change the general code to use iframes instead. hmmm should test this on other services first.

summary: pasting pets into rich edit controls on IE!

background: all this time i had thought that the pets were compatible with MSN spaces (as long as you used the image-based version of the pet code anyway). and i'd tested it, even… but with firefox only.

it turns out that when you add a blog entry to your MSN space using IE on windows, you get a nice rich text editor. the rich text editor doesn't allow you to paste in raw HTML code… trying to do so simply results in the HTML code being displayed as text, instead of the desired happy pet image.

(on any non-IE browser, you get a plain textarea where you can enter in all the HTML you want (although many tags are filtered out), so the pets work fine in those browsers.)

what to do? although it's tempting to simply tell everyone to use a non-IE browser, that wasn't a realistic option for me. and unlike many other bloggy sites with rich text editors, MSN spaces doesn't have an option to turn off rich text editing!

ack!
(more…)