How To Make a Unique Website For Your Twitter Updates

In: Blog| Graphics| Internet| Social Networking| Stuff

16 May 2008

Twitter offers an API which you can use to pull information from twitter for your own uses. Even easier, they offer a little javascript widget which automatically uses this API and returns simple HTML of your recent tweets.

Let’s design a unique website for our Twitter updates utilizing this widget.

VIEW LIVE DEMO

1. Design in Photoshop

Create a new document and fill the background with a dark gray color. I used #222222 here.

Select a lighter gray foreground color (#545454). Create a new layer on top of your background layer. Select the gradient tool (sub-tool of the paint bucket tool). In the top bar there will be some settings specifically for the gradient tool. Make sure they are set to ‘Foreground to Transparent’ and ‘Radial’.

On your new layer, drag out a gradient. Doing this on a new layer is best because then you can drag it around and get it just how you like.

Now Google around and try to find a nice Twitter Bird. Below is the one I found which is the logo for Twitteriffic. This is their intellectual property, but I think if you are using it for a personal site that’s acceptable.

Now add the bird, some text, and a box to hold your tweets. The font I used there was Agenda Black. The box is just a fill of blue (#0081e2) at 18% opacity and a 2px white stroke set to the ‘Overlay’ blend mode.

Now export the whole thing (File > Save for Web & Devices) and call it ‘page-bg.jpg’. Now we are ready to build the website!

2. Creating the Basic Webpage

Create a basic HTML file structure:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>

<head>
<title>Twitter Page</title>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<link rel='stylesheet' type='text/css' href='style.css' />
</head>

<body>

</body>

</html>

And the basic CSS file. We’ll use the image we created as a background image for the body, stuck to the upper left.

/*
Twitter Page
Chris Coyier
http://css-tricks.com
*/

*				{ margin: 0; padding: 0; }
body				{ font-size: 62.5%; font-family: Georgia, serif;
background: url(images/page-bg.jpg) top left no-repeat #2f2e2c;}

3. Go get the code from your Twitter page

First go log in to Twitter and go to your homepage. Click the ‘Get updates on your site button’.

Choose ‘Other’.

We want the HTML/Javascript code.

Choose your options (like how many updates you want), and then copy out the code they give you.

Putting together our page

Now that you have the code, you can go in and paste that into the body section of your index.html file. It will look something like this:

<body>

<div id='twitter_div'><ul id='twitter_update_list'></ul></div>
<script type='text/javascript' src='http://twitter.com/javascripts/blogger.js'></script>
<script type='text/javascript' src='http://twitter.com/statuses/user_timeline/chriscoyier.json?callback=twitterCallback2&count=10'></script>

</body>

If you load the page now, it will work, but all the updates will be completely unstyled like this:

Let’s fix that by adding to our CSS:

#twitter_div {
position: absolute;
left: 186px;
top: 99px;
width: 376px;
height: 360px;
overflow: auto;
}
ul#twitter_update_list {
list-style: none;
font-size: 14px;
}
ul#twitter_update_list li {
margin-bottom: 10px;
padding: 10px;
color: #7a8a99;
background: url(images/transpBlue.png);
}
a { color: #96997a; }

And there we have it! A pretty cool and unique looking Twitter updates page.