Line25

How To Display Your Twitter Status in a Unique Design

Read the full post

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

View the demo

The Concept

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.

Editing the source

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.

Testing the code

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

View the demo

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

71 Comments

  1. chaitrax says:

    tweet this…..

  2. Indrek says:

    Great tutorial. Didn’t think it would be so easy to fetch your tweets.

  3. Brandon Diaz says:

    Thanks alot for this, I’ve been using an RSS aggregation setup and I’ve been trying to find a simpler solution.

  4. Hangar17 says:

    Interesting ! Keep good postings..

    web design and development- Hangar17.com

  5. Great post. I was doing this yesterday too. I was pulling back the last 5 tweets :)

  6. Man, thanks a lot.

    This is a really cool tut. I have been following you for the last six months, and you had always brought great stuff.

    Thanks for sharing with us.

  7. Great technique. I will have to put this to use very soon :)

  8. This is a really great, super useful tutorial – thanks for sharing!

  9. Chris Kemm says:

    Nice! Im using custom PHP script to parse RSS currently on my site, this is much more simple.

    Thanks

    • ThatGuy says:

      I’m in the same boat… If I had known a month ago that you could call a .js script, pass a few parameters and get a preformatted list of tweets, I wouldn’t have done so much parsing!

  10. 30FLondon says:

    Would the same work for blog posts?

  11. Tomas says:

    Looks great, thanks for this useful tutorial.

  12. Franz Jeitz says:

    This is exactly what I need for my microfolio site. Thanks!

  13. I use the same technique a lot, even in my WP builds because it’s still lighter and slicker than any of the plugins.

  14. David Boyer says:

    Good use of a resource that exists already. Keeps from having to add a plugin or write a script since Twitter has already provided it for you.

  15. om ipit says:

    nice …
    for other example, can see on my blog..

  16. sriganesh says:

    thanks for the link, the first half i am using before, but i dont know how to make it as unique. until now it shows as a list. now i can add my own twitter bird and make it unique, thanks for the handy tutorial :D

  17. Designerkan says:

    Really Great.. thank youu

  18. Great and simple tutorial. Thanks Chris!

  19. Fahd Butt says:

    Thanks for the tutorial :)

    Just randomly: I found it really interesting that you are indenting your CSS code to mimic the structure. I haven’t seen that before. However, I’m not sure how this would work for styles that are shared between elements.

  20. Terrance says:

    Works great, except for multiple accounts on 1 page. Only the last tweet of the last account is shown. Is there a way to show multiple tweets in a single page with a technique like this?

  21. ThatGuy says:

    I had no clue that twitter implemented a script like that to return tweets so easily.

    If you wrote a quick little post/comment about how that blogger.js script or the script with username and #ofTweets works, I’d *love* to know the details.

  22. safetycopy says:

    I just finished working on v1 of a jQuery plugin, YouTwit!, that does this. Check out the github repo.

  23. Danstyled says:

    Good Work!,

    doesn’t validate though :S

  24. Petrus says:

    Very useful. Thanks a lot for the tutorial.

  25. This is really cool and will help me with my new portfoilio design! :D

  26. Dusan says:

    Great tip. I’ve been using this method for some time now, but since twitter implemented new retweet function it doesn’t work as it should. For example, if you set tweetcount to 1 and then you retweet, nothing is shown. Although it could be just my messed up settings

  27. Nice tutorial Chris.. :) I recently wrote a tutorial on how to spice up your twitter feed displays using CSS. It uses simple css techniques to make the twitter display more interactive for the user reading it..
    Here is the link : http://www.code-pal.com/spice-up-your-twitter-feed-box-using-css/

  28. Ajay says:

    Great tip. Thanks for sharing.

  29. ilz says:

    Here’s a jQuery option, which lets you style the background of each tweet when you show more than one.

    http://webdesignandsuch.com/2009/12/embed-a-twitter-feed-on-your-website-with-jquery/

  30. This is a nice guide, but you should really be caching the json on the serverside, for the following reasons:

    Twitter limits the number of requests to the json feed within a given period of time. – If you happen to be visiting the page frequently, and each time it’s requesting the json, you’re going to find yourself unable to access the feed for a while.

    As with any resources hosted on a web server separate to where your website is, if the place hosting the resource goes down, your page will take a long time to load while it tries to get to the resource.

    If you cache the json locally, and only update at a given interval/as requested, you can avoid this problems.

    On my website I cache my twitter feed with php, and then read the latest tweet from the cached file. It’s setup to reload the cache every 10+ minutes.

  31. Wow! This is absolutely brilliant! Thanks for sharing.

    Cheers

  32. Thank you for sharing! This is an excellent post, highly appreciate this little creative details.

  33. Great article. I love coming up with new ways to show Twitter status – Stay away from those stock widgets etc! :-P

  34. Joe says:

    Exactly what I was looking for!

  35. Very cool, I am currently working on this for my site. Great resource, thank you.

  36. Jason says:

    Only just started using twitter, I didnt realise it would be so easy to incorporate latest tweets into my existing website, cheers!

  37. vidyaputra says:

    wow, i didnt know that it would be so easy…

  38. really useful. Btw I want to put my profil pic, how can I do that?

  39. David Silva says:

    I like this. I just tried it on a site redesign I’m doing.

  40. gamal ezzat says:

    أنا أحب هذا. I just tried it on a site redesign I’m doing. وحاولت فقط على موقع إعادة تصميم أفعله.

  41. Richie says:

    Wow… this is easy and simple.. loving it already… thanks Chris

  42. Web Lodge says:

    Great feature. Thanks to you and Twitter!

  43. Joan says:

    wow thanks chris

  44. Shondra says:

    very very helpful yet simple…thanks for the post

  45. I’m definitely using this for my website. Thanks Chris!

  46. Sigurfreyr says:

    What I like about Spooners tutorials, is they are short, simple and to point. Unique and always relevant.

  47. Chris says:

    Simply brilliant.

  48. Chris says:

    Anyone figured out how to display re-tweets yet? Mine aren’t showing up?

  49. Great tutorial. Very easy to follow.

  50. Thank you very much, great css to work with. Nice to have it!

  51. Mark says:

    Hi,
    Great tutorial, I like it very much :)

    I have a question for you. Is it possible to have some space between the tweets? How do I do that?

    Tnx in advance :)

    Greetz

  52. Arron Davies says:

    its so awesome how easy you have made this, ive looked at a number of tuts before i got here and they failed to teach me how to do it. cheers!

  53. Thanks for this (very helpful) tutorial, Chris. I’m currently working on a refresh of the look of my site, and this is exactly the type of thing I was looking for, but didn’t know how to execute. Once again I’ve added to my knowledge base by learning from you.

    thank you.

    @Mark– I was wondering (and trying) the same thing a few minutes ago. After a little trial and error, I found that adding the following to my stylesheet gave me the result I was looking for.

    #twitter_update_list li { margin: style as needed}

    Hope this is useful.
    r

Sorry, comments are now closed