How To Display Your Twitter Status in a Unique Design

There are stacks of plugins out there that allow you to display your latest tweets on your website or blog. However sometimes, all you want is to quickly and simply display your latest Twitter updates, without wrestling with preset styling, or lengthly settings. Let’s take a look at using Twitter’s good old Javascript approach to pulling out your latest update, and displaying it with a mix of CSS styling.

In the olden days, Twitter used a handy Javascript approach to display tweets elsewhere on the web. For some reason this has been replaced by a bunch of ‘goodies’ by Twitter, mostly in the form of widgets. We can still find the Javascript method however, either from past tutorials, or via the Twitter API Wiki.
Here’s what we’ll be building; A simple layout that displays the latest tweet from a particular feed. In this case it’s from the Line25 Twitter profile. While this demo uses a full page design, the same approach can be used to display up to 20 tweets anywhere on your website.

View the demo

The Concept

Let’s start by fleshing out a concept to gain a good idea of how the updates should be displayed. Here I’ve used the repeating Line25 grid background, laid out the @line25blog username as a large header, used a cut little Twitter mascot from Blog.SpoonGraphics to introduce the message and styled each tweet in a rounded container.

The HTML

<div id="twitter">
	<h1><a href="http://twitter.com/line25blog">@line25blog</a></h1>
 	<ul id="twitter_update_list"></ul>
</div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/line25blog.json?callback=twitterCallback2&count=1" type="text/javascript"></script>

Next up the HTML can be written out. Everything is enclosed in a DIV with the id of Twitter, followed by a UL with an id of twitter_update_list. This is where each tweet will be listed.

The two options to edit are the name of the profile to retrieve the posts from, and the number of tweets the script should display. So, you could display your very latest tweet, or a list of recent messages.

Viewing the HTML in a browser so far should show that everything is working correctly. Next up is to inject some visual styling with a touch of CSS.

The CSS

body {
	background: #909ca6 url(http://line25.s3.amazonaws.com/wp-content/themes/line25/images/body-bg.png);
}

#twitter {
	width: 500px; margin: 130px auto;
}

	#twitter h1 a {
		display: block; margin: 0 0 15px 0;
		font: 90px Helvetica, Arial, Sans-Serif; color: rgba(255,255,255,0.2);
		text-decoration: none;
	}
		#twitter h1 a:hover { color: rgba(255,255,255,0.3); }

	#twitter ul {
		list-style: none; padding: 0 0 0 140px;
		background: url(bird.png) 0 0 no-repeat;
	}
		#twitter ul li {
			padding: 20px;
			background: rgba(255,255,255,0.1);
			border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;
		}
			#twitter ul li a {
				font: italic 14px/30px Georgia, Times, Serif;
				color: #555b6e;
			}
				#twitter ul li a:hover { color: #1b2f6f; }

		#twitter ul li span {
			font: 22px/30px Helvetica, Arial, Sans-Serif; color: #fff;
		}
			#twitter ul li span a {
				font: 22px/30px Helvetica, Arial, Sans-Serif;
			}

A few lines of CSS can soon transform the appearance of the HTML. In the original concept I made use of transparency of various elements to show the grid pattern background. To replicate these on the web, I’ve used RGBa to specify not only the red, green and blue channels, but also an alpha channel to determine the opacity of the element. Using this on the title, hover state and list background can add some cool styling!

View the demo