aloftweb development & more

[More or less for the class I teach now]

For showing your tweets (or anyone’s for that matter) in a website, twitter offers two JavaScript files, blogger.js and user_timeline.json. To make it work, there’s three steps to take:

1. Add one specific HTML element as a placeholder for the tweets
2. Embed two JavaScript files into your page
3. Add some CSS to have it show the way you want

Following is a short explanation of how it works.

The HTML

You only need to place one HTML element in your page into which the tweets end up. This element needs to have the id attribute set to twitter_update_list. This is because the scripts need to know where to put the tweets. In the example below I use a unordered list ( <ul> ) as a placeholder. So, somewhere in my page there is this code:

The JavaScript files

The two files can be linked to your page from the twitter server, so no need to host them yourselves. The embedding can be done by copy pasting the following code right below the HTML seen above.

The first can be embedded as is, there’s no settings to it, nor the real need to change it’s code. The second does need some settings. They are discussed after the next section.

blogger.js

The file you just need to embed, nothing more. This file contains two functions to parse the incoming data into chunks of HTML. Each incoming tweet is placed inside a list item (<li>). Usernames (words preceded with the at-char (@)) are made into links to the twitter timeline of that person. Furthermore, all links are wrapped in an anchor tag. Lastly a link to the actual tweet is created from the id of the tweet. The tekst linking to the tweet is the indication how long ago the tweet was placed. This leads to, for instance, the following HTML structure:

Nasty detail IMHO here is the inline styling of the link to the tweet. I guess they had better left it to the CSS of the user. Fortunately there is the !important rule to override it.

The function that does the parsing looks for an element with the id ‘twitter_update_list’ to place all the list items in. Since the parser places the individual tweets into list items, it makes sense to use a list ( (<ul> or (<ol> ) as this html element.

user_timeline.json

This is the script that does the actual request to twitter. Here you can set a number of options to determine what is retrieved from the twitter server. Here is a short overview:

user_id

The id of the user you want to show the tweets of.

screen_name

The screen name of the user you want to show the tweets of (this is the name that appears in the browser address bar when you view that user’s timeline on twitter). Either this one or the user_id needs to be provided, not both.

include_rts

Show what you retweeted or not. 0 or 1.

count

How many tweets you want to show. 1 or more.

callback

Required. Leave as is or write your own JavaScript to parse the data coming in from the server.

For a more detailed description, see: the twitter docs

All the settings are done as GET parameters on the URL of the script. So, broken into separate lines it reads like:
http://api.twitter.com/1/statuses/user_timeline.json?
screen_name=mannobult
&include_rts=1
&callback=twitterCallback2
&count=4

The CSS

The CSS you want to add is of course entirely up to you. However, knowing what HTML output the JavaScript generates is necessary.
So you may want CSS for the following elements:

• The element you placed yourselves (with id=”twitter_update_list”)
• List items that appear inside it (containing all info of one tweet)
• A span element inside the list items
• Anchor elements inside the span for any links in the tweet
• The anchor element which is a child of the list item (with the link to the tweet)

Below an example of what the CSS could look like (comments in the code):

All the above results in the following: