Create a Twitter box in your sidebar
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:
- Flash (Just Me) - hideous
- Flash with Friends - even more hideous
- 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:
<div id="twitter_div"> <ul id="twitter_update_list"></ul> </div> <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script> <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/mor10.json?callback=twitterCallback2&count=2"></script>
(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:
<div id="twitter_div"> <ul id="twitter_update_list"> <li></li> </ul> </div> <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script> <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/mor10.json?callback=twitterCallback2&count=2"></script>
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:
<!-- TWITTER --> <div id="twitter_div"> <ul id="twitter_update_list"> <li></li> </ul> <p><a href="http://twitter.com/mor10" title="Follow me on Twitter" target="Twitter">Follow me on Twitter</a></p> </div> <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script> <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/mor10.json?callback=twitterCallback2&count=2"></script> <!-- END TWITTER -->
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.
Full-time and freelance job opportunities available at Authentic Jobs:
Post a job and reach web professionals everywhere.





















November 6th, 2008 at 9:10 pm
Great tutorial. I’m putting one of these on my blog for sure!
November 9th, 2008 at 9:12 am
Wow, thanks for this tutorial. I was wondering how I could customize a twitter box in my side bar! =)-0
November 13th, 2008 at 3:52 pm
awesome! I am using it on my site. Looks great!
http://tinyurl.com/68hrnx
the only thing I would like to change is the time aspect (23 days ago // 4 hours ago). Is there a css code to hide that link without taking away the links from the original twitter message?
EXAMPLE - http://i35.tinypic.com/swftow.jpg
November 13th, 2008 at 5:25 pm
Good work TheN2S. I found your problem quite interesting so I sat down and found a solution for you. You just need to add some more CSS code and mess around with the visibility. I posted the full response here: http://blog.pinkandyellow.com/css/create-a-twitter-box-in-your-sidebar-part-ii-20081113/
November 13th, 2008 at 10:27 pm
[...] http://blog.pinkandyellow.com/css/create-a-twitter-box-in-your-sidebar-20081106/ [...]
November 18th, 2008 at 5:19 am
check your site in IE6, the transparency of the background is not working and the right side column been swifted down.
November 18th, 2008 at 12:40 pm
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.