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 (&).

There are a few things you need to keep in mind while writing an XML document, or else the RSS reader will not be able to understand it. It’s better to think of writing XML as writing code than text, because there are some strict syntax rules you need to adhere to.

Balance Opening and Closing Tags

One strict syntax rule of XML is that opening and closing tags must be balanced. For every opening tag, there must be a closing tag.

<item>
  <description>
</item>
 
<item>
  <description></description>
</item>

In this example, the first item element is invalid – because description has no closing tag. The second example is valid, because description is closed. You could also use a self-closing tag if description doesn’t contain a value.

<item>
  <description />
</item>

With a simple feed, it can be easy enough to keep tags balanced. However, it’s a good idea to look into using an XML parser like SimpleXML to build the feed. This ensures that the tags are balanced and that the XML is well-formed.

Ampersands Are Not Allowed

The lovely ampersand – & – is not allowed to appear in an XML document without being escaped (&).

If a browser or feed reader encounters an ampersand that isn’t escaped and that isn’t being used to form a valid entity, the application will simply stop reading. You might overlook this possible problem if your URLs use query strings – and thus have ampersands inside them.

The solution is to escape all of the URLs and data that is going into your feed. The reader will convert & back into & so that your links work correctly. PHP offers a function to help you do that.

$escapedText = htmlentities($unescapedText);

Pass all of the text that needs to be escaped (like your URLs) through the htmlentities function, and your problems will be solved. Incidentally, this will also escape > and < characters.

No Non-Breaking Spaces!

The final tip deals with invalid entities, like  . As mentioned before, ampersands are a strict no-no. They can be used to form entity codes, but they cannot be used by themselves.

If you attempt to create an entity that the XML processor doesn’t recognize, it won’t read it as an entity – it will read it as an ampersand with some text following. For example, &bob; would be read by an XML processor as an ampersand and the word “bob;”.

It would then promptly stop processing your feed.

One common way for this to break your feed is the non-breaking space character –  . These often serve no purpose in the document, but you might get them littered around your source code if you use a WYSIWYG editor.

You could get rid of these by filtering your output through a function that does a str_replace of   with ‘ ‘.

If the non-breaking space character serves a purpose in your document, you can preserve it for the browser but make the XML processor ignore it. This is where CDATA comes in.

<description><![CDATA[This is a description with content that
<strong>shouldn't</strong> be interpeted
by the &nbsp; XML processor.]]></description>

When you wrap text inside that tag – <![CDATA[ and ]]> – you tell the processor to ignore the text and spit it out as is. This can help your non-breaking space character make it to the user. You may also want to use this if your descriptions and content include HTML tags.

Browse the Spec

These are a couple of tips to help you address some of the more common things that will break your XML documents.

However, there are many other minor errors you can come across. The only way to learn about them and solve them is through two things – research and trial and error.

You may want to take some time to browse the XML specification as well as read forums for problems that other people have. Then, test things out and find out what doesn’t work.