spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / search

Search Us: Adding Search Engines to Browser Search Toolbars

Developer News
Mandrake Linux Founder Back, Virtually
Amazon: We're a Technology Company
Sun Expands MySQL With Closed Source

On this page are links that will allow you to add several of our Jupitermedia Web development sites to the search bar of your Mozilla, Firefox, or Internet Explorer 7 (as of this writing) search bar. Following the links is a brief tutorial (with supporting links) that will help you understand how you can present the same type of options to visitors of your site; but in brief, the Firefox mechanism (1.5.x) is based on the Mycroft project at http://mycroft.mozdev.org/ (which itself is based on Sherlock), and the Internet Explorer/Firefox 2.0 method is based on the OpenSearch specifications at http://opensearch.a9.com. In addition to the "Add Engine" links, which perform the actual JavaScript to add the search to your browser, we also provide direct links to each of the supporting files (.gif, .src., and .xml) for your own examination or analysis.

Example of the WebRef search choice in Firefox
Firefox example

Once you click the appropriate Add Engine link below (as of this writing, Firefox 1.5+ and Internet Explorer 7+ are the only browsers that the Add Engine links support), you will be able to select that site as the target for searches in your Firefox or Internet Explorer search toolbar. Just select the site, key in your search term, and press enter: You will then be taken directly to our own search engine results for the terms you entered!

The Add Engine links below assume you have JavaScript enabled in your browser; but it is possible (at least in Firefox 1.5x) to add a search engine to your browser's search bar manually without JavaScript. First, find your searchplugins directory, which is either in the directory where you installed Firefox or in a subdirectory of your user profile, depending on your platform and setup. Next, load into that directory the Mycroft Definition File (that one ends in a .src extension) and the .gif files listed beneath the desired site below. Restart your browser and the search choice should now appear in your search toolbar!

Add Search Engine FK Forums
Search the FlashKit User Forums
Add Engine
Mycroft Definition File
OpenSearch Definition File
GIF Icon

Add Search Engine FlashKit
Search FlashKit: A Flash Developer Resource
Add Engine
Mycroft Definition File
OpenSearch Definition File
GIF Icon

Add Search Engine HTML Goodies
Search HTML Goodies: Free HTML Tutorials and Help
Add Engine
Mycroft Definition File
OpenSearch Definition File
GIF Icon

Add Search Engine HierMenusCentral
Search HierMenusCentral
Add Engine
Mycroft Definition File
OpenSearch Definition File
GIF Icon

Add Search Engine JavaScriptSource
Search JavaScriptSource.com: Free JavaScripts
Add Engine
Mycroft Definition File
OpenSearch Definition File
GIF Icon

Add Search Engine ScriptSearch
Search ScriptSearch: Your Ultimate Resource for JavaScript, source code, php, java, and more
Add Engine
Mycroft Definition File
OpenSearch Definition File
GIF Icon

Add Search Engine WD Forums
Search the WebDeveloper User Forums
Add Engine
Mycroft Definition File
OpenSearch Definition File
GIF Icon

Add Search Engine Web Developer's Journal
Search Web Developer's Journal: Tips on Web Page Design, HTML, Graphics and Development Tools
Add Engine
Mycroft Definition File
OpenSearch Definition File
GIF Icon

Add Search Engine Web Developer's Virtual Library
Search Web Developer's Virtual Library: Web Development Tutorials and Resources
Add Engine
Mycroft Definition File
OpenSearch Definition File
GIF Icon

Add Search Engine WebDeveloper.com
Search WebDeveloper.com
Add Engine
Mycroft Definition File
OpenSearch Definition File
GIF Icon

Add Search Engine WebReference
Search WebReference: The Webmaster's Reference Library
Add Engine
Mycroft Definition File
OpenSearch Definition File
GIF Icon

Add Search Engine XML Files
Search XML Files: Extensible Markup Language Tutorials for Developers
Add Engine
Mycroft Definition File
OpenSearch Definition File
GIF Icon

Example of the WebRef search in Mozilla
The WebReference Search Engine
in the Mozilla search Sidebar

Search You

To allow users to add your own search engine to their browser search bars, you must first create the supporting configuration files used by each of the browsers, and then provide an Add Engine link to your page(s) that will allow the users to utilize those files. Optionally (but recommended) you can add a link reference to the OpenSearch description file, so that browsers that support it can auto-discover the file and add the option to their search toolbars so long as they're viewing the page.

Supporting Files

Before adding an Add Engine link to your pages, you must first create supporting configuration files that will describe to the browser how to access and utilize your search engine. To support Firefox 1.5+ and Internet Explorer 7, you'll need to create two files: a Mycroft Definition File, and an OpenSearch Definition File. The Mycroft file will be used in Firefox, and the OpenSearch file will be used in Internet Explorer 7 (Firefox 2 also supports discovery and use of the OpenSearch description file). We're not going to examine these files in detail, but in brief they provide the appropriate parameters to the browser that it will in turn provide to the search engine in order to generate (and, in the case of the Mycroft files, interpret) the results of the search. For the full skinny on how to create these files, we refer you to the following sites:

Mycroft.mozdev.org
OpenSearch 1.1

Adding an Add Engine Link (addSearchEngine and AddSearchProvider)

To add an Add Engine link, first add a JavaScript script like the following to your page:

<script type="text/javascript">
function addEngine()
{
   try {
      window.external.AddSearchProvider("http://www.webreference.com/cgi-bin/ase/q/jupm_webref.xml");
   }
   catch(eObj) {
      if ((typeof window.sidebar == "object") &&
          (typeof window.sidebar.addSearchEngine == "function")) {
         window.sidebar.addSearchEngine(
            "http://www.webreference.com/cgi-bin/ase/q/jupm_webref.src",
            "http://www.webreference.com/cgi-bin/ase/q/jupm_webref.gif",
            "WebReference",
            "Web");
      }
      else {
         alert("We're sorry; but we cannot add our search engine to "+
               "your browser.\nWe require Mozilla, Firefox, or IE 7 "+
               "to do this.");
         return true;
      }
   }
   return false;
}
</script>

In the addSearchEngine call, you will need to replace our WebRef stuph with your own values. The first entry is the location of your .src file, that's the Mycroft file you created above. The second is the location of the image icon that will be used to label your search engine in the browser. The third entry is a name for this search engine; it will be used when the browser prompts the user for their permission to add this engine. Finally, the fourth entry is the category for this entry; which may be useful in the Mozilla or Firefox sidebar search tools.

In the AddSearchProvider call, which is the logic that allows adding an engine to IE7 and Firefox 2.0, you need to provide the location of the OpenSearch .xml file that you created above.

To provide a link to the user to launch the script, add a link such as the following:

<a href="addsearch.html" onclick="return addEngine();">Add our Search Engine to your toolbar</a>

You'll need to provide a separate addsearch.html page, which will be followed automatically by those users who do not have JavaScript enabled or that do not support the adding of search engines by scripts. We also recommend somehow telling the users (perhaps as part of the link) that only FF and IE7 are supported; so they don't have to click the link to find out.

More information specifically on the JavaScript components of the process can be found at these links:

http://www.mozilla.org/projects/search/technical.html
http://developer.mozilla.org/en/docs/Adding_search_engines_from_web_pages
http://blogs.msdn.com/ie/archive/2006/02/07/527266.aspx

Adding an Auto-Discovery Link

While the above are the only steps that are necessary for your users to add your search engine to their toolbar, you should also consider adding an auto-discovery link to your pages, per the OpenSearch specs. Such a link would look like this:

<link title="WebReference" 
      type="application/opensearchdescription+xml" 
      rel="search" 
      href="http://www.webreference.com/cgi-bin/ase/q/jupm_webref.xml" />

and would allow browsers that understand the OpenSearch spec to find and use your definition file automatically. In Firefox 2, for example, when you land on this page, Add WebReference automatically appears as a choice in your search engine toolbar drop down list. In the above example, replace the "title" value with the name of your search engine entry (usually just a short name representing your site), and the href with the OpenSearch .xml file that you created above.

Conclusion

Adding your own site's search engine to the search toolbar can increase your traffic while providing your loyal visitors with a simple means of finding the information you have to offer--from wherever in the Web they happen to be at the time. We hope that the tools provided on this page can help you to offer this valuable service to your own visitors.

User Comments Submit | Register | Login Comment Feed RSS 2.0
1. Dan Ragle
Admin
11/03/2006 01:58PM

36 total posts | view profile

I've updated this article with a new addEngine function, based on "try..catch" instead of interrogating the window.external.AddSearchEngine method as the previous addEngine did. There are two reasons for this change:

1.) The previous method flat out doesn't work in IE7; as IE7 will not allow you to test for the existence of the AddSearchProvider method. That is, this statement:

if (window.external.AddSearchProvider) {
   // do something based on the
   // existence of AddSearchProvider
}


generates an error in IE7.

2.) The latest Firefox release (2.0) supports and recommends (see this link) the use of the AddSearchProvider method (and hence, the OpenSearch format) as opposed to the Sherlock-based configuration file.

Thus, our new function uses try...catch to try the AddSearchProvider function first; and if it fails, tests for and tries the Sherlock-based mechanism for Firefox 1.5x. If this also fails, the alert message is provided for the user.

Unfortunately, this means that the function will cause errors in older browsers that don't recognize try...catch syntax; but a more graceful solution--that doesn't require ugly browser sniffing--escapes me at the moment. Feel free to drop us a comment if you come up with something more elegant!
   

Please review our Comment Submission Policy before submitting comments to our site.
Your name:
 Your E-mail:
* Your URL:
* Your Subject:
(Maximum characters allowed: 200)
Your comment:
(Maximum characters allowed: 5000)
CAPTCHA Verification
Please enter the code displayed to the right in the box below:
CAPTCHA Image
Hear it!
  

* = optional field


home / search

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

webref The latest from WebReference.com Browse >
Working with the DOM Stylesheets Collection · Administering RBAC in PHP 5 CMS Framework · xref: Automatic Cross Referencing Script
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Combine BottomCount() with Other MDX Functions to Add Sophistication · Creating a Daemon with Python · The Coming Voice-over-WiMAX Revolution

Created: August 28, 2006
Revised: November 3, 2006

URL: http://webreference.com/search/index.html