I was researching the Twitter search API the other day when I came across quite a nice web standard that I wasn’t aware of before.
I had been searching for “twitter search xml” to try and access the search feeds that twitter provides (post on how to make a spam bot coming soon!) when I saw a link to http://search.twitter.com/opensearch.xml, which it turned out wasn’t what I was after.
After a little digging it turns out that providing an opensearch.xml file on your site is a way of telling modern browsers that there is a search functionality. The user can then add it to their browsers quick search bar, along with Google, Bing, Amazon, Wikipedia etc. so that they can search your site at a later date.
“So how do I put this on my site?” I hear you cry… There are two steps you will need to follow to get this to work.
1. Define your XML file
This is Twitter’s XML file:
<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
<ShortName>Twitter Search</ShortName>
<Description>Realtime Twitter Search</Description>
<Url type="text/html" method="get" template="http://search.twitter.com/search?q={searchTerms}"/>
<Image width="16" height="16">http://search.twitter.com/favicon.png</Image>
<InputEncoding>UTF-8</InputEncoding>
<SearchForm>http://search.twitter.com/</SearchForm>
</OpenSearchDescription>
Obviously you will need to replace these details with your own. One key point is that you must be using GET data to pass your search term from your search form to your results page. This means that your search term will be in the address bar after you have submitted it. This needs to then be replaced with {searchTerms} as in the example above.
2. Add a meta-tag to the <head> of your document
Add the following meta tag to the head of your page, again replacing the details with your own.
<link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="Twitter Search">
And that’s it! So now when someone goes onto your site their current search icon should go blue and when clicked it will give the user a link to add the custom search.
Best Uses
As you can imagine this might not be something that many users are going to install, especially on a simple website like a blog or portfolio, but it would be a great addition to an e-commerce store and might be the difference between a user coming back and purchasing a product from you rather than someone else.
#postaweek2011 2/52
Pingback: OpenSearch.xml | MartinDownton.eu