How do I add a LinkedIn search box to my Web page?

Well, there’s the easy part and the hard part. The easy part is to have a search box on your page that lets you enter a pattern and take you to LinkedIn to have the results displayed. The really hard part would be to duplicate all the suggestions that naturally show up as you’re typing in a search on an actual LinkedIn page. That involves some fancy programming, both on the display side and behind the scenes.

If you really wanted to demonstrate your programming skills I suppose you could indeed duplicate that functionality too, but it’s beyond what I can do in a few minutes, so let’s just reverse engineer this baby instead.

To start, here’s the search box:

Now you could click on “Advanced” if you really want to see a complicated set of search criteria, but let’s keep things simple.

To reverse engineer, search for someone. I’ll search for Sarah Palin:

Interesting, but the really interesting stuff is happening in the address bar, where this is the resultant URL:

https://www.linkedin.com/vsearch/f?type=all&keywords=sarah+palin&orig=GLHD&rsid=111471410757171413&
pageKey=voltron_federated_search_internal_jsp&trkInfo=tarId%3A1410757190130

Lots of stuff going on, for sure.

But as all reverse engineers know, the magic is in trying to remove things and seeing what happens. Turns out that you can ignore just about all of the parameters as the first two are the only ones that are important:

type=all

keywords=sarah+palin

There’s nothing else you need. So you can turn that knowledge — and the URL portion prior to the “?” — into a simple HTML form:

<form method=”get” action=”https://www.linkedin.com/vsearch/f”>
<input type=”hidden” name=”type” value=”all” />
Search LinkedIn: <input type=”text” name=”keywords”>
<input type=”submit” value=”Go!”
</form>

This looks like the following when it’s actually working code:

That’s it. Try it, actually.

Cool, eh? Now of course you can use a bit of CSS to make it more snazzy too:

All I did was add some styles, as you can see in this code listing:

<form style=”border: 2px solid black; margin: 8px; padding: 5px;background:#eee;” action=”https://www.linkedin.com/vsearch/f” method=”get” target=”_blank”><input name=”type” type=”hidden” value=”all” />
Search LinkedIn:
<input style=”border: 1px solid black;” name=”keywords” type=”text” /><input type=”submit” value=”Go!” />
</form>

So there ya go. Have fun with it!