Displaying tweets on my Site with JavaScript

In the first part, we saw how to display tweets on a website or blog withs a PHP script. This script allows to display all the tweets on a Twitter account or to build an aggregator to keep up informed.

But it is possible to do even simpler thanks to a tools that Twitter has decided to offer to bloggers for their convenience.

Update 2013: The API has evolved and an authentication number is now required. The code below no longer works. It may be replaced by a custom API such as Twitter Fetcher. For some times...

How it works

Add a container whose ID is recognized by the code of Twitter:

<fieldset id="tweets"><legend>Tweets</legend>  
<div id="twitter_update_list"></div>  
</fieldset> 

The type of container is just an example, what is important is the ID: twitter_update_list which is used by the function twitterCallback2 in the script blogger.js.

Add two lines of JavaScript to your Web page after the code of the container, preferably at the end of the page:

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/scriptol.json?callback=twitterCallback2&count=8">
</script>

Replace "scriptol.json" by the name of your account, with the json extension.

You can choose the number of messages to display with count=n where n is the number.

This code is specially designed by Twitter for not spamming their site and so getting the contents at regular intervals and not with each visit of a visitor on your page!

Demonstration

Tweets

CSS code

Example of definition for the outer container, and the legend:

#tweets
{	
    border: 4px double green;
    max-width:700px;
    padding:16px;
}
#tweets legend
{ 
    color:green;
}

The list of tweets:

#twitter_update_list li
{
    list-style-type:none;
    color:black;
}

In this example, we create a border with double edge, and a list without bullets.