Add a Twitter “People Search” Box to my Site?

If it’s somewhere on the World Wide Web, it’s something you can duplicate on your own page or Web site. The question is really more about how much work you want to go through to accomplish a specific task! 🙂

In terms of what you ask about the Twitter search box and its category-specific searches, the answer is that yes, you can duplicate exactly that search on your own Web page, but it is going to involve a few steps. What we’ll need to do is reverse engineer the Twitter search system itself. Don’t panic, though. That just means we need to do a search, then analyze exactly what transpires so it can be duplicated.

To start, let’s jump over to Twitter and check out the search box itself. It’s pretty straightforward:

Reverse engineering is about doing something then seeing what happened, however, so let’s do an actual search. I’m going to search for “john” by typing in the name and pressing Return (as you have figured out, if you click on the blue “Tweet” button you get a window to pop up, letting you compose your next tweet. Oops)

The results show all the various categories:

Lots of possibilities, but it’s people you want, so it’s “People” you should click on. Now you’ll have a bunch of what I call “rolodex cards” for different Twitter accounts that match the search parameters:

I gotta say, nice job Mr. Shahidi with the @john Twitter handle. That’s a keeper, for sure.

Stay focused, though! What we want is in the Web browser address bar, the exact URL that Twitter used for this particular search:

Because we can see the parameters, we can safely conclude this is what’s known as a “get” search, something that’s important when we build the HTML needed for our duplicate form. Let’s unwrap it all:

• f=users
• vertical=news
• q=john

These can be converted into a more HTML-esque format like this:

• name=”f” value=”users”
• name=”vertical” value=”news”
• name=”q” value=”john”

Add to that these two:

• action=”https://twitter.com/search”
• method=”get”

and we have everything we need to duplicate the search box as a FORM for your Web site. Here’s my first cut at it:

Let’s see how that formats and whether it works:

Try it. I’ve addded a target=”_blank” so the results pop up in a new window.

Works great, doesn’t it? Not too hard at all, this reverse engineering thing. Now, let’s add some CSS pretty so it’s a bit more attractive:

The result:

So that’s it. Just copy and paste the above code into the raw HTML of your Web page and you’ve just added a Twitter people search feature to your site. Nicely done!

And while we’re talking about Twitter, I invite you to follow me, @DaveTaylor on Twitter and check out our huge archive of Twitter help here on the site too.