Install Twitter Search Widget

October 19, 2009

uijavascript

When I started blogging again last September, I was delighted to get a template with built-in message polling to twitter. I played with it a bit and settled with the look you see at the right. I am not a prolific ‘twitterer’, but I love the whole concept of micropublishing.

Sometimes when I feel lazy but I want something new in potatokorner; I’d post a tweet, from quotes to funny videos, just to see the widget change(LOL). Great as it is – it’s not perfect. What the widget lacks is interactivity. One day, I started planning (with frameworks like Jquery and Mootools in mind), to make a custom widget that can access twitter API with features like searching for a user’s tweets or scrolling through a Trending Topic . Also thought adding some nice animation and CSS styles. Luckily, I don’t have to; the nice peeps from Twitter beat me to the punch and released a widget – packing almost all the things I wanted. I experimented with this along with some feed scripts from Google a days back (Updates on Pepeng).

What is a Twitter Search Widget!?

The widget’s concept is to supply the it with a search term (or phrase), like ‘potatokorner’ and it will periodically check twitter.com for tweets with the word potatokorner – but not just tweets by yours truly – every single tweet which it appears. Unlike a regular search the widget periodically pulls messages from the site(twitter) and displays it in a marquee. Twitter.com describes it,

“Displays search results in real time! Ideal for live events, broadcastings, conferences, TV Shows, or even just keeping up with the news.”

Get the widget

Making your widget is easy. Log in to twitter.com. Open the Settings page, then click “You can add twitter to your site here”.

You are asked where you want to place your widget, click “My Website”.

Then, you are presented three widgets, choose the “Search Widget”.

Now what you have before you is the heart of the “search widget” configuration.

You’ll learn when you’ve finally playing with your new widget that it’s a parsing nightmare when people add tags even if their topics are not related, especially when it’s a “trending topic”. Fortunately, Twitter.com provided quite a collection of filters to narrow down your search. You can limit tweets to a certain vicinity( near:{location}) or screen out certain words ( -{word}), you can even limit them to happy ones ( 🙂 ). See Advance operators to build your strings. I won’t touch this much, but I’ll explain what I’m going to use.

For our example, I want to add a twitter search widget to find tweets with the word “party”, but I only want positive or happy tweets! , thus the smiley, ” 🙂 “. The smiley is a generic one, but twitter is smart enough to find all the variations (e.g. “:D”,”=)” etc. ). Now lets test it.

Great! It’s working. As you can see, there are only a few tweets shown. It gives it an air of history unfolding. If you like it to show all the tweets in history at once, we’ll move to that later. Now that our search string is tested and working. You have the option of changing the “Title” and “Caption”. Lets leave the title alone and match our search string to the Caption.

So far so good, let’s see how we can configure tweets. Choose preferences. This tab controls how your tweets will look and behave.

Enable “Poll New Results?”, if you want the widget to continue checking the public timeline of relevant tweets to your search. (Default: Checked)

Enable “Enable Scrollbars”, if you need to be able to review the rest of the resulting tweets without waiting for it to loop. (Default: Checked)

Behavior has two values, its either “timed interval” or “load all tweets.” Default behavior is timed interval – tweets are shown one at a time, kind of like a news marquee. When set as timed interval, you have an option to set how much time it takes before showing more results(Interval). You can also set if you want it to repeat the results when all the tweets have been shown(Loop Results).

“Load all tweets” on the other hand, set’s the widget to show all the tweets related to your search – all in one go. No fancy animation. Kind of boring to me, but someone out there might have a use for it.

For our example, let’s leave it as is.

For really large results, you can increase or decrease the number of tweets to show.

Finally, you also have control over how your tweets will look like. If you only need the messages without people’s faces polluting the content area, unset “Show Avatar”.

If the time the message was sent doesn’t interest you, you can remove it by unchecking “Show Timestamps”.

Finally, if seeing hashtags so many times is starting to strain your eyes, hide it by unchecking “Show hashtags”. I find helpful when my search word is a hashtag.

Now for aesthetics, lets change colors to match my site.

I’ll leave the dimensions as is. Unfortunately, you can not test the numbers you have set for the widget. You just have to see how it looks in your page – and decide if you need to adjust. Note you can let the widget grow into the container you want to place it, or if you’re just not sure how to adjust it to fit your site – you can try setting “auto-width”.

I’m happy with the results, click “Finish and Grab Code” button to get the code. See our results below.

Simply insert the code into your page’s html and you’re done. see results here

There you have it, shown you how to get the widget. Now go play with your new toy! If you have a problem installing, just leave a comment or email me at questions at codespud dot com.

Some closing tips

1. If you’re using a fluid-width layout, you might find auto-width useful.
2. Use the minus operator(-) plus word (you want to leave out) in the search parameter to narrow your search.
3. If you’ll remove the scrollbar, enable “Loop results” so you’ll be able to see all the results.
4. I found the optimum interval for showing tweets is 5 secs, but of course it depends on what you intend to use it for.
5. Sometimes, you can clean your results by showing hashtags and filtering unwanted tags out with minus(-).
6. Enable scrollbars if you chose to load all results.