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.

Post a Comment

Kent Brewster .:. 20080718103645

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 .:. 20080621073626

Thanks a lot, very helpful script!

Kent Brewster .:. 20080617134159

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 .:. 20080617131045

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 .:. 20080612090700

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 .:. 20080612081017

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 .:. 20080612055433

Regex seems to be fixed. Noticing weird results with unicode characters; Tantek's last name is always screwed up. More fiddling to come....

Angelo .:. 20080612003203

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 .:. 20080610222422

Okay, gaah, it's slow. And something's up with my regex; any link with punctuation after it is hosed. Fixing.

Kent Brewster .:. 20080610221852

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 .:. 20080531080034

It's broken, sorry. Details are on the Twitter developer discussion area. Working on it now.

Adric .:. 20080525212535

Love this, however, is it possible to not have it drop twitters that are more than 24 hours old?

Kent Brewster .:. 20080505205303

I need to update Twitterati. I'm on it; in the meantime, welcome, Stumblers. :)

Sandman .:. 20080426080657

Any possible way to have it show the alias instead of the real name?

Luc G .:. 20080426055102

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 .:. 20080418085704

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 .:. 20080416071607

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 .:. 20071230144143

Chris: you have an extra comma after the very last item. Try taking it out; it worked for me!

Chris .:. 20071230070123

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?