Jon Aquino's Mental Garden

Engineering beautiful software jon aquino labs | personal blog

Sunday, December 10, 2006

Twitter: Increasing number of twitters shown in Twitter blog badge

I modified the Twitter javascript badge to list my last 10 twitters in my blog sidebar:

<script type="text/javascript">
var elapsedTime = function(createdAt) {
var ageInSeconds = (new Date().getTime() - new Date(createdAt).getTime()) / 1000;
var s = function(n) { return n == 1 ? '' : 's' };
if (ageInSeconds < 0) {
return 'just now';
if (ageInSeconds < 60) {
var n = ageInSeconds;
return n + ' second' + s(n) + ' ago';
if (ageInSeconds < 60 * 60) {
var n = Math.floor(ageInSeconds/60);
return n + ' minute' + s(n) + ' ago';
if (ageInSeconds < 60 * 60 * 24) {
var n = Math.floor(ageInSeconds/60/60);
return n + ' hour' + s(n) + ' ago';
if (ageInSeconds < 60 * 60 * 24 * 7) {
var n = Math.floor(ageInSeconds/60/60/24);
return n + ' day' + s(n) + ' ago';
if (ageInSeconds < 60 * 60 * 24 * 31) {
var n = Math.floor(ageInSeconds/60/60/24/7);
return n + ' week' + s(n) + ' ago';
if (ageInSeconds < 60 * 60 * 24 * 365) {
var n = Math.floor(ageInSeconds/60/60/24/31);
return n + ' month' + s(n) + ' ago';
var n = Math.floor(ageInSeconds/60/60/24/365);
return n + ' year' + s(n) + ' ago';
// Make date parseable in IE [Jon Aquino 2007-03-29]
function fixDate(d) {
var a = d.split(' ');
var year = a.pop();
return a.slice(0, 3).concat([year]).concat(a.slice(3)).join(' ');
function twitterCallback(obj) {
var html = '';
for (var i = 0; i < obj.length; i++) {
html += '<li>' + obj[i].text + ' (' + elapsedTime(fixDate(obj[i].created_at)) + ')</li>';
document.getElementById('twitter_list').innerHTML = html;
<ul id="twitter_list"></ul>
<script type="text/javascript" src=""></script>


  • Hi Jon, awesome example! If you don't mind, I've linked to it from and used as a good example.


    By Anonymous Anonymous, at 12/14/2006 3:38 p.m.  

  • Very cool, Jon. Is there anything besides the 5-digit user_timeline code that we need to change to make this work on our blogs? I tried but it's not working.

    By Anonymous Anonymous, at 12/14/2006 7:45 p.m.  

  • Crystal - My pleasure! Love your service btw.

    JC - That should be all that's needed - what's the url of your blog with the badge on it? I'll take a look.

    By Blogger Jonathan, at 12/14/2006 8:42 p.m.  

  • I figured it out. If you have less than 10 twitters, the code won't work. I also tried to change the number of twitters and it took a while before I figured out the second place I had to change the number.

    By Anonymous Anonymous, at 12/17/2006 4:39 p.m.  

  • Ah ok - glad you figured it out.

    By Blogger Jonathan, at 12/17/2006 8:06 p.m.  

  • Thanks for stopping by -- and yes, your post is incredibly helpful! I was so happy to find it.

    By Blogger m, at 2/17/2007 11:31 p.m.  

  • M - you're most welcome!

    By Blogger Jonathan, at 2/18/2007 12:50 p.m.  

  • Thanks Jon.

    Great tool. Changed it to just provide 5, but could have done it without you.


    By Anonymous Anonymous, at 3/17/2007 3:16 p.m.  

  • Hi Andrew - Super!

    By Blogger Jonathan, at 3/17/2007 3:22 p.m.  

  • Hey Jon,

    I used this trick to show my last 10 twitters but not it stopped working. I'venoticed that yours doesn't work either so I'm thinking there's something we have to changein the code so it works again!? Twitter is acting up lately.

    Thanks for the trick.

    By Blogger Aldana, at 3/27/2007 8:51 a.m.  

  • Hi Aldana - yeah, I'm seeing (undefined) where the times should be - is that what you're seeing? Hopefully Twitter will get this fixed soon.

    By Blogger Jonathan, at 3/27/2007 9:17 p.m.  

  • Great script, thanks. (^_^)

    By Anonymous Anonymous, at 3/29/2007 12:21 a.m.  

  • Hi Jon,

    Re: the undefined business, they've changed the relative_created_at to just created_at. Also, I modified your code a bit so as to remove the date (I didn't need it) and also make each status clickable and pointing to their own status page. Since I can't post code in the comments, I posted the modified code on my blog.

    By Blogger EricaJoy, at 3/29/2007 5:27 p.m.  

  • Erica - thanks for the pointer!

    By Blogger Jonathan, at 3/29/2007 6:18 p.m.  

  • xen ix - my pleasure!

    By Blogger Jonathan, at 3/29/2007 8:20 p.m.  

  • Lovely. I've already put this in my blog's sidebar.

    Now a feature request - can you make it so the URLs in the tweets are clickable in the sidebar badge?

    By Blogger David J, at 3/31/2007 7:36 p.m.  

  • David - super! I may be able to do that, but it might take me a half-hour to figure out - let me know if you need it badly :-)

    By Blogger Jonathan, at 4/01/2007 12:40 a.m.  

  • Not urgent at all Jonathan, it would be great whenever you could do it.

    By Blogger David J, at 4/01/2007 5:10 a.m.  

  • BTW, do you have a special Canadian number to send tweets to? I'm trying to find an Australian one, but no luck yet. (They must be busy, I lodged a request two days ago and no reply).

    By Blogger David J, at 4/01/2007 5:11 a.m.  

  • David - To add links, just replace the line beginning html += with this:

    html += '<li>' + obj[i].text + ' (<a href="' + obj[i].id + '">' + elapsedTime(fixDate(obj[i].created_at)) + '</a>)</li>';

    By Blogger Jonathan, at 4/01/2007 2:45 p.m.  

  • OK, so that turns the 'time elapsed' part of the badge into a link back to the tweet on the twitter website. And from there you can click on any of the tinyurls in the actual message.

    Nice...thanks very much Jon.

    By Blogger David J, at 4/01/2007 5:04 p.m.  

  • Jon,

    Thanks for replying to my post. What I meant was that yes, the date shows 'undefined' plus it won't update my messages or just don't display them at all (it used to work perfectly before they changed it). If I want my messages to update I have to go to twitter, hit update and then may they do show. I will change my code to yours so it displays the date. Thanks for sharing again!


    PS.: If you want to see what I'm talking about go check (side bar, under 'what's up?')

    By Blogger Aldana, at 4/02/2007 9:50 p.m.  

  • Ah ok - yeah if you use my updated code above, the correct times will be reported.

    By Blogger Jonathan, at 4/02/2007 11:30 p.m.  

  • David - no probs - heh - hope that's what you wanted :-)

    By Blogger Jonathan, at 4/02/2007 11:47 p.m.  

  • Jon, I updated the code but it is still not working. Do you think you could help me out!? :S Tried your new one, old one, Erica's, tweaked it to see if I could make it work but no improvement....

    You can find my style sheet here Any help will be appreciated.

    By Blogger Aldana, at 4/03/2007 10:01 a.m.  

  • Hi Aldana - I compared your code to mine, and it looks like yours is missing the "function twitterCallback" - make sure that's in there.


    By Blogger Jonathan, at 4/03/2007 10:21 p.m.  

  • Thanks so much Jon! don't know how I missed that! (too many copy-paste-copy-cut).


    By Blogger Aldana, at 4/03/2007 11:26 p.m.  

  • Thank you soooo much! this was exactly what i needed! Ü

    By Blogger Unknown, at 4/11/2007 5:42 a.m.  

  • Thanks so much for your example. I fixed it up a bit on my site (now uses obj.length in twitterCallback so it avoids failing if you have less than 10 twitters, like I did). You can see what I have at my site


    By Blogger BestFriendChris, at 4/11/2007 3:06 p.m.  

  • How do I show my last 10 updates and not yours? I'm not able to code in Java, so my copy & paste would greatly benefit from your help. I feel the users have numerical IDs assigned, but if that's correct, how I find mine?

    By Blogger gorgeoux, at 4/11/2007 5:25 p.m.  

  • Ah, sorted! It was in the source. Thanks very much for a badly wanted code :)

    By Blogger gorgeoux, at 4/11/2007 5:32 p.m.  

  • sarah - super!

    chris - great fix! I should patch the code above at some point.

    gorgeoux - great!

    By Blogger Jonathan, at 4/11/2007 11:22 p.m.  

  • You all are so talented,I wish, I had have of your abilites.

    I will try this and see if I can get it to work. Wish me luck.

    By Blogger Modern Voice!, at 4/14/2007 9:43 a.m.  

  • dk2 - Hope it works out for you!

    By Blogger Jonathan, at 4/14/2007 2:40 p.m.  

  • Thank you so much for sharing your code, Jon. I know zero javascript, and have been searching the web high and low for a twitter badge with both more than 1 tweet shown and a relative time stamp. After copying and pasting about 5 different badge codes, yours won out. I even figured out how to decrease the number of tweets shown! Thanks again.

    By Blogger, at 4/23/2007 1:22 a.m.  

  • ihatepink - Fabulous!

    By Blogger Jonathan, at 4/23/2007 8:08 p.m.  

  • Thanks, pal. A little knowledge of web programming and being armed with the basic coding logic did the trick for me. He he. You're great.

    By Anonymous Anonymous, at 4/25/2007 5:20 a.m.  

  • Dong - Nice one!

    By Blogger Jonathan, at 4/25/2007 6:25 p.m.  

  • this rocks, thanks!

    By Anonymous Anonymous, at 4/26/2007 10:06 p.m.  

  • Anon - You're most welcome!

    By Blogger Jonathan, at 4/27/2007 11:55 p.m.  

  • Jon, this is awesome. It's the only place I've found one that posts multiple, and I'm grateful because I don't know any JavaScript.

    Since you are so awesome, I'm wondering if you have any advice on and odd problem I'm having.

    I posted my badge into my blog's sidebar, then posted my husband's badge below it. In Firefox, it looks perfect, but in IE and Safari it bumped his post to my badge's post space (and got rid of my posts that go there), and left his badge's post space empty. I've tried a lot of different things, I have no idea why it happens. Even if I move one to the opposite sidebar, it still does it.

    Any advice would be GREATLY appreciated.

    By Blogger Kate G, at 4/28/2007 7:45 p.m.  

  • Hi Kate - Yup, it's getting confused because both badges are using the same ID ("twitter_list").

    To fix this, just change the two "twitter_list" occurrences to "twitter_list_1" on your badge, and change them to "twitter_list_2" on your husband's badge.

    By Blogger Jonathan, at 4/28/2007 10:04 p.m.  

  • All hail Jon! Duh, I thought I had changed that! You are awesome. Thank you so much for the help.

    By Blogger Kate G, at 4/29/2007 10:19 a.m.  

  • My pleasure!

    By Blogger Jonathan, at 4/29/2007 10:51 p.m.  

  • This is awesome. Thank you for generously posting the javascript. Based on advice from this helpful resource,
    I'm trying to incoporate flickr into the badge, but the images don't show up (although the url to the link does.) Any suggestions? Thanks again!

    By Anonymous Anonymous, at 4/30/2007 9:36 p.m.  

  • Hi Lunamania - Could you send me the URL to a page showing what you've got so far, and I'll take a look?


    By Blogger Jonathan, at 4/30/2007 10:18 p.m.  

  • Thanks, Jon for taking a look. It's

    By Anonymous Anonymous, at 4/30/2007 10:58 p.m.  

  • Actually when I go to your twitter page - - I don't see any photos - have you successfully made them appear there yet? That's the first step. Once you've got some photos in there, we can look at your javascript file to see if it gives us the image urls.

    By Blogger Jonathan, at 4/30/2007 11:43 p.m.  

  • I see...the url is posted on the twitter page, but no image. Let me mess around a bit and see what I can do, then will get back to you. Let me know if you would prefer I email you elsewhere as opposed to commenting on your blog--although, perhaps others will find this useful? Thanks so much.

    By Anonymous Anonymous, at 5/01/2007 9:26 p.m.  

  • ok cool - yeah email or blog comments - either way.

    By Blogger Jonathan, at 5/01/2007 11:39 p.m.  

  • Thanks!

    By Blogger Saturday Night Takeout, at 5/04/2007 6:18 p.m.  

  • Strange, still can't get things to work out. I actually poked around and see that a number of users have urls appearing in their tweets, but no images, i.e. I haven't seen it working on any site. It'd be interesting if anyone knew of folks who had made it work.

    By Anonymous Anonymous, at 5/06/2007 5:34 p.m.  

  • Jon, I had whipped up a similar modification to yours, thought you might be interested in taking a peek at it:

    I need to do more testing on a wider range of platforms, but would like to merge your date parsing fix into it once I do.

    Great work!

    By Anonymous Anonymous, at 5/07/2007 11:06 a.m.  

  • That's what i was looking for!

    I made a spanish age translation and a few non important modifications. Can i publish in my blog?

    By Blogger Fëaluin, at 5/07/2007 12:13 p.m.  

  • Fëaluin - Yes! Spread the love.

    By Blogger Jonathan, at 5/07/2007 9:46 p.m.  

  • Morgan - nice - I like the CSS hooks.

    By Blogger Jonathan, at 5/07/2007 9:47 p.m.  

  • Thanks Jonathan. I've used your code on my page as well. Awesome :)

    By Blogger Anandi, at 5/19/2007 9:15 p.m.  

  • Anandi - super!

    By Blogger Jonathan, at 5/19/2007 10:19 p.m.  

  • Hi Jon, first at all excuse my english :P Lemme say that your code is awesome. I was redesigning my main webpage so i included my status at twitter with your code and worked very very well until yesterday.

    Today doesn't work and i dunno why. I moved the javascript code to a js for cleaning my code, after my problem i pasted exactly what u wrote on your blog and the issue continues.

    My web is i hope u have some time to take a look and gimme a hint about this. Thanks in advance for your time.

    Best regards,

    PS: I'm becoming a regular on your blog :D

    By Anonymous Anonymous, at 5/26/2007 8:39 p.m.  

  • Hi Diego - Glad to hear the blog has some ideas that interest you! Alas, something seems to be wrong with the Twitter server - when I go to it gives me an error.

    On my blog the Twitters aren't showing up either. I'll report this to Twitter.

    By Blogger Jonathan, at 5/27/2007 10:01 a.m.  

  • Yes, I'm out of them, too, for many days now. Hoping it can be fixed soon, and thanks for your help in advance.

    By Blogger gorgeoux, at 5/28/2007 4:41 a.m.  

  • They changed the path to the user_timeline page. In the script element at the bottom, instead of " t/ status/ user_timeline/ usernum" it needs to be " statuses/ user_timeline/ usernum.json" (take out all the spaces, of course, I added them so the paths would wrap here in the comment.)

    By Blogger jeffy, at 5/29/2007 6:11 p.m.  

  • Jeffy - Thanks for researching that. I updated the code above. I'm surprised that they changed it on us - it breaks badges all over the web. Anyway, I've submitted a bug report to them - hopefully they will make the old URL work as well, for backwards compatibility.

    By Blogger Jonathan, at 5/29/2007 8:08 p.m.  

  • Great help, thank you.

    By Blogger gorgeoux, at 5/30/2007 1:20 a.m.  

  • gorgeoux - you're welcome!

    By Blogger Jonathan, at 5/30/2007 10:07 p.m.  

  • Hi Jeremy - Alas, the dreaded IE float-drop issue. Anyway, in your style.css file, in the #sidebar section, try replacing

    width: 12em;


    width: 190px;
    overflow-x: hidden;

    By Blogger Jonathan, at 6/01/2007 10:36 p.m.  

  • Hi Jeremy - First reduce the #sidebar width from 190px to 170px. This will get it working in Firefox again.

    But it will then stop working in IE. The reason it behaves differently is, I think, that IE is rendering your page in "quirks mode". To fix this, ensure that the !DOCTYPE tag is the first line of your document. There seems to be some script stuff up there - move that down, perhaps into the head.

    By Blogger Jonathan, at 6/03/2007 11:41 p.m.  

  • Hi. I'm searching for a text-only display of the friends' timeline. Has this been done?

    By Blogger Palmdoc, at 6/14/2007 3:39 p.m.  

  • Palmdoc - If it has an RSS feed (I think it probably would have one), you might be able to use one of those RSS-to-JavaScript widgets to turn it into something that you can put in your blog sidebar. Is that what you are wanting to do?

    By Blogger Jonathan, at 6/15/2007 7:35 p.m.  

  • thank you。

    By Blogger Unknown, at 6/16/2007 12:31 a.m.  

  • Thanks so much for this!!

    By Blogger Victoria Champion, at 6/30/2007 2:57 p.m.  

  • You're most welcome!

    By Blogger Jonathan, at 6/30/2007 4:25 p.m.  

  • Why is it that this doesn't work for me? Like at all? Am I supposed to change something to make it work? (other than the little number at the bottom)

    By Blogger darkstar286, at 7/03/2007 4:12 p.m.  

  • Sean - What's your URL?

    By Blogger Jonathan, at 7/03/2007 7:23 p.m.  

  • jonathan, i would love a custom twitter on my site but i just can't get it to work. knowing me, i probably only missed one tiny thing but it's driving me nuts... so if you have a minute, that'd be awesome...

    thanks so much, kim

    By Anonymous Anonymous, at 7/07/2007 2:54 a.m.  

  • Hi Kim - Try changing twitterCallback2 to twitterCallback.

    By Blogger Jonathan, at 7/07/2007 11:23 a.m.  

  • jonathan, thank you for your reply. i tried that but it's still not working...???

    By Anonymous Anonymous, at 7/09/2007 12:21 a.m.  

  • hey kim - I think your site is down at the moment - I'll check it tomorrow

    By Blogger Jonathan, at 7/09/2007 9:35 a.m.  

  • kim - looks like you figured it out - I see twitters appearing in your sidebar.

    By Blogger Jonathan, at 7/10/2007 12:57 p.m.  

  • Jonathan,
    I'm less than a day into using Twitter, and I wanted to create a custom badge for my blog with it... thanks to your easy-to-follow work, it all came together. Let me know what you think:

    Take it easy!

    By Anonymous Anonymous, at 7/19/2007 1:10 p.m.  

  • Berklie - Nice stylin'!

    By Blogger Jonathan, at 7/19/2007 1:22 p.m.  

  • Hey, thanks!

    I made a small modification just now, so that only one "Berklie" shows up (with the most recent twitter)... and the rest of the comic bubbles (old twitters) all point up towards that one "Berklie."

    Let me know if you ever need any help with design!

    By Anonymous Anonymous, at 7/19/2007 2:22 p.m.  

  • Btw do you have a portfolio of web design work? We're hiring at and I might pass your name on to our design team.

    By Blogger Jonathan, at 7/19/2007 6:08 p.m.  

  • Jonathan,
    Thanks again for the props! I'm married to my dream job in Chicago's BCBS building overlooking Millennium Park.

    Let me know if you ever need any help with design, though.

    Also, one thing I'm noticing (and it could be a "quick coding" casualty of some sorts): every other iPhone Twitter only shows the most recent twitter. I've got to post twice for the past ones to show. So, if I twittered now... it would only show now's. But the second I add another... it'll show the most recent 5 (which is what I defined). Hmm.

    Run into this? Keep trucking,

    By Anonymous Anonymous, at 7/24/2007 12:32 p.m.  

  • Do you mean when you use on Safari for iPhone, it doesn't show all the past twitters it's supposed to? The Twitter folks probably just need to do more iPhone testing - you might want to report it to them.

    By Blogger Jonathan, at 7/24/2007 9:21 p.m.  

  • Hey Jonathan, please excuse my English. :)

    I'm not sure if it's Twitter that has gone wrong or is it the way I edit the code. My twitter only appear as & when they like and it irritates me a lot.

    Is this normal for them to appear as and when they like?


    By Anonymous Anonymous, at 7/25/2007 7:29 a.m.  

  • Actually,
    I just SMS Twitter (40404) from my iPhone, and it only happens every other time.

    I could send something now... and only that would show... but the second I send another... the past 5 (as I designed) will show. So, every other one causes only the most recent to show.

    I'll see if it's only when SMS'ing Twitter and report back.


    By Anonymous Anonymous, at 7/25/2007 7:29 p.m.  

  • Karen - I think the Twitters should appear on your blog sidebar right away (or perhaps after a delay of a few minutes). I haven't checked though. Anyway, what's the url of your blog.

    Berklie - Sounds like possibly a Twitter bug. You might want to let them know.

    By Blogger Jonathan, at 7/25/2007 8:35 p.m.  

  • Hey, thanks for the reply, Jonathan! I've sent you an email, with more information :)


    By Anonymous Anonymous, at 7/26/2007 1:51 a.m.  

  • thanks for the example. Used this to put together twitter on ireachable. Please check out
    Comments on this welcome. There will be some changes soon to tie better with iReachable CAMP. There is also miniChat box that allows for regular but quicker chat sessions:

    By Anonymous Anonymous, at 8/23/2007 7:44 a.m.  

  • Cool stuff, anon.

    By Blogger Jonathan, at 8/23/2007 5:31 p.m.  

  • Jonathan thanks for the comment.
    For any one on this blog if interested - please check out latest on iRachable twitter applicaiton. With this applicaiton,
    iR CAMP users can now twitter across specific iR CAMPs/groups or across global CAMP/group - check out the latest on iR site. More on the way.

    For now - iR CAMPs are available for twitter for SFO, Chicago, Boston, NY, Toronto. If you have your place/school group specific iR CAMP needs - do leave us request through the feedback form on the site. We will look into it.

    By Anonymous Anonymous, at 9/03/2007 9:52 p.m.  

  • Hi Jonathan,

    I have a feature request, similar to that of DavidJ earlier - I was wondering if tinyURLs, or any URLs for that matter, would be able to be made clickable, rather than having to click thru to the status page and then be able to click on the URL in the tweet?

    Still enjoying your code, :)

    By Blogger, at 2/06/2008 12:45 p.m.  

  • ihatepink - a good idea - alas I don't have time right now to implement it :-(

    By Blogger Jonathan, at 2/06/2008 7:02 p.m.  

  • I see that twitter is now showing an easier copy-n-paste code on their site for the javascript badge (the code looks heavily borrowed from yours, yay!). I've written the twitter folks about this idea as well. Crossing my fingers for something! (I know nothing about programming.)

    By Blogger, at 2/09/2008 1:43 a.m.  

  • This is an awesome script. Thank you very much Jon

    By Blogger E. Rodriguez, at 4/13/2008 10:23 a.m.  

  • Glad you find it useful!

    By Blogger Jonathan, at 4/13/2008 6:36 p.m.  

  • Hi Jon!!! Just wanted to say I love the script it worked like a charm. Thank you so very much!!!

    By Anonymous Anonymous, at 6/01/2008 6:31 a.m.  

  • Emily - You're welcome!

    By Blogger Jonathan, at 6/01/2008 4:36 p.m.  

  • TY ihatepink for bringing up the tinyurl link comment, I was about to post the same request. :) If anyone know how to make a url clickable, let us know please.

    Jon, ty, best code I have found so far! I found you through Twitter's help pages.

    By Anonymous Anonymous, at 6/03/2008 10:34 a.m.  

  • brandon - you're very welcome!

    By Blogger Jonathan, at 6/04/2008 7:37 p.m.  

  • Hi everyone, I was able to get links working by pasting this guy's js code ( above the rest of the code, and then changing this part of the code:


    to this:


    hopefully that will work for all of you as well!

    By Anonymous Anonymous, at 11/12/2008 1:22 p.m.  

  • Hello that´s a good idea if ya want to show ur last 10 posts, good work!

    By Anonymous Anonymous, at 11/21/2008 2:17 p.m.  

  • Great article here. thanks for the example.

    By Anonymous Anonymous, at 12/05/2008 2:06 a.m.  

Post a Comment

<< Home