You may notice that a while back, I did a post on adding Gizbuzz to your Firefox/IE7 search box. You might have wondered how I actually got that to work.
Well, I'm actually going to write a quick tutorial on how you make OpenSearch plugins (which is what that Gizbuzz one was). Normally, my tutorials are the realm of Gizbuzz's sister site FOSSwire, but since this one has quite a lot of relevance to the web in general (not just free/open source software), I thought I'd put it on Gizbuzz.
OpenSearch is a standard being pushed by Amazon's research arm, A9.com. To create a search plugin, you simply need to write a really short XML file containing instructions to the web browser on how to perform the search. The search plugins currently are supported in both Firefox 2.0.x and Internet Explorer 7. Unfortunately, Microsoft's implementation is sadly incomplete, so to retain full cross-browser support you can't use all features of OpenSearch.
Start off by opening up a text editor. Not a word processor, just use something like Notepad (or a dedicated code editor if you have one). Paste in the following as a template:
-
<opensearchdescription xmlns="http://a9.com/-/spec/opensearch/1.1/" xmlns:moz="http://www.mozilla.org/2006/browser/search/">
-
<shortname>My test search</shortname>
-
<description>Searches a test website</description></opensearchdescription>
-
-
<inputencoding>utf-8</inputencoding> <url type="text/html" method="get" template="http://example.com/search?q={searchTerms}"></url>
Let's have a look at each line in detail:
-
<opensearchdescription xmlns="http://a9.com/-/spec/opensearch/1.1/" xmlns:moz="http://www.mozilla.org/2006/browser/search/">
This line starts off our document. Like the root <html> tag in a web page, it describes what type of document this is.
-
<shortname>My test search</shortname>
This line identifies the 'short name' of your search plugin. This is the name that will appear on the list of search providers and is the normal text used to identify this search plugin. Keep it nice and short and sweet ('Google', 'eBay' and 'Gizbuzz' are all nice, short names for this).
-
<description>Searches a test website</description>
This should be a slightly longer description of what exactly you are searching (for example 'Gizbuzz Blog Archive').
-
<inputencoding>utf-8</inputencoding>
Unless you have a specific reason to change this, leave it as it is.
-
<url type="text/html" method="get" template="http://example.com/search?q={searchTerms}"></url>
This is the line that actually makes it all happen, and it's the hardest line to set up (but still really easy). You need to fill the template element with a URL that will perform your search.
The easiest way to snag such a URL is to do this. Head over to the desired site and perform a search for something recognisable (like OPENSEARCHTEST). Now, copy the URL from your browser's location bar and paste it in.
Simply replace OPENSEARCHTEST in the pasted URL with {searchTerms}, and let OpenSearch do the rest.
If you can't see that in the URL of the search results page, you may have come across a site that uses a slightly different method of doing a search. I'm not going to go into how to work with these kind of searches in this tutorial, but I might follow up on this a bit later.
Finally, we close everything off. Save that file with a .xml extension and upload it onto a web server somewhere.
The one last step you probably want to do is to actually provide the ability to add your search plugin to a browser. There are two main ways to do this:
Add it to the browser with metadata
The first way is to add it to a web page's metadata. In the <head> section of your page:
-
<link href="http://example.com/yoursearchplugin.xml" rel="search" type="application/opensearchdescription+xml" title="My search plugin" />
Simply fill in the URL and a description of your plugin and then if you go to your site, you should notice the arrow on the search box will glow a different colour. Click this, and you should be able to add your new plugin!One potential pitfall - the URL for your plugin must be absolute (it must contain the http:// and the full domain name as well as the path to the XML file).
Add a button
If you want your plugin to be more noticeable, you might want to make a button on your website, which, when clicked, adds the plugin. In your page, include the following JavaScript:
-
function addSearchProvider() {
-
-
try {
-
window.external.AddSearchProvider('http://example.com/yoursearchplugin.xml');
-
}
-
catch (e) {
-
alert("Currently, the search provider function requires either Firefox 2 or Internet Explorer 7.");
-
return;
-
}
-
-
}
Now make a button which calls this JavaScript when clicked:
-
<input value=" Add to search box! " onclick="addSearchProvider();" type="button" />
Once again, fill in your URL in the JavaScript. The same absolute URL pitfall applies here too.
Finishing up
Once you've built your OpenSearch plugin and you're broadcasting it on a web page using either (or both) of the above methods, anyone using Internet Explorer 7 or Firefox 2 can add that search plugin. Once they have, they can just click the arrow on the search box, choose the new plugin and get searching straight away!
I think I've pretty much covered everything - apart from searches that use POST, and of course a couple of advanced topics (like how to add pretty icons to your search plugins). If people liked this, I'll make sure to revisit these topics in a future tutorial!
[...] Web RIAA Screws Internet RadioMaking your own OpenSearch pluginsMaking your own OpenSearch plugins [...]
[...] Gizbuzz ยป Making your own OpenSearch plugins (tags: search community plugin) [...]
what about including a google custom search engine?
It is easy create Opensearch plugins with OpenSearch editor.
http://sourceforge.net/projects/opensed
That XML can’t be right: you’ve got three root elements. The OpenSearchDescription should surround all the rest. And the casing contradicts the spec.:
http://www.opensearch.org/Specifications/OpenSearch/1.1#Examples
What does you mean about 3 roots? Opensearch Editor generate well-formed XML-file.
And do you really know, that it does not work in IE 7? It good works in Firefox 2.0.
In fact, Firefox remakes SRC plugins in Opensearch with “OpenSearch”. For example, source of plugins (generated by Firefox):
I’ll correct the root element in the next release OpenSearch Editor. Thank you.
The source code of plugins hides