You’ve probably seen them, and maybe even used them, that handy little Search Box in the top-right of your browser. But, have you ever wondered how you can add your own Search there, and offer adding it to your visitors? Well, I’m going to show you how.
First of all, this is important, both Internet Explorer 7 (this won’t work in previous versions of Internet Explorer, since they didn’t have inline search) and FireFox use the Search Engine Provider standard, OpenSearch1.1. Because they use the same standard, you can use the same code in both Browsers to add a search provider. So, onto the details.
Okay, lets start with some background. XML is used to specify everything to do with your Search, so it’s fairly easy to implement. No Programming Language and Complicated Scripts here, folks, just straight XML.
First of all, if you want all the juicy details on all the possible “elements” available to use, go here.
Okay, here’s what we need to start with:
<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
The first line just tells the browser that you’ll be using XML encoded using UTF-8. The second line tells the browser what specification you’re using, and where to look for it.
Now, you need to start adding some details. First, you’ll need to specify the name:
<ShortName>Search Engine Name</ShortName>
That’ll be the name that shows up in the textbox in the corner of the browser when your Search is selected from the dropdown box. You can also add a <LongName> tag, but it’s not necessary, and I haven’t seen it used in Browsers yet. Now, for a description:
<Description>Search Engine Description</Description>
Not much to say about that, it’s simply the description of your Search.
Now, for Icons. Icons aren’t used in IE7, but they are, sometimes, used in FF. So, the code:
<Image type="image/x-icon" width="16" height="16">http://www.example.com/favicon.ico</Image>
<Image type="image/png" width="64" height="64">http://www.example.com/favicon64.png</Image>
It’s best to include Icons of 2 sizes and formats, 16×16, 64×64 and .ico and .png. Note the full URL. You will need to include your full domain, you can’t just do /imagename.ext (since the browser won’t know where to look for the image).
Now, for the most important part, the URL.
<Url template="http://www.example.com/?s={searchTerms}" type="text/html" />
First, you’ll need to make a search (of any string) and then copy the URL and replace the string you searched for with {searchTerms}. Most likely, you’ll use text/html in type.
Now, to end the file, add this to the bottom of it:
</OpenSearchDescription>
All that code together would look like this:
<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
<ShortName>Search Engine Name</ShortName>
<Description>Search Engine Description</Description>
<Image type="image/x-icon" width="16" height="16">http://www.example.com/favicon.ico</Image>
<Image type="image/png" width="64" height="64">http://www.example.com/favicon64.png</Image>
<Url template="http://www.example.com/?s={searchTerms}" type="text/html" />
</OpenSearchDescription>
Now, the only left to do is to save the file and link to it.
You’ll want to save it as something.xml. I’m going to recommend addsearch.xml. Then, of course, you’ll want to upload that to your website.
Now, you’ll probably want to allow people to install this into their browsers ( 😉 ). So, all you need to basically do is add an onclick="" to a link:
<a href="#" onclick="window.external.AddSearchProvider('http://www.example.com/addsearch.xml');" title="Add Search Engine Name to Your Browser">Add Search Engine Name To Your Browser</a>
Now, you may want Visitors browsers to discover your Search Engine automatically. You can add this to the <head> of your page:
<link rel="search" type="application/opensearchdescription+xml" href="http://www.example.com/path/to/addsearch.xml" title="Search Engine Name" />
And that will have your visitors browser show either this:
Or this:
I’ve added a Search Engine for this blog. Check it out.
Get it? Got it? Good.
