How to Put an XHTML-Compliant Twitter Badge on your Website

The Flash badge that Twitter offers on their website is not XHTML compliant as it uses the embed tag and uses plain ampersand (&) characters instead of & which is the correct XHTML-compliant form. This page shows how to take Twitter's Badge html and reform it into something that is XHTML compliant and will pass an XHTML validator.

1. Log into Twitter and click on the badges link at the top of the page.
2. Format the Badge so that it looks as you would want it on your webpage (change the colours, etc.).
3. Click the “Copy to clipboard link”
4. Paste the copied text into the .html file you want the badge to appear in. It should look something like this (where ”—COLOR1—”, ”—COLOR2—”, ”—USERNAME—”, and ”—USERID—” are your personal details (this example has replaced these to maintain generality):

   <div style="width:176px;text-align:center">
   <embed src="http://twitter.com/flash/twitter_badge.swf"  flashvars="color1=---COLOR1---&type=user&id=---USERID---"
     quality="high" width="176" height="176" name="twitter_badge" align="middle" allowScriptAccess="always" 
     wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
   <br>
   <a style="font-size: 10px; color: ---COLOR2---; text-decoration: none" href="http://twitter.com/---USERNAME---">
   follow ---USERNAME--- at http://twitter.com</a></div>

5. Rewrite the above code to look like this (make sure you copy your user id and colours exactly - replacing ”—COLOR1—”, ”—COLOR2—”, ”—USERNAME—”, and ”—USERID—” with your values in the text below):

   <div style="width:176px;text-align:center">
   <object type="application/x-shockwave-flash" data="http://twitter.com/flash/twitter_badge.swf" width="160" height="160">
     <param name="flashvars" value="color1=---COLOR1---&amp;type=user&amp;id=---USERID---" />
     <param name="quality" value="high" />
     <param name="mode" value="transparent" />
   </object>
   <a style="font-size: 10px; color: ---COLOR2---; text-decoration: none" href="http://twitter.com/---USERNAME---">
   follow ---USERNAME--- at http://twitter.com</a></div>

6. Your code should now appear as before in your webpage, and be correctly validated.

This technique is demonstrated on the right sidebar of my blog

~~DISCUSSION~~