Live Updating Twitter Search On Your Site

For a client, I went looking for a nice solution to display a live-updating Twitter Search stream on a website. After trying out countless PHP, iframe, javascript, and Flash solutions, I stumbled upon Juitter, and that’s what I’m using.

Here’s why:

• Juitter is a jQuery plugin, and since I was already using jQuery to add various other functionality to the site, it was a perfect fit.
• The live updating has a really nice, subtle animation effect that doesn’t distract too much from reading, and it’s possible to set the reset time yourself.
• Juitter is highly customizable. You can search multiple terms, usernames, or specific languages, decide whether or not to display avatars, style the entire thing with CSS, and your users can even customize the stream by clicking hash (#) tags.

So, anyway, Juitter is pretty great, brainlessly simple to get up-and-running, and is just what I was looking for.

But I wouldn’t be writing this post if everything ended there. Nope. The fun part is what happened when my client’s audience figured out that whatever they Tweeted showed up on the official website: a few bad apples started Tweeting seriously offensive and hateful stuff. With words like Hitler and bleeding anus and the like. Not good.

I’m far from the censoring type. Believe me. But I recognize a potentially serious problem when I see one, and I’m sensitive to the fears of brand managers and business owners when it comes to the Wild West of social media integration, so I immediately tried to figure out a way to filter the search results by Twitter username.

My first thought was to contact the developer, Rodrigo Fante, with the request. I’m far from a javascript guru - though I can find my way around pre-written code pretty well - so I though the best shot would be to see if he were planning on adding this functionality to a forthcoming release. Turns out he is. Which is great, but didn’t really solve my problem. People were being crazy now, so I had to figure something out.

After a few minutes of reading through the code to get a sense of how it worked, I said, Hey, what if I were able to give each list item an additional class based on the username, and then use the CSS file to hide all list items written by “Known Offenders”?

A couple more minutes of tinkering and BAM. Solved it.

Here’s what do to to block a user with the Juitter jQuery plugin:

In line 125 of jquery.juitter.js, you’ll see this:

.attr('class', 'twittLI')

Change it to this:

.attr('class', 'twittLI' + ' ' + item.from_user)

Then, in your stylesheet, add the following bit of code (replace knownoffender with the username you’d like to ban):

.knownoffender, .knownoffender2 {display:none !important;}

And you’re all set!

It’s not a terribly elegant fix, but it more than gets the job done. Please don’t abuse the power, though. And if/when Rodrigo updates Juitter to include this functionality, I’ll update this post with what will surely be a more powerful method.

Any questions? Let me know in the comments. And happy Twittering!