{"id":76,"date":"2008-08-15T00:43:33","date_gmt":"2008-08-14T16:43:33","guid":{"rendered":"http:\/\/blog.lolyco.com\/sean\/?p=76"},"modified":"2008-08-15T00:48:23","modified_gmt":"2008-08-14T16:48:23","slug":"writing-a-search-engine-widget-for-firefox-ie7","status":"publish","type":"post","link":"https:\/\/blog.lolyco.com\/sean\/2008\/08\/15\/writing-a-search-engine-widget-for-firefox-ie7\/","title":{"rendered":"Writing a search engine widget for firefox \/ IE7"},"content":{"rendered":"

I had been wondering how difficult it would be to make a search engine widget for spider.my<\/a> – there’s so much important stuff yet to be done, but I got distracted by the gloss! The great news is – very easy! You can visit spider.my now and add its search engine to your toolbar in Firefox or IE7. If you’re looking at the spider.my homepage, it’s as easy as it looks in this image:<\/p>\n

\"Adding<\/a>

Adding the Search Engine from Spider.my in Firefox<\/p><\/div>\n

I used the OpenSearch plugin format<\/a> to create spider.my’s first search engine plugin. There are others, but Mozilla tells me:<\/p>\n

Plugins that use the OpenSearch description syntax<\/a> are compatible with IE 7 and Firefox. Because of this, they are the recommended format for use on the web.<\/p><\/blockquote>\n

And it is just as easy to add the Search Engine widget from your site for visitors using IE7:<\/p>\n

\"Adding<\/a>

Adding the spider.my Search Engine in IE7<\/p><\/div>\n

There are two essential ingredients to advertising a search engine widget on your site: an XML document that describes the Search Engine, and a LINK element in the HTML of the pages you’d like the Search Engine to be provided from.<\/p>\n

First ingredient – the XML OpenSearch description file<\/h3>\n

The file is very simple. If, like me, you’re only interested in providing a basic search widget without ‘search suggestions’, you need only create a file like:<\/p>\n

<OpenSearchDescription\r\n  xmlns=\"http:\/\/a9.com\/-\/spec\/opensearch\/1.1\/\"\r\n  xmlns:moz=\"http:\/\/www.mozilla.org\/2006\/browser\/search\/\">\r\n<ShortName>engineName<\/strong><\/ShortName>\r\n<Description>engineDescription<\/strong><\/Description>\r\n<InputEncoding>inputEncoding<\/strong><\/InputEncoding>\r\n<Image width=\"16\" height=\"16\">imageURI<\/strong><\/Image>\r\n<Url type=\"text\/html\" method=\"method<\/strong>\" template=\"searchURL<\/strong>\">\r\n<moz:SearchForm>searchFormURL<\/strong><\/moz:SearchForm>\r\n<\/OpenSearchDescription><\/pre>\n
engineName<\/strong> is My Spider<\/em> for spider.my<\/p>\n
engineDescription<\/strong> is My Spider (spider.my)<\/em> – although I have yet to see this appear anywhere!<\/p>\n
inputEncoding<\/strong> is for you to decide. A popular encoding used on the backend of spider.my is UTF-8<\/em>, so that’s what I use for the Search Engine widget.<\/p>\n
imageURI<\/strong> is interesting – I just used a plain old URL to locate the favicon<\/a> for spider.my, but you can use a data: URI too. The mozilla page includes a link to the data: URI kitchen<\/a><\/p>\n
method<\/strong> for spider.my is GET<\/em> and searchURL<\/strong> is the URL your browser sends when you enter some text in the spider.my search page and click ‘Ask My Spider’. To mark the spot where a user’s search input goes, use ‘{searchTerms}’. The searchURL<\/strong> for spider.my is http:\/\/spider.my\/Search?q={searchTerms}<\/em><\/p>\n
If it’s really not obvious what to replace with what, compare this template with the actual XML file for spider.my <\/a><\/p>\n
Second ingredient – telling the user’s browser the widget exists<\/h3>\n
To notify your users’ browsers, simply add a LINK element to the pages you’d like them to pick up the Search engine from. As I’m only testing out ideas on spider.my, I put the LINK element on the homepage only. I might at a later date add the LINK to all the pages at spider.my (or specifically the Search pages – who knows?).<\/p>\n
Here’s the LINK element from spider.my’s homepage:<\/p>\n
<link<\/span>\r\n  rel<\/span>=\"search\" <\/span>type<\/span>=\"application\/opensearchdescription+xml\"\r\n<\/span>  title<\/span>=\"My Spider\" <\/span>href<\/span>=\"\/static\/tools\/SE.xml\"<\/span>><\/pre>\n
You need only change the title and href attributes for your own installation. The href tells your visitors browser where you put that XML file you created. That’s it! Next time you load the page from your site, you’ll be able to add your site’s Search Engine to Firefox and IE7 with a simple click!<\/p>\n
There are more options that can be added to the search engine, but it seems they’re better supported, or even unique to Firefox. Since I’m aiming spider.my squarely at Web 0.2, I won’t be doing any of that new-fangled stuff.<\/p>\n","protected":false},"excerpt":{"rendered":"
I had been wondering how difficult it would be to make a search engine widget for spider.my – there’s so much important stuff yet to be done, but I got distracted by the gloss! The great news is – very easy! You can visit spider.my now and add its search engine to your toolbar in […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20,11,36,35],"tags":[37,38,112,111],"class_list":["post-76","post","type-post","status-publish","format-standard","hentry","category-fixed","category-google","category-search","category-spidermy","tag-firefox","tag-ie7","tag-search","tag-spidermy"],"_links":{"self":[{"href":"https:\/\/blog.lolyco.com\/sean\/wp-json\/wp\/v2\/posts\/76","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.lolyco.com\/sean\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.lolyco.com\/sean\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.lolyco.com\/sean\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.lolyco.com\/sean\/wp-json\/wp\/v2\/comments?post=76"}],"version-history":[{"count":11,"href":"https:\/\/blog.lolyco.com\/sean\/wp-json\/wp\/v2\/posts\/76\/revisions"}],"predecessor-version":[{"id":101,"href":"https:\/\/blog.lolyco.com\/sean\/wp-json\/wp\/v2\/posts\/76\/revisions\/101"}],"wp:attachment":[{"href":"https:\/\/blog.lolyco.com\/sean\/wp-json\/wp\/v2\/media?parent=76"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.lolyco.com\/sean\/wp-json\/wp\/v2\/categories?post=76"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.lolyco.com\/sean\/wp-json\/wp\/v2\/tags?post=76"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}