How Can I Add a Britannica Online Search Box to my Site?

There are a lot of resources already online for home schooling, ranging from downloadables to entire curricula. Thematic word searches for the younger set, crossword puzzles, even interactive quizzes. It’s pretty amazing what’s there. But there’s always space for new quality content on the Internet, and a resource that helps people pick through the thousands of other sources is a good idea too. One obviously helpful facet of that is to not just point to good sources, but to integrate them into your page so that there’s one less click needed.

I’m also a fan of the Britannica.com site, the online version of their fabled encyclopædia, which, yes, we used to have on the shelf when I was growing up. Online makes finding things much easier, but it also makes accidental discovery much harder, the tradeoff of all digital versions of formerly print educational materials.

Be that as it may, let’s get into some coding, shall we? To do this, you’ll need to flip into “text” or “raw” or “html” mode in your page editor because you’ll be copying and pasting HTML and don’t want it to be formatted by your visual editor.

As with any Web site search reverse engineering task, the first step is to go to the site and do a search. In this case, we’ll head over to Britannica.com…

That’s quite a tagline, eh? 1768. The world has sure changed in the intervening 252 years.

Now to search for something. Since it’s Encyclopædia Britannica, let’s do an appropriately encyclopædic search: van gogh. Like most modern search engines, they have a suggestion engine that immediately offers up possible matches:

Getting that to work on your site is pretty tough, so we’re going to eschew that functionality. Instead, just press Enter or Return and get to the search results page. In this instance, it’ll offer these matches:

A bit redundant, but clearly this search matches the painter Vincent Van Gogh. What’s important, however, aren’t the results themselves, but the URL in the address bar of the search results page. In this instance the URL looks like this:

britannica.com/search?query=van+gogh

That’s nice and easy to unwrap, because we’re going to need to create an HTML form that points to the right place and offers up the user’s search query with the proper variable name too. This is what’s known as a method=GET form, and the elements are:

• target=https://www.britannica.com/search
• variable=query

Armed with that knowledge, a rudimentary form that lets you embed a Britannica search on your own Web page:

Search Britannica.com: 
<form method="get" action="https://www.britannica.com/search">
<input type="text" name="query" />
<input type="submit" name="Search!" />
</form>

Reasonably straightforward, I hope. You can see how we can just drop in the key elements (target, variable name) and have a crude, but functional search. Here, try it:

Search Britannica.com:

That’s the basics. You can embellish and add as you desire, including perhaps using the cool Britannica logo for visual identification, offering up a sentence or two describing the site and suggesting the types of searches that will have the best results. You can also link to search results too since you know the format of the search result URLs.

For example, to link to the search results for “cuban missile crisis”, you could simply use this URL:

https://www.britannica.com/search?query=cuban+missile+crisis

Thusly: Learn more about the Cuban Missile Crisis with just a click!

Hope that helps you build out the page you seek. Also note that I have a lot of reverse engineered search boxes explained on this site if you want to expand out to various other Web sites with your links. Start with Google Image Search, then explore Twitter people search, Reddit search, celebrity birthdays (who doesn’t want to know which celebrities share their birthday? 🙂 and, finally, a Bing search box too.