I’ve seen your articles about how to add a Twitter or Google search box on a Web page, but I have a tougher challenge: is there a way to add a Facebook search box on my blog or web site? If so, what’s the HTML code needed?
That’s an interesting puzzle because generally Facebook is a closed world, a “walled garden”, as they say, so theoretically it should be impossible to just drop someone smack dab into the middle of things after they’ve entered a search on your page. But then again, if you do a search and look at the resultant URL, there’s a tantalizing hint that it might just be possible…
On the other hand, it will require that the user have a Facebook account and be logged in to their account simultaneously (which is hardly a problem since the majority of the billion Facebook users check their newsfeed multiple times each day, so that’s probably not much of an issue. Further, there’s some confusion about how much of the Facebook information is accessible for someone who doesn’t have an account, or is logged out.
Then again, we can test that, can’t we?
Let’s do a basic search box, first of all. And that brings up an interesting point because most people really don’t have a clue about how sophisticated the Facebook search system is and that they see over one billion searches each day. Impressive!
When you are on Facebook, the search box sits unadorned along the top:
You probably only use it to search for people, but it’s a full blown search box! For example, a search for “The Hobbit” produces a bunch of interesting results:
The most important thing is the very bottom link, “See more results…”. Click on it and you’ll get a page full of results. But ignore them. Instead, look at the many filters available to constrain your results. It’s on the left:
Click on “Public Posts” and you’ll see lots of results, particularly if it’s a popular topic like The Hobbit :
We can work with that, but let’s instead build a search box based on the “Posts by Friends” option. A click on that and I see a Hobbit-related note from my friend Aaron:
More importantly, the URL associated with that result looks like this:
Turns out that with a tiny bit of experimentation it becomes clear that the last two name=value pairs are unnecessary, which reduces the URL to the succinct:
Now it’s just a matter of unwrapping it and rebuilding it as an HTML form. Like this:
<input type=”text” name=”q” />
<input type=”hidden” name=”type” value=”fposts” />
<input type=”submit” value=”Search Facebook” />
It’s not pretty, but it works. Here, try it: