Re.Mark

My Life As A Blog

Quick Architecture – Extending Reach with a Search Provider

with 2 comments

Many sites have search functionality at their heart. Traditionally, such sites have had a search box on every page of the site to make it easy for their users to find the content or products they need. Of course, this technique requires users to navigate to their site in order to search. One of the ways to increase the reach of a site is to make it easier to search. This article takes a look at using a search provider to make searching easier for users.

What is a Search Provider?

A search provider allows users to search your site directly from a search box that is part of the browser chrome. Internet Explorer 7 and above and Firefox 2 and above support search providers.

Beneath the hood of a Search Provider
Search Providers are built using OpenSearch. OpenSearch defines a format in which the web interface to a search engine can be described in XML. A sample of an OpenSearch description can be seen below:

<?xml version="1.0" encoding="UTF-8" ?>
  <OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"&gt;
  <ShortName>Foo</ShortName>
  <Description>Foo provider</Description>
  <InputEncoding>UTF-8</InputEncoding>
  <Url type="text/html" template="http://www.foo.com/results?search={searchTerms}" />
</OpenSearchDescription>

Let’s quickly run through the elements:

ShortName is how you want your search provider to be identified to your users. It can be up to 16 characters long.
Description is a description of your search provider. It can be up to 1024 characters long.
InputEncoding specifies the character encoding of search requests.
Url is a template to be used for searches. We’ll look at this in more detail later.

There are a number of other elements that can be included. The documentation has more information.

The Url Element
In the sample OpenSearch description, there was an element named Url. This element is at the heart of the description since it describes the way to call a search engine. In the case of the sample, the search terms are substituted for the placeholder {searchTerms}. So, if a user searched for OpenSearch the resulting url would be: http://www.foo.com/results?search=OpenSearch. Understandably, searchTerms is a required parameter. There are some optional parameters that can also be supplied. These include language to specify the user’s language. If we update our template url to add language support it would look like this:

http://www.foo.com/results?search={searchTerms}&amp;langauge={language?}

The trailing question mark after language indicates that it is an optional parameter.

You will have noticed that there is another attribute of the Url element: type. The type attribute in the sample is text/html which means that the results will be in html format. We could specify other formats. In fact, we could include two url elements each with their own type. In case you’re wondering what happens if a user types a search in the Internet Explorer search box where more than one url element is specified, note that the first element is the one used. This ability is useful when your site is able to provide search results in more than one format. For instance, we might have enhanced our site to provide results in rss format, which means that users can subscribe to a search – a powerful way of keeping users in touch with our site and its content. Consequently, we want to add two url elements to provide for results in both html and rss format. Below you can see the previous example updated to add support for results in rss format:

<?xml version="1.0" encoding="UTF-8" ?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"&gt;
  <ShortName>Foo</ShortName>
  <Description>Foo provider</Description>
  <InputEncoding>UTF-8</InputEncoding>
  <Url type="text/html" template="http://www.foo.com/results?search={searchTerms}&amp;language={language?}" />
  <Url type="application/rss+xml" template="http://www.foo.com/results?search={searchTerms}&amp;language={language?}&amp;format=rss" />
</OpenSearchDescription>

Using the Search Provider
Having created an OpenSearch description, the next step is to provide a way for users to add your site to the list of searchable sites in their browser’s search box. To add to Internet Explorer, you need to call a bit of Javascript. The call looks like this:

window.external.AddSearchProvider(url)

The url parameter should be the url at which your OpenSearch document can be found. You’ll need this Javascript on each page from which you’d like the user to be able to add the search provider. Hooking this up to a button or hyperlink will allow the user to add your search provider.

To add to Firefox, you need to add a line like the one below to the head section of each page from which you’d like the user to be able to add your search provider.

<link rel="search" type="application/opensearchdescription+xml" title="searchTitle" href="pluginURL">

Title should be the same as the ShortName in your OpenSearch description and href should be the url at which your OpenSearch document can be found.

