What does a permalink look like?

If you were a permalink, what would you look like?

I’ve decided to add a permalink symbol (or graphic) to each post to make it more apparent how to link directly to a single post. WordPress (the blogging software this site uses) by default makes the title of each post the permalink for that post. But before I add anything, I thought I would ask and see what everyone thinks these links should look like.

I would venture that the text “Permanent link” is the most user friendly, however, it takes up a lot of space and doesn’t really look very nice. So in trying to balance looks with usability, I want a graphic or symbol that conveys “click me, I’m permanent.”

Here are a few samples from other blogs:

Kottke: Permalink

Instapundit: Permalink

Anil Dash: ¶

37 Signals SvN: Permalink

Waxy.org: Permalink (with text “PERM LINK” next to it)

And of course, we always have the generic: #

I also asked Google what it thought a permalink looked like.

I like a couple of these, but I’m not sure they really say “I’m a permanent link.”

The next task is determining placement. Should the permalink go next to the title of the post? Next to the date? Next to the comments link? Maybe we could leave it all alone adjacent to the comments link, or somewhere else new and exciting?

My last comment is on the word ‘permalink.’ Is it descriptive enough for a new internet user to figure out the meaning? I’m not so sure, and I think I’ll be using the words ‘permanent link’ as alternate text for mine.

Maybe it’s time the blogging world got together and established a standard (suggested, of course) graphic or word for these permalinks.

Web standards compliant Javascript Flash detect and embed

FlashObject now has a permanant home at this url: http://blog.deconcept.com/flashobject/.

This post is partially out of date, and has been superceeded by Proper Flash embedding: FlashObject Best Practices. I’ve also closed the comments, please leave feedback in the new post.

Nearly every project I work on these days has Macromedia Flash involved with it some way or another. If you’re into the whole web nerd thing, you’ll know that embedding Flash in a XHTML page doesn’t play so nice with these web standards everyone is raving about. Developers basically have two choices these days when working with XHTML and Flash:

  1. The Flash Satay method, which uses a single object tag to embed the Flash movie. This method’s main drawback is that the movie won’t start playing until it is 100% loaded. This can create problems with large Flash sites where the user would be left with a blank screen until the movie loads. There are ways around this, but it involves using another swf file that loads your main movie and placing the preloader inside the first swf. This can clutter up your directories with ‘holder’ movies and make adding Flash content much more time consuming than it should be.
  2. Use Javascript to write the object / embed tags – This seems to be the most common way of embedding Flash today. Drawbacks include reliance on Javascript being enabled on the user’s browser, and having to include a .js file with each Flash movie, or rewrite the object and embed code for each movie.

With these in mind, I decided to come up with a standard way to embed my Flash movies, whether it be a single movie on a page (full Flash site) or multiple inline Flash elements on a larger XHTML page.

The features I wanted are:

  • Ability to embed unmodified Flash movies without the aid of other Flash movies
  • Ability to detect the Flash player version in the user’s browser and display alternate content if needed
  • Alternate content options – plain text (HTML), redirect, or image
  • Must validate as XHTML 1.0 transitional and up
  • Must accommodate any type of Flash embedding, including additional parameters and variables passed in via the Flashvars parameter
  • Easy to use (even non-technical designers should be able to use it!)
  • Must be able to be bypassed. What if the user has Flash but the detect failed for some unknown reason? (new browsers, unexpected plugin architectures, etc.)

With all this in mind, I started to look around for what other people have already come up with. Most large sites I looked at used simple Javascript to write each Flash movie to the page, or some reusable code that accepted parameters for the Flash movies. ABC News had the most advanced version I could find, with some excellent reusable Javascript that detected the plugin and could not only write the object and embed to the page, but could also target an element on the page and place the Flash movie inside it.

The ABC News code to write a Flash movie to the page looks like this:

var logo = new Flash("/flash/abcnewslogo.swf", 64, 64, 6);
logo.setParam("wmode", "transparent");

