GizBuzz » Tutorials http://gizbuzz.co.uk Technology, Computers, Web 2.0, Google, Microsoft, and just about anything else Thu, 29 May 2008 10:02:49 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Making your own OpenSearch plugins http://gizbuzz.co.uk/2007/making-your-own-opensearch-plugins/ http://gizbuzz.co.uk/2007/making-your-own-opensearch-plugins/#comments Mon, 19 Mar 2007 16:48:15 +0000 Peter http://gizbuzz.co.uk/2007/making-your-own-opensearch-plugins/ 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:
[xml]

My test search
Searches a test website

utf-8 [/xml]Let’s have a look at each line in detail:

[xml]

[/xml]

This line starts off our document. Like the root <html> tag in a web page, it describes what type of document this is.

[xml num=2]
My test search
[/xml]

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).

[xml num=3]
Searches a test website
[/xml]

This should be a slightly longer description of what exactly you are searching (for example ‘Gizbuzz Blog Archive’).

[xml num=4]

utf-8 [/xml]Unless you have a specific reason to change this, leave it as it is.[xml num=5]

[/xml]

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.

[xml num=6]

[/xml]

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:

[html]

[/html]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:

[js]
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;
}

}
[/js]

Now make a button which calls this JavaScript when clicked:

[html]

[/html]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!

]]> http://gizbuzz.co.uk/2007/making-your-own-opensearch-plugins/feed/ 7