Valid XHTML Strict Twitter JavaScript Code

20 May / 08

Twitter has become ever so popular and everyone is rushing to start tweeting, if they have a blog, they would want it to be displayed. However if you actually cared about having a valid XHTML site, you would have noticed that the code provided by Twitter has a couple of errors.

I will cut to the chase and give you the valid code.

The valid Twitter code

1
2
3
4
5
6

<div id="twitter_div">
      <h2 class="twitter-title">Heading title</h2>
      <ul id="twitter_update_list">
            <li></li>
      </ul>
</div>

To ensure that your page loads even if the Twitter JavaScript is being wonky, place the these JavaScript includes just before the </body> tag:

1
2
3
4
5
6

<body>
      <!-- Your site code -->
 
      <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
      <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/Username.json?callback=twitterCallback2&amp;amp;count=Number of tweets to display"></script>
</body>

Replace the Header title, Username, Number of tweets to display with your respective values.

Here is what has been changed from the original code:

  1. A <li> tag has been added within the unordered list
  2. The ampersand (&) has been replaced with its character code (&amp;) to fix the validation errors

Now you can display your tweets without breaking your site’s validation. Hope this helps you!

Related Posts:

Your Say ...

  1. Bernard says:
    21 May / 08 at 10:49am

    Ooh nice.. thanks! I never use Twitter before though. Maybe I should try..

    Reply
  2. Rob says:
    1 Jun / 08 at 2:25pm

    Thank you very much for this post…this saved me some time tonight. One additional note for improving performance, you can place the two “script” lines at the very bottom of the section of your page. That way, your page will load first, and then it will ping twitter for your latest tweets. If twitter is down, at least your users will be able to see the rest of your site.

    Reply
  3. Darran says:
    1 Jun / 08 at 5:20pm

    Thank you for the mention.

    More specifically, place the 2 script tags just before the </body> tags.

    Reply
  4. Phil A says:
    15 Jun / 08 at 4:47am

    I was working on getting my blog Valid XHTML. Now I am done. Thanks for the twitter & & tip. There are actually a whole lot more buttons out there that mess up your validation with these…

    Reply
  5. Darran says:
    15 Jun / 08 at 9:44am

    Congrats on a job well done. I noticed you are using XHTML Transitional. Why would you not want to use XHTML Strict?

    Reply
  6. Gavin will says:
    16 Mar / 09 at 2:50am

    Thanks for this… Simple added to the code and its now all valid.

    Cheers

    Reply
  7. MojoWill says:
    30 May / 09 at 9:51am

    Brilliant thanks for this!

    Reply
  8. wallpapers says:
    16 Jul / 09 at 11:00pm

    Hi, Thanks for sharing , I am going to put on my site

    Reply

Write ...