Tuesday, January 10, 2006

How To: Add your Library Catalog to the Firefox Search bar

(For some reason I can't post this to the LCLS Weboratory, so I'm putting it up here)

What you need:
-A text editor: ex, notepad, textpad, something to edit plain text with.
-A 16x16 .GIF or .PNG file to serve as the Icon that shows up in the search bar
-A website to search
-A website to store the .src file and the .html file on.

First lets start by creating the .src file that will tell Firefox how & where to search.

The first part is the Search section. This is where you set up the address and parameters for the search:

<search
version="7.1"
name="LCLS | Catalog | Title Search"
description="Find items in the LCLS Catalog by title"
method="get"
action="http://webcat.lcls.org/search/t"
searchForm="http://webcat.lcls.org/search/t"
queryEncoding='UTF-8'
queryCharset='UTF-8'
>

/* update */
Version – this is not arbitrary. It needs to be set to 7.1 or higher for Netscape Compatibility.

Name – this is what is displayed in the Firefox search box.

Description – honestly, not sure what this is supposed to do; I haven’t seen it work if it does anything.

Method – the method is how the data is submitted. Get uses a querystring (something like: http://mysite.org/search.asp?search=help. Post, posts the values in the HTTP headers.

How do you figure it out? Easy! Go to the page that has the search form you want to search. View the source. Find the form and look for something that looks like this:
<form name=”someform” method=”get”> or <form name=”someform” method=”post”>

The method= line of the form will tell you what method is used. While you’re there, also note the name of the textbox as well.

Action – the “action” of the form, this is the page the values are either posted to or sent to with the get method. The action may be specified in the form tag. Look for it when peeking at the source.

SearchForm – this is the address of the form. It may also be the same as the action.
Encoding and Charset I default to UTF-8. Most everyone would use this.

<input name="SEARCH" user >
<input name="sourceid" value="firefox">

The first input should use the same name as the text box on the original form. The sourceid is just tacking on an extra argument that could be used for statistics by the web server.

Finally we close our search tag and include update information so Firefox knows where to look for changes. This also sets the URL of the icon.

</search>

<browser
update="http://labs.lcls.org/firefox/lclscatalog.src"
updateicon="http://labs.lcls.org/firefox/lclscatalog.png"
updatecheckdays="3"
>

When you are all done, save this as whateveryouwanttocallit.src.

Next we set up the html page. For this, I used the exact same java code that I found on several pages where you could add search options to the Firefox search bar. There is nothing special or of my own creation at all here. I just modified the values.

Place this in a <script > tag inside the head element of your html page.

<script type=”text/javascript”>
function addEngine(name,ext,cat,type)
{
if ((typeof window.sidebar == "object") && (typeof window.sidebar.addSearchEngine == "function")) {
window.sidebar.addSearchEngine(
"http://labs.lcls.org/firefox/"+name+".src",
"http://labs.lcls.org/firefox/"+name+"."+ext, name, cat );
} else {
alert('error adding engine');
}
}
</script>

I modified the addEngine function to include the url of where I was hosting the files. +name+ just fills in the name of the module. +ext fills in the type of graphic (ex .gif, .png).

Finally, add this inside the href= of the link you want people to click to add the search to their Search bar:
<a href=”javascript:addEngine('lclscatalog','png','General','0')”>click me!</a>

The parameters in addEngine are:
-Name of .src file
-File extension for the icon
-Category (I just left it at general)
-Type (I left this at 0)

When you’re all done, put the .src file, the .html file, and the .gif or .png in the same folder on your website. Direct users to the .html file, they click on the link, say ok to add the engine and you’re all done!

3 Comments:

At 1/11/2006 3:44 PM, Anonymous Eby said...

Actually the version that is included in search is not your own version. It is used by Netscape and possible other browsers to test for campatibility. Anything about 0.0 will work in firefox but to have it work in Netscape you need 7.1 or so. Documentation is here:

http://mycroft.mozdev.org/deepdocs/searchtag.html

 
At 1/11/2006 7:10 PM, Blogger Chris Deweese said...

Cool, thanks. I'll update it.

The original example I found had the version set to 1.0.

 
At 2/10/2009 1:44 AM, Anonymous Anonymous said...

It is much in more details described on sionet.ru

 

Post a Comment

Links to this post:

Create a Link

<< Home