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.
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-like Blue Bird. Below is one I purchased from iStockPhoto. You can buy it to or browse around for something that matches your site’s personality.
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.
Quite a good tutorial I have always wanted to update my twitter page but never got the time to learn it through, this will definitely help me do that now.
Very nice, Chris. Not something I’m all that interested in doing (I use Twitter occasionally), but it was great to see the tutorial process.
This is awesome! However, what should be the dimensions of the original photoshop document?
I tried but it does not work.
I do not know where to put the code that Css deliveries.
I might indicate more detail please.
Thank you.
Thanks for this tutorial!
That is nice!