How to create firefox site search plugin and host it -a step by step guide
Few weeks back I did not know how to create a firefox search plugin for a site. I researched at Google and found many blog posts related to the same. However, I found that most of them were not covering all the steps and after some brain whacking found out the exact course of action. Here I am giving exact step by step instructions to create a firefox website search plugin. For an example, we will create the Plugin for our site – Tech Tools.
Step 1: Get search URL ready
Lets search for ‘ebooks’ from the search box above and we get the URL http://www.bestonlinetools.org/?s=ebooks&x=0&y=0 -A
Now replace ‘ebooks’ with {searchTerms} and the URL looks like this
http://www.bestonlinetools.org/?s={searchTerms}&x=0&y=0 - B
Step 2: Keep your favicon ready
You just need a 16×16 pixel image which will appear in firefox search bar. If you don’t have the image, just use any image for test and reduce its size to 16×16 pixels in photoshop or any other image editor.
Step3: Visit Mycroft
Reach this page on Mycroft site
Step 4: Enter details in the Mycroft form
You will see the details . Enter the same as per your requirements. Use the URL – B that we have created above (as per your site url). Also provide the link to upload the favicon in the form.
To clarify if image is not very clear , you need to enter the URL -B that we created in the boxes ‘Search URL’ and ‘Search Form URL’ boxes. Rest of the things are simple.
Step 5: Install Plugin
Click on ‘Generate Code’ and you will find the code of the search plugin. Click on ‘Install Plugin’ and you will get this message
“Add “Tech Tools” to the list of engines available in the search bar? “
Click on ‘Add’ and you can immediately start searching your site from the firefox search bar.
However, we are not yet finished. We need to install this plugin on our site .
Step6: Copy the code and alter it
The code will look something like this
<?xml version=”1.0″ encoding=”UTF-8″?>
<OpenSearchDescription xmlns=”http://a9.com/-/spec/opensearch/1.1/” xmlns:moz=”http://www.mozilla.org/2006/browser/search/”> <!– Created on Sat, 21 Feb 2009 05:59:43 GMT –> <ShortName>Tech Tools</ShortName> <Description>Tech Tools Search</Description> <Url type=”text/html” method=”get” template=”http://www.bestonlinetools.org/?s={searchTerms}&x=0&y=0 “/> <Image width=”16″ height=”16″>http://mycroft.mozdev.org/updateos.php/id0/.</Image> <Developer>Tech Tools</Developer> <InputEncoding>UTF-8</InputEncoding> <moz:SearchForm>http://www.bestonlinetools.org/?s={searchTerms}&x=0&y=0 </moz:SearchForm> <moz:UpdateUrl>http://mycroft.mozdev.org/updateos.php/id0/.xml</moz:UpdateUrl> <moz:IconUpdateUrl>http://mycroft.mozdev.org/updateos.php/id0/.</moz:IconUpdateUrl> <moz:UpdateInterval>7</moz:UpdateInterval></OpenSearchDescription>
Favicon : The favicon you created needs to be uploaded to your site. Lets say the icon image url on your site is www.yoursite.com/images/favicon.jpg . Replace http://mycroft.mozdev.org/updateos.php/id0/. in the code
<Image width=”16″ height=”16″>http://mycroft.mozdev.org/updateos.php/id0/.</Image>
with your favicon image URL. Now your code is ready to be uploaded to your site.
Step 7: Upload XML file
Create a file /page on your site – say yoursite.com/search.xml
Copy the final code that we created above and put it on this page and save it as xml file.
Step 8. Adding javascript to your page
You now need to add a javascript on the page that you need to provide the link to your users to add the search plugin .
Add this script to your page :
<script type=”text/javascript”>
function ffPlugin()
{
window.external.AddSearchProvider(”http://yoursite.com/search.xml”);
}
</script>
Step 9. Provide the link to add your search plugin
You may provide the option to add this plugin to your users through text or an image link. Lets see how a text link would look like
<a href=”javascript:ffPlugin()”><font color=”#008800″> Search our site from Firefox</font></a>
This code has to be added in the html of the page and at the place you want to provide the link to your users to add the firefox search plugin.
Step 10. You are done !
Just check the link on your page and see if your search plugin is working well.
It should work and if you find any problem , just let me know and I will help you out.
Did you enjoy this post? Why not leave a comment below and continue the conversation, or subscribe to my feed and get articles like this delivered automatically to your feed reader.
Hi Dear,
Thanks I have done all the above, now what i m looking for is that i wanna upload it at mozilla’s site. There are many other sites who have kept there. So how can i do the same one like them?