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.
Related posts:
- Create a Twitter Box in Your Sidebar – Part II My Sidebar Twitter box tutorial seems to have struck a...
- Selected Pages – an answer for Beal In December Beal asked a question in response to my...
- Fancy Interactive Pure CSS List Boxes with Hover Effect There was an urgent need to expand the product...
- Highlight current page in WordPress menus WordPress has a lot of built in functionality that you...
- Pure CSS Drop-Down Menu tutorial – a slight omission I just got a comment from a reader of my...
38 Comments
Trackbacks / Pingbacks
-
[...] Create a Twitter box in your sidebar [...]
Great tutorial. I’m putting one of these on my blog for sure!
Wow, thanks for this tutorial. I was wondering how I could customize a twitter box in my side bar! =)-0
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
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/
check your site in IE6, the transparency of the background is not working and the right side column been swifted down.
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
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.
Is it possible to change the font size of the time stamp? I can’t get that bugger to change!
Thanks!
Have you tried these?
http://twitter.com/widgets/which_flash
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.
Very nice. I’m going to put this on my site, but what about on a Wordpress.com blog where java is verboten? Is there are work around?
I don’t have a WordPress.com blog of my own so I don’t have an answer for you, sorry.
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.
Simple, neat, and clean; very well designed. Thanks for the Tutorial.
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
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”.
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.
Yes, the style code goes in the styles.css file. unless you want to put it in a dedicated file. it’s up to you.
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?
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!
Wow Thanks!
Looks really nice and i added to my blog!
Excellent tutorial! Looks simple enough. Thanks for laying it out so nicely.
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!
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!!
Just installed this on a client’s site! Worked like a charm! Thank you so much!
to bad that i am allowed to insert only one/page
—- > 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
Twitter is very addictive. I like Twitter more than blogging. the messages are short and straight to the point.
Where do I save the css file? Thanks
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?
Thanks!!!
how do i get rid of the bullets next to tweets and the extreme padding?
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
Thanks http://www.PinkandYellow.com for the help. I couldn’t find it searching Twitter.
I just found out had to add my Tweets to my sidebar on my http://tantragal.blogspot.com/ Blogger blog. You made it very easy. Thanks http://www.PinkandYellow.com for the help. I couldn’t find it searching Twitter.
I have followed your steps for the HTML and CSS codes but it won’t show up right in my inner Header. Has this something to do with the placement? See example http://www.sanderfeekes.com/ on my Wordpress under contruction.
@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.
Been researching for web-sites for such stuff , with thanks