Create a Twitter box in your sidebar

UPDATE July 2011
Twitter has made some changes to their Twitter Badge functionality including removing the auto generated legacy code used in this tutorial. Fortunately they have not deactivated the actual function meaning you can copy the code in the examples below, replace my handle (mor10) with yours and you’ll get your tweets just like before.

As part of the new design for this blog I added a Twitter box in the sidebar. There are hundreds of WordPress plugins that do this for you but they are all quite involved and they bog down the blog unnecessarily. Much easier to just hard code the box into your blog yourself. It’s actually surprisingly easy to do, but the code that Twitter provides is a bit wonky (and shockingly it doesn’t validate!).

In this tutorial you’ll learn how to easily create a fancy box that displays your latest Twitter rants in your sidebar without having to turn to clunky plug-ins that bog your blog down.

Get your Twitter Badge

To start off with you need your Twitter Badge. This is the official Twitter JavaScript that passes your latest tweets to wherever you want. You can get your badge at twitter.com/badges. Twitter has custom badges for MySpace, Blogger, Facebook and TypePad but surprisingly nothing for WordPress. That doesn’t really matter because it’s actually easier to just make one of your own.

Select Other and you are taken to page two which presents three options:

  1. Flash (Just Me) – hideous
  2. Flash with Friends – even more hideous
  3. HTML/JavaScript – great for people with eyes

Select the last option (HTML/JavaScript) and you are taken to page 3 where you can customize the code by defining how many tweets you want and what the Badge title should be. I chose 2 tweets and turned the title off. This provided me with the following code:
You can get your badge at twitter.com/badges. Twitter now has custom badges for your website and Facebook. The website badge is a JS-based badge that I’ll cover in a later tutorial. For this tutorial however we’ll be using the legacy code which is no longer available from the Twitter Badge page. But you can get it right here. Using the Twitter Badge legacy code your end result will look like the following code:

    (This code will of course differ depending on your settings.)

    Paste the code in wherever you want on your site or your blog.

    Style your Badge

    The Twitter Badge comes equipped with JavaScript that injects the tweets into your badge in the form of unordered list items as well as built in style elements. They are: #twitter_div (styles the badge wrap), .sidebar_title (styles the title) and #twitter_update_list (styles the unordered list).

    Before you start styling, you have to fix the generated code to make it validate. Since it is the JavaScript that actually generates the list items, browsers and validators get all cranky about the code because there are no list items within the unordered list in the markup itself. Therefore you need to insert an empty list item just to please the W3C gods:

    Once that’s settled you can start styling your elements. Again because of the JavaScript you have to stick with the names Twitter provides, but that shouldn’t cause any problems. For my Twitter Badge I created a background PNG much larger than what I actually needed to accommodate a future situation where I would add more than 2 tweets at a time (which you can see by clicking here). The background graphic is cut off by a matching blue bottom border. The whole style package looks like this:

    #twitter_div {
    	background-image: url('img/twitterBG.png');
    	background-repeat: no-repeat;
    	border-bottom-style: solid;
    	border-bottom-width: 1px;
    	border-bottom-color: #5AA5BC;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 0.9em;
    	margin-top:10px;
    	padding-top: 30px;
    	padding-right: 5px;
    	padding-left: 5px;
    }
    
    #twitter_div ul li {
    	color: #0C93BA;
    	border-bottom-style: solid;
    	border-bottom-width: 1px;
    	border-bottom-color: #A1E8F7;
    }
    
    #twitter_div ul li a {
    	text-decoration: none;
    	color: #DDA84E;
    }
    
    #twitter_div ul li a:hover {
    	text-decoration: none;
    	color: #D78E42;
    }
    
    #twitter_div p {
    	text-align: right;
    	padding-right: 6px;
    	padding-bottom: 10px;
    }
    

    Add a link for future followers

    The observant reader will notice that there’s still one element missing: The Follow me on Twitter link in the bottom right corner. That’s the reason for the p style in the CSS code as well. So with the follow link, the final HTML markup looks like this:

    
    
    
    
    
    

    And with that you have a fancy Twitter box you can put in your sidebar without bogging your blog down with plug-ins.

    Read the second half of this tutorial, in which you learn how to hide the time stamp at the tail end of the Tweets.

    94 thoughts on “Create a Twitter box in your sidebar

    1. To change the size of the timestamp, you could use jQuery to alter the markup

      $(document).ready(function() {
      $(‘ul#twitter_update_list li a’).removeAttr(‘style’);
      $(‘ul#twitter_update_list li span a’).addClass(‘tweetLink’);
      });

      This removes the style=”font-size:85%” from the timestamp and gives any links within the tweets the class of “tweetLink”

      Then in your CSS you would do something like this

      ul#twitter_update_list li a {
      font-size:0.75em;
      }

      ul#twitter_update_list li a.tweetLink {
      font-size:1em;
      }

      1. Is there a way to tweak the “count” parameter to ignore retweets? If only 2 of 5 tweets are from my username it will only display two tweets in my feed. Ideally I would like the “count” value to only account when tweets are from MY username. Can someone please help with this?

        1. Just to clarify:

          I have set count=5 but only 2 tweets are displaying because 3 of these posts are retweets from other usernames.

    2. I’m not sure if this is a very new development, but when going to twitter.com/badges, it no longer follows your tutorial. There is not an “Other” option, and the new widget is bulky and annoying. Is there a way I can take the code you’ve shown, and point it to my own page? I’ve got it to work the way I want in terms of display, but I don’t know how to get it to point to the tweets I want. If you could check it out at the site I posted and let me know, I’d appreciate it greatly. Thanks.

      1. Hi Bill, and thanks for making me aware of this change. I’ve made the appropriate changes in the article to reflect this. To follow my tutorial you just have to copy out the legacy code and use it. It still works and since it’s using the same JS engine that the new badge is using it’ll continue working for the foreseeable future. When I find some time I’ll write an updated tutorial based on the new badge code. That way I can also include the other new badge functions like Search.

    3. I’m trying to make a Twitter-box containing a search for a hashtag (#sv1d) for my website. Somehow I can’t find how to do that with this code. Can you please help me?

    4. Anyone else experiencing a problem with Windows implementation of IE not supporting this method? It does not work in my testing on both PHP and HTML pages.

      Also, the implemetation on *this* page does not work in IE. Works fine in Chrome, FF, Safari.

      Any insight would be helpful.

      Thanks.

    5. Following up to my above reply. Found that in IE9 the following error occurs:

      SEC7112: Script from … was blocked due to mime type mismatch

      I’m thinking that this is out of my hands at this point.

    6. Hi there Wow so Excited I have finally found the great Widget you have done been looking to just display my tweets with Links and that’s it. couldn’t find anywere Thank you! But if okay by you I m trying to Change the Color of my Links from Blue to Light pink? I just added the two parts of your Code to my Site, as I am doing my own Background art.
      But Cant seem to figure out were to put the Code to change the Links Color.
      Please really would love your HELP.
      Web not up yet as Im currently in the process of still doing it.
      Thank you for this Great article πŸ™‚

    7. Great website. Lots of useful information here. I am sending it to several pals ans additionally sharing in delicious. And obviously, thanks to your effort!

    8. Could someone help me? it seemed liek the code has stopped working…

      my tweets are no longer on display at my top-bar ticker (the one in blue with a mobile phone icon).

    Comments are closed.