Designing Tweets: How To Integrate Twitter Into Your Web Site

Twitter

In order to grab your attention and have you follow them on Twitter, some web site owners choose to go beyond a simple “Follow Me” and also display their latest tweets. I don’t know if one method is preferable over the other in order to actually pick up followers, but I thought it might be helpful to take a look at how you can display tweets and also how some designers are making their tweets stand out, or in some cases blend in to the overall design.

So how do you actually get your tweets to display? Well there are a number of options.

Twitter Widgets

If you’re blogging or using MySpace or Facebook, you can grab a widget to work in the appropriate social media area. They’re available as Flash or HTML; all you need to do is copy the code and paste it into your site.


twitter-widgets

Twitter Goodies

Twitter also provides all users with a profile widget which can be added to most web sites by grabbing the code the provided. You can configure the size, colors and number of updates for your badge in the settings.

twitter-goodies

jQuery Plugins

There are a quite a few of these plugins around which all provide tweet display functionality as well as a few other bells and whistles.

Juitter is a widget which will display tweets to or from a user and has an option to display avatars.

TwitStream uses the Twitter Search API to display a list from your twitter feed containing a particular keyword and also displays avatars and URLS.

If you want to add your tweets to your WordPress blog, Twitter For WordPress does what is says on the tin, displaying your recent tweets and URLs.

Designed Tweets

Although many sites are displaying tweets, some designers are going that extra mile to incorporate the Twitter feed into their overall design. It’s the attention to detail that makes them interesting to look at. Here are five imaginative examples of Twitter integration.

Justin Delabar

JustinDelabar

That Indie Dude

thatindiedude

Mad Frog Designs

madfrog

Jeff Sarmiento

jeffsarmiento

Indiqo

indiqo

What do you do with your tweets? Have you integrated them into your site and what method do you use? Or do you just ask for a follow? Have you seen any other Tweet displays that you liked?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • kwncy

    cool, i love That Indie Dude’s design :D

  • ejrodgers

    I’ve intregated Twitter in the Latest Content display on the index page and adapted if further so it doesn’t display @ replies (since most of these wont make sense on their own) or Latest Blog Post Tweets (since these are shown on the page anyway) instead it displays the last “normal” tweet. I’ve also modified the output so that any URLs (inc. TinyURL etc) that point away from my site open in a new tab/window and on site links open in same tab. I also have “friendly dates” (eg: about four hours ago).

    You can see the result at my site http://www.elliottrodgers.com/index.php

  • Nathan

    I have a little cartoonified me popping in from the ceiling and shouting out my latest tweet. Have a look at http://nathanhoad.net.

  • http://www.healthconverts.com dreamache

    ejrodgers, seriously man, your website..

    (1) Why do you have a picture (presumably of yourself) without your shirt and bending over?
    (2) The right-aligned vertical navigation is really bad for usability/readability. It’s okay to try and be unique, but don’t do it at the expense of your visitors.

  • nathanhoad

    I have a little cartoonified me popping in from the ceiling and shouting out my latest tweet. Have a look at nathanhoad.net.

  • Shyam Kapur

    This is an excellent post. I would also like to share my excitement about some widgets that were launched this week by the new Twitter-based semantic search engine TipTop. A search in TipTop on any topic quickly reveals people’s emotions and experiences about it, as well as other concepts that they are discussing in connection with the original search. Various interactive features on the site allow the user to navigate among these messages using filters and categories, or discover more about the people whose messages they like.

    TipTop search results can be embedded in any website and many blogging platforms using the newly-launched TipTop Search Widgets. By customizing TipTop Search Widgets with searches relevant to a website, any site developer or blogger can enrich their own visitors’ experience with real time information delivered contextually. Please come over to TipTop now and set up your free TipTop widgets.

  • http://www.allofcraigs.com allofcraigs

    i have a little Twitter sumthin-sumthin integrated into my site for my craigslist search engine that scrapes any craigslist ad link posted to twitter and is categorized to the right automatically. Somewhat pointless.

    twitter stream

    it’s called “juitter”

  • lyteis

    I recently utilized some twitter API functionality for a client’s “latest news” division on their homepage. The client can update the latest news division of their page from a cell phone or wherever they are most comfortable. It’s pretty useful for busy clients who want to update their site easily from anywhere.

    I also used the php substr() function to format the ugly date returned by the API.

  • Dan Wellman

    I built a tweet-stream widget as a jQuery tutorial example which uses Yahoo Pipes and JSONP to get tweets without flash or any server-side code :D

    check it out: tweetstream

  • ejrodgers

    @dreamache

    Thanks for the comments…

    The photo is me, I was building some decking, it’s a photo of me I like, which is rare. As the page title says, it’s a personal site so why wouldn’t it have pictures of me? I’ve had a lot of positive feedback on the whole journal theme and right sided menu.

    I tried to return the favour and visit your site but it didn’t seem to be working.

  • http://www.webdesign-gm.co.uk/cheltenham-web-design.php TomBradshaw

    This was really useful, I’ve been looking for a way to display my tweets on my site without using the twitter widget. Thanks Jennifer

    ps. Check out my Twitter Icon Set: http://www.webdesign-gm.co.uk/news/?p=30

  • hutchsky

    A super simple solution is Tweetboard. (http://tweetboard.com/alpha/) You have to request an invite because it’s in alpha testing, but it works great for me.

  • http://www.laughingliondesign.net Jennifer Farley

    Thanks everyone for the comments and suggestions.

    @TomBradshaw – Tom I love the Twitter icons. They’re very cool.

  • http://www.facebook.com/people/HaHa-Look/546538912 HaHa Look

    Thanks for sharing!

    • Anonymous

      it is really amazing~~#fb

      • Anonymous

        it is so cool man!

  • http://twitter.com/HaHaBEHappy HaHar

    Love it so much!!!

  • http://twitter.com/wbarber69 wbarber69

    I want to add a way to actually update my status right from my on site

  • chaos

    cool