With some Javascript added to your site to detect the User Agent, you could write the appropriate search provider code according to your user’s browser.

Putting it all together: A Real World Example
Rightmove.co.uk is the leading UK real estate site. In order to make searching for property to rent or to buy on their site even more convenient, they added two search providers – one for property for sale and one for property to rent. The page from which you can add these providers can be found here:

http://www.rightmove.co.uk/template/publicsite%2Caboutus%2CWidget.vm

The page looks like this:

image

As you can see, there are two links, one for each of the search providers. Looking at the source for these links, you can see the call to window.external.AddSearchProvider:

<a href="#" onclick="window.external.AddSearchProvider(‘http://www.rightmove.co.uk/xml/widget/buy-search.xml/svr/3003;jsessionid=370A96EC0C5B29ED104A741D99C19763&#8217;)">Click here to install the For Sale search bar</a>

<a href="#" onclick="window.external.AddSearchProvider(‘http://www.rightmove.co.uk/xml/widget/rent-search.xml/svr/3003;jsessionid=370A96EC0C5B29ED104A741D99C19763&#8217;)">Click here to install the For Rent search</a>

At the top of the page, the following lines are there for Firefox:

<link rel="search" type="application/opensearchdescription+xml" title="Rightmove (Buy property)" href="/xml/widget/buy-search.xml" />

<link rel="search" type="application/opensearchdescription+xml" title="Rightmove (Rent property)" href="/xml/widget/rent-search.xml" />

Clicking the link in Internet Explorer adds the search provider so that you can search directly from your toolbar:

image

All that remains is to have a look at the OpenSearch documents for RightMove. Here they are:

<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/&quot; xmlns:moz="http://www.mozilla.org/2006/browser/search/"&gt;
  <ShortName>Rightmove (Buy property)</ShortName>
  <Description>Rightmove.co.uk</Description>
  <InputEncoding>UTF-8</InputEncoding>
  <Image width="16" height="16">http://www.rightmove.co.uk/i/rm/favicon.ico</Image&gt;
  <Url type="text/html" method="GET" template="http://www.rightmove.co.uk/edit_search.rsp?s_lo={searchTerms}&amp;b=buy&amp;psa=new&amp;search=Start+Search&amp;via=widget"></Url>
</OpenSearchDescription>

<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/&quot; xmlns:moz="http://www.mozilla.org/2006/browser/search/"&gt;
  <ShortName>Rightmove (Rent property)</ShortName>
  <Description>Rightmove.co.uk</Description>
  <InputEncoding>UTF-8</InputEncoding>
  <Image width="16" height="16">http://www.rightmove.co.uk/i/rm/favicon.ico</Image&gt;
  <Url type="text/html" method="GET" template="http://www.rightmove.co.uk/edit_search.rsp?s_lo={searchTerms}&amp;b=rent&amp;search=Start+Search&amp;via=widget"></Url>
</OpenSearchDescription>

As you can see, extending the reach of your site by allowing your users to search directly from the browser toolbar is easily accomplished.

Advertisements

Written by remark

June 30, 2008 at 12:37 pm

2 Responses

Subscribe to comments with RSS.

  1. For me, rightmove’s javascript fails to install the search provider.

    Thanks for trying to popularise this cool feature. But IE and Mozilla-based browsers work I think in the same way, not the different way you say here – you shouldn’t need to handle them separately, although you will obviously want to handle (or avoid handling) other browsers

    You can use the javascript window.external.AddSearchProvider in Firefox2.0+

    Or you can use the link style in Internet Explorer 7+

    See http://www.oxan.com and then look at the list of search engines – ours will show up with a * and can be installed, in both IE7 and Mozilla-based engines.

    Moray McConnachie

    September 17, 2008 at 4:11 pm

  2. It’s really a great useful to everyone. You provided a awesome information.

    property sale

    February 25, 2010 at 11:12 am


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: