Build a Search Box for Firefox 2/IE7

7 comments | Posted: 30 October 06 in Tutorials, by Ryan Hargave

As browser technology continues moving forward companies, such as Mozilla, are releasing products like the Firefox browser that puts the tools into developers hands to be able to offer more to our users. Things such as RSS feeds can be Live Bookmarked, tabs have been added to the UI and now we can easily integrate a site search directly into the browser with ease.

What Is a Site Search Box

A site search box is search tool integrated directly into the browser. It can usually be found around the address bar and makes searching specific sites easier and quicker.

Searchbox

In Firefox several standard site searches are available straight from the install such as Google, Yahoo, Amazon and eBay. So the question is: How do I make one for my site? It's as easy as uploading an XML file to your server and adding 1 line of code to the HEAD of your pages.

First We Build the XML file

In order to search the site, the browser must download an xml file that will act as a plugin to the browser. It contains all your website specific information. Here is the code for the file that we will call "opensearch_desc.xml" and then we will break down each line that needs to be customized.

<?xml version="1.0"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
<ShortName>Godbit Project</ShortName>
<Description>Godbit Project - Article Search</Description>
<Image height="16" width="16" type="image/x-icon">http://godbit.com/favicon.ico</Image>
<Url type="text/html" method="get" template="http://godbit.com/search?q={searchTerms}" />
</OpenSearchDescription>

The first 2 lines we can customize are the Name and Description. Just change out the values below with yours.

<ShortName>Godbit Project</ShortName>
<Description>Godbit Project - Article Search</Description>

Next we add in an icon to the search bar. Here we link to the favicon that the website already uses. Just change the url to match what you use.

<Image height="16" width="16" type="image/x-icon">http://godbit.com/favicon.ico</Image>

And finally we add the search string. This is the trickiest part of the entire process. This will be dependent on how your site handles search. For this method it must use a GET string in the url. For this site (and other Textpattern installs) we use the format of http://example.com/search?q={searchTerms} or for something like a phpBB install you could use http://example.com/search.php?search_keywords={searchTerms}

Customize the search field below with your site's search URL.

<Url type="text/html" method="get" template="http://godbit.com/search?q={searchTerms}" />

Save and Upload the file

Save the XML file you created as "opensearch_desc.xml" and upload it to your web server. Usually the web root is fine.

Add code to HEAD of site

Add the following line of code to the HEAD portion of the websites pages. Replace the url with your domain, path and title:

<link rel="search" type="application/opensearchdescription+xml" href="http://godbit.com/opensearch_desc.xml" title="Godbit Project" />

That's It!

Navigate to your site and you should see the search bar icon glow to alert you that there is a site search to install. Click the dropdown and follow the instructions.

Searchbox Expanded

The Disclaimer

Keep in mind that site search is dependent upon your website's search engine. It doesn't crawl your site and offer up suggestions via some web magic. While this is easy to implement you need to have a rough understanding of how your website works and searches content.

Discuss This Topic

  1. 1 Larry Tomlinson

    Now, how would you make this a link? I’ve seen several sites where they have “Click here to add so-and-so to your search menu.” Do you just put it into an anchor tag?

     
  2. 2 ketsugi

    Thanks for the howto. I don’t think my site will ever generate enough traffic or content that people will want to use this, but it doesn’t hurt to add it in, certainly.

     
  3. 3 Nate Klaiber

    Thanks for the great write up. I am currently re-building our site’s internal search engine and index to have many more features and a quicker response time. This will be a nice touch for those who would like to use it.

    It is a book publishing website, so having something like this in place will be good for our bookstores who like to find books by ISBN. Still working on the internal search engine, but this will be a nice little extra benefit.

    Thanks!

     
  4. 4 Chris Harrison

    Worked like a charm. Just added this feature to our CMS :)

     
  5. 5 shorty114

    Larry:

    See the markup for https://addons.mozilla.org/firefox/search-engines/ and the javascript at https://addons.mozilla.org/js/search-plugin.js. Should be enough for you.

     
  6. 6 Jan

    Larry:
    use the following JavaScript to add a search engine:
    window.external.AddSearchProvider(‘http://www.uni-due.de/~gph120/
    plugins/plugins/onelook.xml’)

     
  7. 7 Alvanweb

    I think it will be exactly useful for websites with numerous articles and visitors such as forums. It’s better to perfect it with JavaScript and put links in our pages because users don’t know must click on browser search box to adding our site search box and unfortunately when we close browser, adding message in search box section will be invisible.

    With let you, I translate a large part of this article to Persian in my blogs.

     

Comments closed after 2 weeks.