Getting Twitter Badge Code to Validate

  • Posted In

So I’ve just recently started using Twitter. I figured that I better hop on the train before it completely pulls away! Also, I figured that in the future that I would have clients that would want to integrate Twitter into their sites. So if you take a look at toward the bottom right of our site you’ll see our little Twitter feed. Well you should see our Twitter feed. I’ve been noticing on our site as well as other sites that Twitter doesn’t always show up due to their server. So many people are using Twitter now so sometimes it gets slow.

Anyway, so basically the easiest way to start putting up your feed onto your site is to go to and log in (if you don’t have a Twitter account you’ll want to set one up quick first, of course). Then it gives you the option to pick a MySpace, Blogger, etc. default image. Of course those are not the links that we want, so at the very bottom of that page you’ll see an ‘other’ option. Clicking that option it will bring you to another set of options and the one we want to pick is the last option which uses HTML/Javascript.

After that has been selected you have a few options before you grab the code. You get to select how many updates you want to show, if you want to show a title, and then the code. A cool part about this page is that you can adjust the first 2 options and the box with the code will update automatically for you as well as the preview. So for our example on this site we only want to show the latest Twitter update so we’ll set that option to 1. And we don’t want a title so we’ll check the ‘No Title’ option. After that we’re ready to grab the code. But we can’t just drop in the code as is. We want to take the 2 <script> tags and put them right above the closing <body> tag. Then next is working with the HTML to put the feed on your site.

As you can see on our site we didn’t just want to throw up the code. It’s really easy to add just a little bit of dynamic to the look quickly so let’s take a look at what we’re trying to make. After working with the CSS and pasting in the code from Twitter we get our final result. But then after heading over to the W3C to check validation we get a big old Invalid page. What the heck? We took the code right from Twitter…

So I experimented with the code a bit. The reason that the W3C says that the page isn’t valid is because our list is empty. Since Twitter’s code is set up to be a list we basically have <ul> opening and closing tags with nothing in between. So I tried a couple things that didn’t work then finally thought about it for a second. The Twitter Javascript is pulling in the information dynamically. So when the code is exported its not actually placing the text into the HTML like PHP does. So our <ul> code is left blank even though the feed is showing up. So what does a list need… Hmm… A list needs the <li> tags. So after throwing in an opening and closing <li> tags with nothing in between the page validates!

And thats it! All we needed was an <li></li> in between the <ul></ul> to make it work!

Stay In The Loop

Social Gathering

Join our newsletter to get notified about the happenings here at J Taylor Design.