AmirWatad.com

Embed a Valid XHTML Twitter Widget

Recently, I decided to embed the flash twitter widget in my blog. In general, I don’t like to use flash because it’s a proprietary format, but looks like it’s becoming a de-facto standard and it’s not easy to cover its functionality with open source alternatives.

Embedding the twitter widget should be easy, just to copy-past a short HTML code, and that’s it.

And this is what I did, and it worked. But, when I tried to validate my website’s XHTML, I got errors:

The supplied code uses the “object” tag, which is non-standard and therefore not XHTML compliant.

I have a few choices:

The easiest is to accept having a non XHTML compliant website: Not me, I’ll never do this consciously.

Another option was to use a non-flash widget: Actually this is what I did till now, it’s simple and nice, but flash looks much better.

So, I’m left with the only option of fixing the code, which was, in this case, a very simple task.

I won’t explain the functionality of each tag, since I’m not a HTML expert. I’ll just give an “algorithm” to fix the code, so I/You can use it as a reference for later times. If you want to learn more about HTML tags, this is not the place, at least not for now.

Here we go:

When you choose the flash widget from Twitter, you’ll get a code similar to this:

1
2
3
4
5
6
7
8
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,124,0"

width="290" height="350" id="TwitterWidget" align="middle"/><param name="allowScriptAccess" value="sameDomain"/><param name="allowFullScreen" value="false"/><param name="movie" value="http://static.twitter.com/flash/widgets/profile/TwitterWidget.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#000000" /><param name="FlashVars" value="userID=16738995&amp;styleURL=http://static.twitter.com/flash/widgets/profile/smooth.xml"/><embed src="http://static.twitter.com/flash/widgets/profile/TwitterWidget.swf"

quality="high" bgcolor="#000000" width="290" height="350"

name="TwitterWidget" align="middle" allowScriptAccess="sameDomain"

pluginspage="http://www.macromedia.com/go/getflashplayer"

 FlashVars="userID=16738995&amp;styleURL=http://static.twitter.com/flash/widgets/profile/smooth.xml"/>

</object>

The problematic part is the “embed” thing, so, first of all, we’ll Remove the embed tag.

Now, the code is XHTML valid, but unfortunately it doesn’t work in good (non IE) browsers.

We’ll use nested object tags to fix this:

After the first object tag, we’ll add this:

1
2
3
4
<!--[if !IE]>-->

<object type="application/x-shockwave-flash"

data="http://static.twitter.com/flash/widgets/profile/TwitterWidget.swf" width="240" height="350">

<!--<![endif]-->

The comments are actually part of the code, they tell IE to ignore this, so this tag is applicable only in better browsers (Firefox, Opera, etc..)

Of course, we’ll need also to close this tag, so we’ll add this one line before the closing object tag:

1
2
3
<!--[if !IE]>-->

</object>

<!--<![endif]-->

Last thing is to replace all instances of & with &

That’s it, now every thing should be fine.

P.S. : This “trick” is useful for other cases when you embed flash. I’m not sure how it works with large flash files, this is something that needs deeper investigation.

Related posts:

1. Fetch Links From Twitter Into Your RSS Reader
2. Embed A Document Using Google Docs

Tags: Web Development