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. check your site in IE6, the transparency of the background is not working and the right side column been swifted down.

      1. Expecting this beautiful piece of code running on IE6 is like expecting Windows Vista to support 80386!

        I’m glad it doesn’t work on ignorant people’s computers πŸ˜‰

    2. I am aware that the site does not look right in IE6 because of lack of support for transparent PNGs, standards compliant CSS and JQuery. For these same reasons I am not willing to “lower” the standards of the design to accommodate this browser. Internet Explorer 8 will be released shortly and IE7 has been on the market for years. To constantly have to make custom solutions to accommodate a browser that doesn’t work properly and that has been outdated years ago seems counterproductive. So although I am aware of the problem I don’t see it as something I should worry about. Get IE7, Firefox, Opera, Safari or any of the numerous other modern browsers and everything will be just fine.

      1. I saw them and didn’t like them at all. To me they are both clunky and ugly. I like to have control over what my sites look like. If you read carefully you’ll see that I actually addressed these two options briefly in the tutorial.

    3. hey got ur post from problogger’s tweets. I’ll follow ur info now to add that to my blog at http://blogblazon.com. Thanks for the post.

      I was wondering why problogger did not comment if your post could be that useful for him. oh may be he’s bothered by the traffic he’s generate from comment.

      As for me, I need to comment, not to build traffic, but at least to commend and acknowledge your effort in educating others.

    4. Alright, perfect! Ive done it. It’s in my blog. But there’s a problem. How can I set the links to a _blank window? The target? It keeps opening in the main window, going “out” of my blog. :T

    5. How do you make the time stamp ( example>> “4 days ago”) a smaller font size than the rest of the posted “tweet”? I’ve tried styling the li’s but it the time stamp continues to be the same as the rest of the “tweet”.

    6. Thanks for the nice tutorial. May be a stupid question, but I am guessing the styling code goes in the style.css file? Kindly correct me if I am wrong.

        1. one roadblock however… what about multiple users. I have more than one writer whose twitter status I’d like on the sidebar. I’ve copied the code and such, however, it only populates on box and one account. I even changed the usernames in all the necessary places. Any thoughts?

    7. This was a really great help, I searched all around for something exactly like this because I hated the pre-made ones twitter had, but never really knew how to customize. Thanks soooo much!

    8. That is a really great post. I’ve been struggling with one of the Twitter wordpress plug-ins, of which I didn’t even like that much. This definitely is a lot more pleasing to the eye, even if you don’t change the css. Thanks!

    9. Thanks so much for posting this. I have seen a twitter update box just like this on several blogs and was envious because I loved the way it looked. Was searching around for a way to change the formatting of the updates in my sidebar using Twitter Tools and stumbled on your post. Now I know this must be how all those bloggers got this cool looking update box. Now I am among them as I followed your directions and they worked like a charm – thanks for sharing!!

      1. —- > 2 twitter scrollers on 1 Page !!

        i was first going to suggest to put it in different frames but quickly tried and it worked straight away, no need to fiddle with frames !

        you can see it here in action : http://web.me.com/eezee/iMac/More_Twitter_work.html
        here basically

        ps i added the html link as otherwise most links clicked here as well as in twitter scroller etc dont seems to auto open in a new page/tab !?

        pps and im shure i can put more then 2 on a page!

        im off to go play with the more annoying CSS now to make it look nice and fit in with our chat room!

        cheers again

      1. Hi

        to bodydetox : Twitter addictive? still waiting for it to kick in then here after being member of the site for a year almost and i still dont get it properly! isn’t it anything more then a mass sms type of spam shooter in general? yes i know unless used properly no doubt between your circle of friends? But if one looks surely so many ppl cant have thousands of friends and ppl subbed to thousands must be in tweeter hell ???? I used to be just with running 7 moderated mailing lists and other pre twitter innovations! PS i have been doing online PR for more then 10 years!! But yes ‘sometimes’ looking n thinking more n more about it i can see possibilities on the horizon which i now decided to give some time and try out. After all we have been running an online pirate radio station now almost for 13 years and originally when started i was the first to implement a ‘ chat room ‘ before IM’s like ICQ appeared who we slowly started using but out old skool HTML chat room is still a buzz 12 years later with all our visitors!

        And hey as the chat room is framed to bits im shure i can add this type of tweet box display thing in one of the frames! Someone might like it and shouts and request which im hoping for will start scrolling in?

        Which might be an answer to fl0o ? shurely using frames or iframes etc we can have 10 of these boxes on one displayed page?

        Then to Ralph Contreras: As you might have noticed with my rant above im not a big fan of CSS as yes pointed out, incompatibilities with browsers, specially when it all started but hoping this has and is being ioned out all the time. Depending on the structure of your website it depends where you put the style sheet (CSS) as long as in your pages you point to it in the right place! Or am i wrong here? (as well)

        Last but not least if permitted by character entrance etc when posting here, Cheers to Pink&Yellow for this forum in a blog? feedback box a page? static chat room even? πŸ˜‰

      1. I had to ad this to my style:

        #twitter_update_list {
        list-style: none;
        padding: 0;
        margin: 0;
        }

        it did the trick but I’m not much of a programmer so prob. theres a better way…

    10. Thanks for the post! People are crazy for not using more Twitter.Twitter is 100% the way to goI use Mass-Follow.com to submit my articles to like 400 places

      1. @Sander: It appears you have multiple instances of the twitter box div in your code. That will cause all sorts of weird problems. Try cleaning up the code a bit and see if that doesn’t fix your problem.

    11. This is the coolest thing I’ve ever seen. What a great tutorial. I implemented it on a hidden page to see how it looks and it works great, but there’s one problem. I can’t seem to get each tweet in one paragraph, like you have in yours. Mine are split up by little dotted lines. I think it may be the side widget codes that are already inherent in my CSS, but I’m not sure.

      Any suggestions? You can see it in action here: http://dougdraws.com/about/

      Thanks.

        1. Mort, thanks for the assistance. Yeah, knowing WP it could be anything. I have even tried adding ‘list-style: none;’ to your code, but that didn’t make any difference. I will put the CSS for the Twitter box back to the way it was.

          I appreciate your help. It’s a really cool tutorial. I hope we can get it working.

        1. I’m a CSS novice. I looked everywhere for a Twitter box I liked and your tutorial is by far the best solution I found. I was able to follow your instructions and even figured out how to modify the padding etc. I adapted your graphic since I couldn’t think of any way to improve on the design. I’m still tweaking the site: I haven’t added a credit list yet but you will be on it.

          However, the badge code generated by Twitter has changed so I’m not sure if your validation fix is still necessary.

          An updated post would be a great idea!

          I set the box to display four tweets, which it did to begin with, but for some reason it is now only displaying one. I can’t figure out why β€” any ideas?

          1. Sue: The code is still the same so the validation trick has to stay in place. As for how many tweets are displayed, it’s controlled by the “count=x” attribute in the JavaScript call. I can’t access your site to see what it’s set to but I’m going to guess it’s currently set to 1. Try changing it and see what happens.

    12. Great article! I do have one problem…i’m having a hard time changing the font color of the “follow me on twitter” link at the bottom? Mine is white & css code is currently:

      #twitter_div p {
      text-align: right;
      padding-right: 6px;
      padding-bottom: 10px;
      text-decoration: none;
      color: #DDA84E;
      }

      Any help would be great. Thanks!

    13. I would like to know if you can customize the code so that you can add people whose twitters you will like to see. Also is there a way to add the avatars from their twitters.

      Great tutorial by the way!!

    14. Hi, I followed your instruction, and when viewing the code in html, it works.
      I am trying despeartely to add my twitter feed to a facebook fbml.
      I tried to convert html to fbml, but ni luck.

      This is the code I’m trying to paste into fbml
      Anyone know how to go about this?

      regards

    15. Hi, I followed your instruction, and when viewing the code in html, it works.
      I am trying despeartely to add my twitter feed to a facebook fbml.
      I tried to convert html to fbml, but ni luck.

      This is the code I’m trying to paste into fbml
      Anyone know how to go about this?

      regards

      Twitter Updates

      follow me on Twitter

    16. I have the code in place and the dates of each post appear
      but i can’t see any of the text from the post
      can anyone help?

    17. This was great. I’ve almost got it complete but my background image is specific so the actual tweet needs to be positioned and I’m having trouble with that. I’d love some help!

    18. Sorry for asking, but I really don’t understand about css etc., so where am I suppose to put the code with #twitter_div above? Just below the first code with <div id ? I'm using tumblr by the way, if it will helps you πŸ™‚

    Comments are closed.