Web Cash

The other day, I was looking into using Picasa to create an image album and embed it as a slideshow on a website.

Uploading the images and creating the album was easy. However, I noticed that the code Google creates to embed the slideshow (a flash file) is not standards compliant – it uses the <embed> tag.

How can we convert this code to a standards compliant version?

The Original Picasa Embed Code

The code that Google generates to embed the flash file uses the embed element. The embed tag includes all of the pertinent information – the swf file, the height, the width, and the parameters.

<embed type="application/x-shockwave-flash"
  src="http://picasaweb.google.com/s/c/bin/slideshow.swf"
  width="288" height="192"
  flashvars="host=picasaweb.google.com&RGB=0x000000&feed=http%3A%2F%2Fpicasaweb.google.com%2Fdata%2Ffeed%2Fapi%2Fuser%2Fslowwalkere%2Falbumid%2F5178325186511467969%3Fkind%3Dphoto%26alt%3Drss"
  pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>

The problem here is that the code uses the embed tag. This is no longer recognized as a valid html element – although it still functions in most browsers.

Converting Embed to Object

We can, however, convert this embed element into an object element. The object element is standards compliant, and with a few parameters it is compatible across most browsers.

To do this, let’s identify the information that we’ll need from the original Picasa code.

Obviously, we’ll need the flash file. This is the value of the “src=” attribute. We’ll also need the height and width, which are pretty obvious. Finally, we’ll need the parameters to be passed to the flash movie – located in the flashvars parameter.

Here’s what an object element might look like to display a flash movie.

<object type="application/x-shockwave-flash"
  data="flash-file.swf" height="400" width="400">
  <param name="movie" value="flash-file.swf" />
</object>

We create the object and give it the attribute type="application/x-shockwave-flash". This tells the browser it is a flash movie.

We pass the name of the flash file with the data attribute and the “movie” param element – notice that the filename is passed twice here.

Finally, we pass the height and width parameters as attributes to the object element.

Filling Out the Object

Now we can take the values provided for us by Google and create a new, valid object to display the flash slideshow.

The only extra thing we need to know is that we can send another param element – name=”flashVars” – to contain the flash parameters.

<object type="application/x-shockwave-flash"
  data="http://picasaweb.google.com/s/c/bin/slideshow.swf"
  width="288" height="192">
  <param name="movie" value="http://picasaweb.google.com/s/c/bin/slideshow.swf" />
  <param name="flashVars" value="host=picasaweb.google.com&amp;RGB=0x000000&amp;feed=http%3A%2F%2Fpicasaweb.google.com%2Fdata%2Ffeed%2Fapi%2Fuser%2Fslowwalkere%2Falbumid%2F5178325186511467969%3Fkind%3Dphoto%26alt%3Drss" />
</object>

This should do the trick and display our Flash slideshow in a standards compliant way. You should also be able to apply this to any other widget that displays a flash movie.

Also, here are two minor things to keep in mind.

The param elements are self closing – i.e. <param />. The param element doesn’t contain any text, so it must be self closing to be standards compliant.

The flashVars value is constructed as a query string. It utilizes ampersands (&) to separate key/value pairs. Ampersands are a standards no-no – they should be escaped as an html entity (&).

Tags: flash, html, slideshow, standards, widget