del.icio.us .:. tweet

Twitterati Badge .:. kentbrewster.com

Here's an example from Case-Hardened JavaScript, the Twitterati badge.

Just to the right (if you're using an A-grade browser, and if my outside host at r8ar.com stands up under the load) you ought to see a Twitter badge. If you'd like to try it out, feel free ... but please understand that it's running on a host that will undoubtedly crack under any real strain.

Things to Do and Notice

  • Click an icon and the badge will refresh with that user's friends.
  • Click a name and you'll head on over to their page.
  • Sorry, there's no "back" button. If you find a set that has posts only from its user, you're hosed.

Valid arguments for the badge are:

  • user : defaults to my account, kentbrew.
  • height : defaults to 350
  • width : defaults to 250
  • border : defaults to 2px solid blue
  • background : defaults to white; if you set evenBackground, oddBackground, and headerBackground, you won't see it at all.
  • userBorder : defaults to 1px dashed gray
  • userColor : defaults to whatever link color's on your page
  • headerBackground : defaults to your main background.
  • headerColor : defaults to black.
  • evenBackground : defaults to your main background.
  • oddBackground : defaults to gray.

Caveats and Gotchas

  • The script is running from an, ahem, inexpensive hosting account, so please be gentle, and remain aware that it could crap out at any time. (If it looks like there's sufficient interest and perhaps a business model that would pay the bandwidth bill, I'd be happy to take r8ar.com to the next level.)
  • The Twitter API has a couple of quirks that I've posted on their development forum ... they seem to be caching requests for this particular service, so if you use this badge and then find some other service that looks at friends_timeline, and happen to request the same user id you saw here, you might get another copy of your cached call, with my callback twitBack and not the other guy's. [UPDATE: Al3x responded very quickly, and is looking into it.]

Get This For Your Page

It's much more interesting with your own Twitter id in the badge, but if you'd like to stalk[H[H[[H[H follow along with ijustine, here's how you'd do it:

<script type="text/javascript" src="http://r8ar.com/twitterati.js">
{
   "user" : "ijustine",
   "height" : "400",
   "width" : "250",
   "border" : "1px solid black",
   "background" : "pink",
   "evenBackground" : "pink"
}
</script>

To try it out, stick this bit into your page, right where you'd like the badge to show up. Whitespace doesn't matter; please feel free to put it all onto a single line if you like.

Most of all, have fun, and please let me know how it goes.

Comments from before Disqus:

Sahil .:. 2010-08-08 23:31:38
Hi,its works well.But can you provide a widget or badget from that i can see my followers only no tweets only followers using javascript.If you can provide me it will bereally great.
Thanks
Jane .:. 2010-03-10 07:45:55
This badge is terrific! I have a small cosmetic problem. I had to make it very narrow to fit my column and now I'm getting a horizontal scroll bar that isn't really necessary. Is there a way to overwrite it on my page containing the script?
http://www.smallhotels.com
Thanks,
Jane

Jens .:. 2009-11-18 02:03:57
dear ken,
old question? do you know how to use identica-badge on a group instead of an user?

kind regards
jens
zen .:. 2009-10-11 17:27:47
This script is great. I'm using it on my site, but I was wondering if its possible to follow the timeline exactly as on twitter? For example the last 100 tweets on date from all friends on a timeline, instead of only the last tweet from every friend.
Kent Brewster .:. 2009-09-16 16:03:22
Hi, Vince. No, I can't see a way that this script could jeopardize the security of any of the people you follow. The only risk you're taking is that r8ar.com (my other domain, which hosts the script) might be somehow suborned and the script replaced by something evil. But that's the risk you take with all of these fancy JavaScript includes.
Vince .:. 2009-09-05 14:09:51
Kent,
This script is really cool! I wanted to know by posting this on my website if I jeopardize the security of any of the people I follow. I hope you can get this script to display the Twitter user name vs the person's name.
Micahel Dougan .:. 2009-07-31 11:48:43
My name is Michael Dougan and I am running for the United State Senate, I announced this past week in Mesquite TX the local paper in Mesquite did news about it. The news paper is called the Mesquite news it is on there website mesquitenews.com. My wife and I can not what to meet are you Texas Republican, in this race and for the future of the party.
Kent Brewster .:. 2009-04-21 09:56:48
I'm very busy with my real job at the moment; when and if I have time for Twitterati, I will figure out how to get the requested user's most recent tweet and put it on top, and I will look into some of the other smaller things.

As I said below, I will not write a badge that dynamically updates every few seconds. That's too much pressure on the API for a very questionable result; without user intervention, there's no telling if anybody is actually looking or not. (I might consider a "refresh" or "get more" link, but that's for future times.)
blue point .:. 2009-04-20 04:54:07
also dynamically update every x seconds and buttons that say
follow my timeline so a person can always come back home ....
blue point .:. 2009-04-20 04:52:10
Since i am now writing the requirements ... ;-)... you should also have:
option for number of entries in windows option
a follow me tag
a tweet this tag....................
blue point .:. 2009-04-19 10:17:29
That is to say there should be 3 options that shows: my timeline, my friends timeline as well as me and my friends timeline .... just like it does on the twitter home page.
blue point .:. 2009-04-19 10:05:51
I found no gadaget that does this...very odd...i am new to twitter and i would think this would be a very very basic functionality !!!!!! None of the twitter gadgets do this. If you replace user for friends in the time line in requires users to log in on the website ...so no good:!!!! YOU WOULD BE THE FIRST GADGET TO DO THIS !!!!
Kent Brewster .:. 2009-04-19 09:11:32
Sorry for the hassle, bluepoint; I need to update Twitterati for several reasons. (We had a recent spike in traffic from mashable.)

At one point there was a Twitter API call that worked for this (statuses/friends_timeline/user.format) but it's been taken down. The best I've been able to do is to grab the user's root object, which shows the latest update from all of his or her friends.

As I said downstream a bit, please use the native Twitter badge if you want just that particular user's updates ... in the meantime, please feel free to set your own header text using "headerText":"your stuff here" in the JavaScript call; this will overwrite "[user] and friends" in the header.
blue point .:. 2009-04-19 02:35:32
Does not .... it shows my followers only .... or it is broke? Why are technical people have a missing demension in inteligence? I have look every where for a widget that shows mine and my followers tweets...is this not user logical? ...should be optional...no? Whats the point of twitter if it can not do this? technical people are so frustrationgly un user friendly !!!!!! Argh !!!!!!!
Kent Brewster .:. 2009-04-16 06:52:14
Thanks, glad it's useful. (Looks like I need to work on my i18n, though.)
Mattis Manzel .:. 2009-04-16 02:55:17
Excellent! I included the badge in a couple of wikis, like http://socialsynergyweb.net/cgi-bin/wiki/WorldDemocracy/FrontPage Thanks
Peter Guntenberg .:. 2009-03-20 17:27:31
Your badge ist nearly perfect - unfortunately it doesn't correctly show special characters like mutated vowels (äöü) or ß. :-(
Kent Brewster .:. 2009-03-17 21:52:26
Rhonda: you could just use the Twitter badge for that. It's at http://twitter.com/widgets/blogger ... not as technically sweet as mine, of course, but it works. :)
Rhonda .:. 2009-03-17 12:34:40
this is the best designed twitter widget I have seen yet. Is there a way to have it follow just one person's feed?
Luke Smith .:. 2009-03-11 13:09:46
I created a toRelativeTime function that was inspired by Twitter's tweet time reporting.
http://tr.im/hgdg

In fact, I used it in a WIP YUI 3 module TwitterFeed (also on github). You should be able to use the function if you wanted the tweets displayed as Twitter does.
Scott Hatton .:. 2009-02-19 07:33:34
I seem to have a problem with the way the Google Chrome browser handles Twitterati - i.e. the Twitter update text appears tiny. What CSS element needs changing?
Detlef .:. 2009-02-18 00:14:53
there is the unit "px" missing for the padding of the images:

...;margin-right:" + $.a.padding + "px;}",
HomeSpaGoddess .:. 2008-11-08 17:11:30
Hey! Just wanted to say thanks. This is exactly what I was looking for. I changed the color and made it smaller to fit into the sidebar of my site. Great job;)
Blobalicious .:. 2008-10-31 07:23:09
I wrote a bit of code to make the twitter badge refresh. Unfortunately, I didnt find this until after I coded up my version of the twitter badge. Either way, the refresh is basically a javascript function that refreshes an iframe that contains the twitter badge code. It looks like they are the same page and looks ajaxy, but really just refreshes. The countdown is nice to, because it tells our ideablob.com users how long until the next refresh. http://www.bloblive.com/watch.php
Kent Brewster .:. 2008-10-20 13:15:50
Patrick: no, the load would be entirely on Pipes first, and then Twitter, since JavaScript loads once on the client and runs the API without touching your server again. Setting it up to auto-repeat would get you a bunch of the same cached Pipes results, I'm afraid, and could easily wind up looking like Pipes was abusing Twitter.

Sorry, but I'm going to politely decline to write such a thing. :)
Patrick .:. 2008-10-20 11:11:40
Any update on auto refresh? How does your refresh compare to twhirl or twitteriffic doing the same thing from our computers? Would it be okay to do it if we loaded the .js on our own server to "balance" the load?
Sasha Wolff .:. 2008-10-08 05:11:52
I was wondering about that! Thanks. I have one more question and then I'll be out of your hair! Is there any way get the time on your code to post just like twitter's (ie 23 minutes ago, 1 hour ago). I'm not a .js genius so I'm not sure if there is a code out there that can do that.
Kent Brewster .:. 2008-10-06 14:12:03
There is, but please don't do it. At several points in the recent past, Twitter has decided that its API is being hammered by this sort of call and shutting it down. (I can't blame them; getting a call once per minute from the same IP address will look like abuse from the point of view of the server.)
Sasha Wolff .:. 2008-10-06 10:20:05
I've been looking for a script like this for a long time. Is there any way to make it so that it will auto refresh without having to refresh the entire page?
Kent Brewster .:. 2008-09-10 08:28:34
Of course, feel free.

One thing to remember, though: if you use the copy hosted on r8ar.com and Twitter changes the way their API works, you'll get the fix from me as soon as it goes live. If you host your own copy of the script it will quit working until you update it yourself.
David Miller .:. 2008-09-10 07:08:02
Outstanding! Very nicely done! Do you have any objection to me snagging your JS file to place on my own site? I will leave in the "get this" for sure. This is so nicely crafted and elegantly scripted! =D
Kent Brewster .:. 2008-09-09 13:51:38
We're back, thank to much hard work from Alex Payne at Twitter. Pipes seems to be whitelisted for Twitter API calls that have an unauthenticated-queries-per-hour limit; see http://pipes.yahoo.com/kentbrew/twitter_getwithfriends for a working example.
Kent Brewster .:. 2008-07-18 10:36:45
Grumble. We're down. Again. Looks like Pipes is up against the unauthenticated-queries-per-hour limit. Sorry, folks, this one might not be solvable.
Benjamin .:. 2008-06-21 07:36:26
Thanks a lot, very helpful script!
Kent Brewster .:. 2008-06-17 13:41:59
Hi, Chris. Glad it's useful; I like everything about nashvilleistalking except the domain name, which seems to be about stalking, not conversations. :)

The API call we're using is getting your contacts. You're not listed as one of your contacts, so your latest won't be in there. Twitterati isn't going to show your most recent tweet; that's tops on my list of Things to Fix.

Two factors may be conspiring to keep @thinktrain's posts off your badge:

First, the pipe I'm using only gives back the twenty most current tweets, so if there are twenty more-prolific tweeters in your friends list, they're going to show up. (I need to fix this and offer a parameter that the user can change; the pipe is currently just throwing away those other eighty tweets.)

Second, in looking at your Twitter page I see that you are following more than a hundred people. If my understanding of the Twitter API is correct, the call I'm using only returns 100 people. I'm fuzzy as to WHICH 100 people; it might be the 100 that have updated most recently ... or it might not. If it's not, and he's friend #101 or higher, @thinktrain's posts aren't going to come up.

What happens when you point Twitterati at one of @thinktrain's contacts that doesn't have more than 100 people?
Christian Grantham .:. 2008-06-17 13:10:45
Kent, I'm so glad this script works again. Now that I have it up and running, I'm noticing my tweets and tweets of a few users I follow are not showing up. For example, I follow @thinktrain, the user's tweets are not private, yet they do not show up. Any idea why?
Angelo .:. 2008-06-12 09:07:00
I'm not exactly sure I understood what you said, but thank to your words I found a solution until your fix comes. Bye ;-)
Kent Brewster .:. 2008-06-12 08:10:17
Thanks, Angelo. As it sits right now, Twitterati only displays posts from users the account in question is following. Bettable doesn't seem to be following anyone, so nothing comes up. (This is on the list of Things to Fix; the badge ought to display the most recent status for the account listed up top, and say so if there aren't any friends' updates to display.)
Kent Brewster .:. 2008-06-12 05:54:33
Regex seems to be fixed. Noticing weird results with unicode characters; Tantek's last name is always screwed up. More fiddling to come....
Angelo .:. 2008-06-12 00:32:03
Hi Kent, great job! I was looking for a twitter badge and I think yours is the best. No doubts. But something strange happen to me... I have 2 twitter accounts. I want to display "bettable" 's twitts... but the badge is simply empty. With other account "pluginguy", all goes fine... What's wrong? Thanks ;-)
Kent Brewster .:. 2008-06-10 22:24:22
Okay, gaah, it's slow. And something's up with my regex; any link with punctuation after it is hosed. Fixing.
Kent Brewster .:. 2008-06-10 22:18:52
Right, so I've got a half-baked solution running. We're using Pipes to hit /statuses/friends.format, which (in spite of documentation to the contrary) seems to work without authentication.

It makes sense to me that this is easier on Twitter's database than a query that dug out all your friends, groveled through every single one of them to find all of their updates updates, sorted the resulting mass, and returned the most recent twenty. The only downside is that you're going to get a maximum of one update per user.

To take it easy on Twitter, I am running the query through Pipes to add an extra layer of caching on top. No matter what happens, Twitterati will never query the same user more than once per thirty seconds, or whatever caching interval Pipes is using.

Also new: quite a few more configuration variables that need to be documented, dates are showing up, CSS is dynamically generated, inline @-urls load properly as users, and hashtags are linked to Summize search results. To go to someone's actual Twitter page, click their name or ID, and then click the header when the link comes up as so-and-so with friends.

I still have work to do on the CSS, which is fighting with my inline stack. Hackety hack....
Kent Brewster .:. 2008-05-31 08:00:34
It's broken, sorry. Details are on the Twitter developer discussion area. Working on it now.
Adric .:. 2008-05-25 21:25:35
Love this, however, is it possible to not have it drop twitters that are more than 24 hours old?
Kent Brewster .:. 2008-05-05 20:53:03
I need to update Twitterati. I'm on it; in the meantime, welcome, Stumblers. :)
Sandman .:. 2008-04-26 08:06:57
Any possible way to have it show the alias instead of the real name?
Luc G .:. 2008-04-26 05:51:02
Any chance you'll release the js file? I'd rather load the js file from my own website instead of being dependant on someone else's website being up/available.
Christian .:. 2008-04-18 08:57:04
Any chance we can modify the js to take off the "USERNAME'S TWITTERATI" ? I have my own title, and your forced title is messing it up. Thanks!
Dette .:. 2008-04-16 07:16:07
Ooooohhhh - this is really cool! I just added it to my blog - by chance is there a way to show the permalink/how long ago each tweet was updated?
Kent Brewster .:. 2007-12-30 14:41:43
Chris: you have an extra comma after the very last item. Try taking it out; it worked for me!
Chris .:. 2007-12-30 07:01:23
A great explanation and a great badge - even for a novice like me!!! I tinkered a bit and can see my changes fine in Firefox, but I get a "bad json" popup in IE. What am I doing wrong?

Copyright Kent Brewster 1987-2014 .:. FAQ .:. RSS .:. Contact