[More or less for the class I teach now]
- Add one specific HTML element as a placeholder for the tweets
- Add some CSS to have it show the way you want
Following is a short explanation of how it works.
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:
<!-- placeholder for the tweets -->
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.
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:
tja, al met al niet goedkoop met overnachting enzo :( early bird en docentenkeurtings helpen gelukkig wel...</span>
<a style="font-size:85%" href="http://twitter.com/mannobult/statuses/178219079629418496">
11 days ago</a>
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.
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:
- The id of the user you want to show the tweets of.
- 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.
- Show what you retweeted or not. 0 or 1.
- How many tweets you want to show. 1 or more.
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:
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):
/* The placeholder in which the tweets are placed */
font-family: Verdana, Geneva, sans-serif;
/* Each tweet is wrapped inside a list item, have them spaced by a margin */
/* have alternating colors for subsequent tweets */
/* the tweet text itself */
#twitter_update_list li span
/* Links inside the tweet */
#twitter_update_list li span a
/* The link of how long ago the tweet was placed. Note the !important rule to override the inline style rule created by blogger.js */
#twitter_update_list li > a
font-size: 0.8em !important;
background: rgba( 128, 128, 128, 0.7 );
All the above results in the following: