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.

  • http://virtualchaitra.com chaitrax

    tweet this…..

    • http://blog.studiopyros.com.br Felipe Martyn

      Re-tweeting this!

  • http://www.online-blogger.net Indrek

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

  • http://www.nugrove.com Brandon Diaz

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

  • http://www.hangar17.com Hangar17

    Interesting ! Keep good postings..

    web design and development- Hangar17.com

  • http://steveysizer.com Stephen Sizer

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

  • http://blog.studiopyros.com.br Felipe Martyn

    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.

  • http://www.webdevtuts.net Marcell Purham

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

  • http://www.rochelledancel.com Rochelle Dancel

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

  • http://www.whatcreative.co.uk Chris Kemm

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

    Thanks

    • http://www.facebook.com/samasmith ThatGuy

      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!

  • http://30-f-london.blogspot.com 30FLondon

    Would the same work for blog posts?

  • http://webdesignfan.com/ Tomas

    Looks great, thanks for this useful tutorial.

  • http://www.fudgegraphics.com Franz Jeitz

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

  • http://randrewgillette.com Andy Gillette

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

  • http://www.26tigers.com David Boyer

    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.

  • http://cahcepu.com om ipit

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

  • http://www.animhut.com/ sriganesh

    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

  • http://www.designerkan.com Designerkan

    Really Great.. thank youu

  • http://designinformer.com Design Informer

    Great and simple tutorial. Thanks Chris!

  • http://www.thinkpanda.com Fahd Butt

    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.

  • Terrance

    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?

  • http://www.facebook.com/samasmith ThatGuy

    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.

  • http://twitter.com/safetycopy safetycopy

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

  • http://www.danstyled.com Danstyled

    Good Work!,

    doesn’t validate though :S

    • Matthew

      I agree (sadly).

      This code spits errors all over the place when checked in W3C.

      :(

      • Boris

        To get the code valid, change “twitterCallback2&count=1″

        into

        twitterCallback2&count=1

        • Boris

          I mean:

          & into & a m p ; (without spaces)

  • Petrus

    Very useful. Thanks a lot for the tutorial.

  • http://www.rossmcnaughton.com Rosti The Snowman

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

  • http://idsandclasses.com Dusan

    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

  • http://www.code-pal.com Sumeet Chawla

    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/

  • http://blog.aceinfowayindia.com Ajay

    Great tip. Thanks for sharing.

  • http://www.thewebtuts.com TheWebTuts

    Tutorial added to thewebtuts.com

  • http://webdesignandsuch.com ilz

    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/

  • http://omgmog.net Max Glenister

    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.

  • http://www.bebop-ad.com BebopDesigner

    Wow! This is absolutely brilliant! Thanks for sharing.

    Cheers

  • http://twitter.com/lyndit Lyndi Thompson

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

  • http://brandonleekitajchuk.com Brandon Kitajchuk

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

  • http://www.presentationsexpert.com Presentations Expert

    Excellant, Tweet this.

  • http://www.deadlowdesigns.com Joe

    Exactly what I was looking for!

  • http://rfbellerose.com Ryan Bellerose

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

  • http://www.jmc-website-design.co.uk/blog Jason

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

  • http://vidyaputra.blogspot.com vidyaputra

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

  • http://boeconomica.com Ricky Setiawan

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

  • David Silva

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

  • http://loveluxor.com/calligraphyarabic/index.html gamal ezzat

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

  • http://richworks.in Richie

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

  • http://www.weblodge.be Web Lodge

    Great feature. Thanks to you and Twitter!

  • Joan

    wow thanks chris

  • Shondra

    very very helpful yet simple…thanks for the post

  • http://www.migratedesign.com Laurent JOUVIN

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

  • Sigurfreyr

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

  • http://chriscorney.com Chris

    Simply brilliant.

  • http://chriscorney.com Chris

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

  • http://www.estacaografica.com Guilherme Harrison

    Great tutorial. Very easy to follow.

  • http://www.mail-wolf.de Sebastian Wolf

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

  • Mark

    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

  • http://www.digitalmaggot.com/ Arron Davies

    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!

  • http://www.rafaelarmstrong.com rafael armstrong

    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