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;
}
</script>
<ul id="twitter_list"></ul>
<script type="text/javascript" src="http://www.twitter.com/statuses/user_timeline/26613.json?callback=twitterCallback&count=10"></script>
106 Comments:
Hi Jon, awesome example! If you don't mind, I've linked to it from help.twitter.com and used as a good example.
Thanks!
Crystal
By
crystal@twttr.com, at 12/14/2006 3:38 PM
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
JC, at 12/14/2006 7:45 PM
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
Jonathan, at 12/14/2006 8:42 PM
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
JC, at 12/17/2006 4:39 PM
Ah ok - glad you figured it out.
By
Jonathan, at 12/17/2006 8:06 PM
Thanks for stopping by -- and yes, your post is incredibly helpful! I was so happy to find it.
By
MD, at 2/17/2007 11:31 PM
M - you're most welcome!
By
Jonathan, at 2/18/2007 12:50 PM
Thanks Jon.
Great tool. Changed it to just provide 5, but could have done it without you.
Andrew
By
Andrew Nicol, at 3/17/2007 3:16 PM
Hi Andrew - Super!
By
Jonathan, at 3/17/2007 3:22 PM
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.
Aldana
By
Aldana, at 3/27/2007 8:51 AM
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
Jonathan, at 3/27/2007 9:17 PM
Great script, thanks. (^_^)
By
xen ix, at 3/29/2007 12:21 AM
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
Erica Joy, at 3/29/2007 5:27 PM
Erica - thanks for the pointer!
By
Jonathan, at 3/29/2007 6:18 PM
xen ix - my pleasure!
By
Jonathan, at 3/29/2007 8:20 PM
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
David J, at 3/31/2007 7:36 PM
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
Jonathan, at 4/01/2007 12:40 AM
Not urgent at all Jonathan, it would be great whenever you could do it.
By
David J, at 4/01/2007 5:10 AM
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
David J, at 4/01/2007 5:11 AM
David - To add links, just replace the line beginning html += with this:
html += '<li>' + obj[i].text + ' (<a href="http://twitter.com/JonathanAquino/statuses/' + obj[i].id + '">' + elapsedTime(fixDate(obj[i].created_at)) + '</a>)</li>';
By
Jonathan, at 4/01/2007 2:45 PM
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
David J, at 4/01/2007 5:04 PM
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!
Aldana
PS.: If you want to see what I'm talking about go check realcritic.com.ar (side bar, under 'what's up?')
By
Aldana, at 4/02/2007 9:50 PM
Ah ok - yeah if you use my updated code above, the correct times will be reported.
By
Jonathan, at 4/02/2007 11:30 PM
David - no probs - heh - hope that's what you wanted :-)
By
Jonathan, at 4/02/2007 11:47 PM
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
Aldana, at 4/03/2007 10:01 AM
Hi Aldana - I compared your code to mine, and it looks like yours is missing the "function twitterCallback" - make sure that's in there.
Jon
By
Jonathan, at 4/03/2007 10:21 PM
Thanks so much Jon! don't know how I missed that! (too many copy-paste-copy-cut).
Aldana
By
Aldana, at 4/03/2007 11:26 PM
Cool!
By
Jonathan, at 4/04/2007 12:20 AM
Thank you soooo much! this was exactly what i needed! Ü
By
sarah, at 4/11/2007 5:42 AM
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
Chris
By
Chris, at 4/11/2007 3:06 PM
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
gorgeoux, at 4/11/2007 5:25 PM
Ah, sorted! It was in the source. Thanks very much for a badly wanted code :)
By
gorgeoux, at 4/11/2007 5:32 PM
sarah - super!
chris - great fix! I should patch the code above at some point.
gorgeoux - great!
By
Jonathan, at 4/11/2007 11:22 PM
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
dk2, at 4/14/2007 9:43 AM
dk2 - Hope it works out for you!
By
Jonathan, at 4/14/2007 2:40 PM
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
ihatepink.com, at 4/23/2007 1:22 AM
ihatepink - Fabulous!
By
Jonathan, at 4/23/2007 8:08 PM
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
Dong Calmada, at 4/25/2007 5:20 AM
Dong - Nice one!
By
Jonathan, at 4/25/2007 6:25 PM
this rocks, thanks!
By
Anonymous, at 4/26/2007 10:06 PM
Anon - You're most welcome!
By
Jonathan, at 4/27/2007 11:55 PM
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
Kate G, at 4/28/2007 7:45 PM
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
Jonathan, at 4/28/2007 10:04 PM
All hail Jon! Duh, I thought I had changed that! You are awesome. Thank you so much for the help.
By
Kate G, at 4/29/2007 10:19 AM
My pleasure!
By
Jonathan, at 4/29/2007 10:51 PM
This is awesome. Thank you for generously posting the javascript. Based on advice from this helpful resource, http://www.phil801.com/wpblog/2007/04/21/how-to-uploading-photos-to-flickr-from-your-mobile-phone/
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
Lunamania, at 4/30/2007 9:36 PM
Hi Lunamania - Could you send me the URL to a page showing what you've got so far, and I'll take a look?
Jon
By
Jonathan, at 4/30/2007 10:18 PM
Thanks, Jon for taking a look. It's www.lunamania.org
By
Lunamania, at 4/30/2007 10:58 PM
Actually when I go to your twitter page - http://twitter.com/lunamania - 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
Jonathan, at 4/30/2007 11:43 PM
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
Lunamania, at 5/01/2007 9:26 PM
ok cool - yeah email or blog comments - either way.
By
Jonathan, at 5/01/2007 11:39 PM
Thanks!
By
Saturday Night Takeout, at 5/04/2007 6:18 PM
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
Lunamania, at 5/06/2007 5:34 PM
Jon, I had whipped up a similar modification to yours, thought you might be interested in taking a peek at it:
http://makkintosshu.dyndns.org/journal/twitter-statuses-badge
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
Morgan Aldridge, at 5/07/2007 11:06 AM
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
Fëaluin, at 5/07/2007 12:13 PM
Fëaluin - Yes! Spread the love.
By
Jonathan, at 5/07/2007 9:46 PM
Morgan - nice - I like the CSS hooks.
By
Jonathan, at 5/07/2007 9:47 PM
Thanks Jonathan. I've used your code on my page as well. Awesome :)
By
Anandi, at 5/19/2007 9:15 PM
Anandi - super!
By
Jonathan, at 5/19/2007 10:19 PM
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 http://diego.hipocampos.net i hope u have some time to take a look and gimme a hint about this. Thanks in advance for your time.
Best regards,
Diego
PS: I'm becoming a regular on your blog :D
By
Diego Garcia, at 5/26/2007 8:39 PM
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 http://www.twitter.com/t/status/user_timeline/26613?callback=twitterCallback&count=10 it gives me an error.
On my blog the Twitters aren't showing up either. I'll report this to Twitter.
By
Jonathan, at 5/27/2007 10:01 AM
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
gorgeoux, at 5/28/2007 4:41 AM
They changed the path to the user_timeline page. In the script element at the bottom, instead of "www.twitter.com/ t/ status/ user_timeline/ usernum" it needs to be "www.twitter.com/ 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
jeffy, at 5/29/2007 6:11 PM
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
Jonathan, at 5/29/2007 8:08 PM
Great help, thank you.
By
gorgeoux, at 5/30/2007 1:20 AM
gorgeoux - you're welcome!
By
Jonathan, at 5/30/2007 10:07 PM
Hi there - I am having a Twitter badge problem. I've put the javascript from Twitter in my sidebar, and it is displaying perfectly in Firefox, but in IE it knocks my side bar content down to the bottom of the page, more or less hiding it. You can see the effect at www.soultripper.org, and any advice would be greatly appreciated. I am definitely a newbie at this.
Many Thanks,
Jeremy
By
Jeremy, at 6/01/2007 10:10 PM
Hi Jeremy - Alas, the dreaded IE float-drop issue. Anyway, in your style.css file, in the #sidebar section, try replacing
width: 12em;
with
width: 190px;
overflow-x: hidden;
By
Jonathan, at 6/01/2007 10:36 PM
Jonathon - thanks so much. That worked perfectly! Really appreciate it.
By
Jeremy, at 6/02/2007 9:45 AM
Great!
By
Jonathan, at 6/02/2007 10:23 AM
Actually Johnathon - oddly, it is doing the same thing now only it is happening in Firefox, and IE is working perfectly. Any suggestions?
By
Jeremy, at 6/03/2007 2:02 PM
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
Jonathan, at