HOWTO: Create a Firefox Search Component for Your Blog

The Firefox browser has a search bar that can be used to search common search and product sites such as Google and Amazon. One of the many nice things about Firefox is that you can create your own search plugin. You can create a search plugin that your blog readers using Firefox can install to easily search your blog from the Firefox search bar.

To create a search plugin, we need three things: the search code source file; a search bar icon; some JavaScript to create an install link.

Step One
First, we need to create a source file. This file tells Firefox how to interact with the search on your Blogzerk blog. Here?s what the code looks like to search the Blogzerk blog:

Code:

To create this file for your blog, copy the code above and save it to a text file named blogsearch.src. Replace the name and description attributes for your blog. Replace all instances of blog.blozkerk.com with the hostname of your blog.

Step 2
Next, we need to create an icon that will be displayed in the search bar. This icon should be a 16x16 pixel PNG file. Name your PNG file blogsearch.png Here?s the image we?ll use for our blog search. Feel free to use this image for your blog if you?d like.

Upload the source file and icon file to the root of your blog using the File Manager in the Publisher?s Control Panel.

Step 3
Finally, we need to create a link our blog visitors can use to add our search to Firefox. To do this, we need a bit of JavaScript:

Code:

function addEngine(name,ext,cat){
if ((typeof window.sidebar == "object")
&& (typeof window.sidebar.addSearchEngine == "function"))
{
window.sidebar.addSearchEngine("http://blog.blogzerk.com/" + name + ".src",
"http://blog.blogzerk.com/" + name + "." + ext, name, cat );
} else {
//you could put an error handler here;
}
}

Replace all instances of the blog.blozkerk.com with the hostname of your blog. Save the modified code as blogsearch.js and upload it to the root of your blog.

Use the Settings & Security/General section of the Publisher's Control Panel to add the following to the Additional <HEAD> Content textbox:

Code:

Now you are ready to create the link to install the extension. To do this, use the following code for a hyperlink:

Code:

<a href="javascript:addEngine('blogsearch', 'png', 'Blogzerk Blog Search')">Install Firefox Search Extension</a>

Replace Blogzerk Blog Search with a descriptive label for your blog--this will show up on the search dropdown. You can use this link code in an article or a web page on your blog.

Removing the plugin can't currently be automated. Point your users to this article in the MozillaZine forums for details on removing your search plugin.

More Info.
If you need to update your search source or icon, just make sure you keep the file names the same and upload them to the root of your blog. The search source we used will tell Firefox to check every five days for updates to these files and automatically update them if needed.

If you want to prevent the search from opening in a new window/tab, remove the following line from the source file:

Code:

target="_blank"