To view their Flash embed code, look here.

This isn’t bad at all, but it’s missing a few of my requirements: No way to specify alternate content if the user doesn’t have Flash (and no non-Flash site redirect option), and there’s no way to bypass it – if someone has some new unknown browser with a Flash plugin, and this script can’t find their plugin, there is no way they will get to see your Flash content.

So. Using this code as a base (except for the plugin detect, which I already had a copy I pieced together a while back and was basically the same thing anyway) I put together a new version with everything that I needed.

Here is what a basic Flash embed would look like:

var flashDial = new FlashObject("xm_dial.swf", "xmdial", 527, 349, 6, "#ABAFAE");

You can also target a specific element to place the Flash movie in by passing an element id in the write() method, like this:


And here is a sample of what it would look like if you placed the code on the page and included alternate content and a few other optional parameters:

myFlash = new FlashObject("swffile.swf", "swffile", 500, 300, 6);
myFlash.altTxt = "<h1>You need to upgrade your Flash Player!</h1>";
myFlash.addParam("wmode", "transparent");
myFlash.addParam("salign", "top");
myFlash.addVariable("varname", "varvalue");

And that’s it! If you need to overwrite a default parameter, like quality, you would just set the parameter:

myFlash.addParam('quality', 'low');

If the user has Flash, they see the Flash movie. If they don’t, they will see your alternate text and a link to disable the Flash detect. This is done by simple adding detectflash=false to the query string (the link is added to the alternate text automatically unless you overwrite it).

Here is a sample page with a little Flash movie. Try uninstalling your Flash plugin and viewing the page.

I’ve also made a Flash template for this (included in the .zip file), so you can publish the javascript code you need directly from Flash – it’s not perfect, and only provides the very basic embed code, but it’s a nice starting point.

Download the FlashObject source code. Check out the updated version for the latest code downloads.

UPDATE (10-15-2004): Mark Wubben pointed out that there were couple loose variables hanging around, so I fixed that up. I decided to leave the getFlashVersion() function out in the open so it can be used independantly. Maybe you would want to use it to provide a general help statement without embedding a Flash movie?

UPDATE (10-20-2004): Just a small update, I removed the codebase variable since it will never be used by the browser. The only reason it’s in there is to give the browser a URI to download the plugin from, but since the Javascript won’t write the plugin code if they don’t have the plugin, it will never be used.

UPDATE (10-20-2004): I just posted a little follow up to the whole application/xhtml+xml mime types problem.

UPDATE (11-11-2004): Martin Klasson wrote and told me about how escape() tends to munge up some characters like ø and ä to name a couple. So I took it out, and switched the example page to utf-8 (because it should have been anyway). You’ll just have to watch out for things like double quotes being passed in through flashvars, but ideally you wouldn’t be doing that anyway, right?

UPDATE (11-13-2004): Just found a bug in the getQueryParamValue() function and fixed it. I should also note that you can use that function to grab URL parameters and send them to your Flash movie, so I added a little note in the usage comments on how to do that.

UPDATE (11-15-2004): Fixed a small bug pointed out by Manoloweb where the alt text would be written in the script tag instead of the target div if you specify a target. All fixed up now.

XM Radio Online launched

We just finished up version 1 of the XM Radio Online player. I’ve been working on the UI for this for the last few weeks, hooking it up to their XML back end and wrestling with the Windows Media Player plugin setup. Unfortunately it will only play on Internet Explorer on a PC because of a previously mentioned problem I encountered when building it, which is really too bad considering I don’t even own a PC to enjoy this on (I’ve been enjoying OS X for the last year or so).

Go sign up for the free three day trial and check it out.

UPDATE: The Windows Media Player 10 version launched today – grab WMP 10 and hit the dropdown in the top right corner and select XM Radio.

UPDATE (10-23-2004): I just realized I forgot to mention a little easter egg in the online player: you can use your arrow keys on the keyboard to navigate the channels and the spacebar selects them.