Duane Blake

Front end developer

How to create your own mini search in your browser toolbar

One of my favorite features which I like to add to sites which I’m working on is a Browser Mini Search Box. This feature can be used in Firefox and Internet Explorer. It’s very easy to do but very surprising more sites don’t use this feature.

The first thing to do is create an xml file called opensearch.xml and save in a folder called xml. Place the following code below inside.

<?xml version="1.0"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
<ShortName>Duane Blake</ShortName>
<Description>Duane Blake Mini Site Search</Description>
<Image height="16" width="16" type="image/x-icon">http://duaneblake.co.uk/favicon.ico</Image>
<Url type="text/html" method="get" template="http://duaneblake.co.uk/?s={searchTerms}"/>
</OpenSearchDescription>
Attribute Name Description
Shortname This is the name of the search box as it would appear in the minisearch
Description Full Description of the search field
Image Image This is the image used in the mini search box, it’s easier just to use your site favicon
Url This is the url for the site search for your query type parameter if you use the following {searchterm}

Once the xml is complete in the page header place the following

<link rel="search" type="application/opensearchdescription+xml" href="http://www.yoursitedomain.com/xml/opensearch.xml" title="Duane Blake Site Search" />

Now if you refresh the page you should be able to see the search box in Firefox mini search box.

Further Reading

Easily choose your favorite search engine

Leave a comment

Your email address will not be published. Required fields are marked *