Making your Twitter badge validate

When you get a badge from Twitter and put it on your website,

you may notice that it doesn’t validate.

The code Twitter gives you looks something like this:

<div id=”twitter_div”>
<h2 class=”twitter-title”>Twitter Updates</h2>
<ul id=”twitter_update_list”></ul></div>
<script type=”text/javascript” src=”http://twitter.com/javascripts/blogger.js”></script>
<script text=”text/javascript”

src=”http://twitter.com/statuses/user_timeline/veckd.json?callback=twitterCallback2&count=5″></script>

The first problem is that the ul elements are empty. So in order to take care of that, I added a space (or &nbsp;) to get

this:

<div id=”twitter_div”><ul id=”twitter_update_list”><li>&nbsp;</li></ul></div>

Now you may be wondering, where did the javascript go? I put that at the very end of the page so it is the last thing to load.

This ensures the rest of the page will load before Twitter. The last I did was changing the & symbol to &amp;.

<script type=”text/javascript” src=”http://twitter.com/javascripts/blogger.js”></script>
<script type=”text/javascript”

src=”http://twitter.com/statuses/user_timeline/veckd.json?callback=twitterCallback2&amp;count=1″></script>

And thats it. Now you have a valid Twitter badge!


The voice of the people

  1. Champ

    Get back to TSP.

Leave a Reply

Recently