Topic: OpenSearch PostNuke plug-in for IE7 and Firefox
backharlow

Freshman
Freshman
Posts: 31

Posted:
7.Mar 2007 - 03:05

This tutorial will walk you through adding a simple plug-in to PostNuke that will allow your users to register your site search engine into the search bar of their web browser, as another Search Provider, alongside Google, Yahoo, Wikipedia, etc. The plug-in will also be ?auto-discovered? by the browser and offered for addition in a user friendly way. This is very easy for visitors to use, and will help returning users get back to your site in a useful manner by running searches on your site built right into the browser.

You also do not need to know much about PostNuke to follow these instructions, however consider this tutorial only one method. You will need an install of Firefox 2.x to create one of the files. (should not matter what OS)

You will start with an easy to manage .src file, use firefox to convert it to xml, then move the variables over to the IE formated .xml, and then upload it to your site. Then, you'll edit your site HTML head, to include the auto-discovery code. Alternatively, you can add an HTML button to your site to install the plug-in.

This plug-in is an implimentation of a fairly recent standard called OpenSearch. I initially tried out a couple ?auto-generators? of these plug-ins, but found that they required the search terms to be included in the URL of the search results page. The core PostNuke search module does not seem to do this, that I am aware of, so we have to edit an example version...

So far, integration is only supported by Firefox 2.x, Internet Explorer 7.x and Opera 9.x (all newest versions). Mozilla (firefox) and Microsoft (IE) both offer their own formatting of this plug-in. Although the two are (of course) different, I was able to find a version that works for both.

The IE example is formatted as an XML version 1.0 file, similar to RSS.

Code

<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
<ShortName>MSDN</ShortName>
<Description>MSDN Search</Description>
<Url type="text/html"
   template="http://search.msdn.microsoft.com/search/results.aspx?view=msdn&amp;qu={searchTerms}"
/>  
</OpenSearchDescription>

While the Firefox example looks more pure to the OpenSearch standard.

Code

<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"
                       xmlns:moz="http://www.mozilla.org/2006/browser/search/">
<youtube>youtube</youtube>
<Description>engineDescription</Description>
<InputEncoding>inputEncoding</InputEncoding>
<Image width="16" height="16">data:image/x-icon;base64,imageData</Image>
<Url type="text/html" method="method" template="searchURL">
  <Param name="paramName1" value="paramValue1"/>
  ...
  <Param name="paramNameN" value="paramValueN"/>
</Url>
<Url type="application/x-suggestions+json" template="suggestionURL"/>
<moz:SearchForm>searchFormURL</moz:SearchForm>
</OpenSearchDescription>

I tested using both formats with both browsers and found that the Mozilla version only works with Mozilla, while the Microsoft version does function correctly in both browsers. (read the ?why? of that however you like)
There are undoubtedly other ways of doing this, but for current compatibility, I'm going to stay with the IE formatting of the final .xml file here.


Step 1:

Start with a blank file in your text editor. Paste this code:

Code

<SEARCH
    version = "7.6.2
    name="
Your Site Name"
    description="
Search Plugin for Your Site"
    method="
GET"
    action="
http://www.yoursite.com/index.php"
    searchForm="http://www.yoursite.com/index.php?name=Search"
    queryCharset="iso-8859-1"
>

<input name="q" user>
<input name="submit" value="Search">
<input name="op" value="modload">
<input name="name" value="Search">
<input name="file" value="index">
<input name="action" value="search">
<input name="overview" value="1">
<input name="defaultstate" value="1">

<INTERPRET
  browserResultType="result"
  resultListStart="<!-- RESULT LIST START -->"
  resultListEnd="<!-- RESULT LIST END -->"
  resultItemStart="<!-- RESULT ITEM START -->"
  resultItemEnd="<!-- RESULT ITEM END -->"
>

</SEARCH>


<BROWSER
      update="http://www.yoursite.com/searchplugin.xml"
      updateIcon="http://www.yoursite.com/favicon.gif"
      updateCheckDays="10"
>

Next, you will need to collect some information from your PostNuke. Start by changing all instances of ?yoursite? in the above code with whatever your site actually is called. The above examples also assume that your PostNuke installation is at the root of the domain. If it is not, edit the URLs to reflect where your PostNuke is located.
The ?action? line points to your site homeage index.php.
?SearchForm? points to the user main (main page) of your Search module.
Skipping down to the bottom of the code, under BROWSER, the ?update? field points to where your final search plug-in will be located and what it will be called. It must have the .xml extension, but you can rename ?searchplugin? to whatever you like. Decide this now. (wherever you normally store misc. files available for public download).
The ?updateIcon? field points to your site favicon image file (tiny icon for browser address bar) if you have one. (if not, remove this line)
?updateCheckDays? is the number of days before the plug-in will look in the ?update? location for a new version the plug-in, and in the ?updateIcon? location for a new version of your favicon.
Okay, here comes the tricky part:
If you use the core search block, go to a page of your site that displays this. Or if you don't, go to your search page. Click View, Page Source in your browser. Find the source code for that block (or page). You should see a list of lines that look like this

Code

<input type="hidden" name="nameofamodule" value="1" />

These are the real names for the modules that are active in your search module. Copy these lines, and reformat them from:

Code

<input type="hidden" name="nameofamodule" value="1" />

to...

Code

<input name="nameofmodule" value="1">

Now go back to our plug-in and paste them into the code below the line:

Code

<input name="defaultstate" value="1">

Or you can cheat and use some from my PostNuke, as long as you have these modules installed and active. All core .764 are in my full set:

Code

<input name="q" user>
<input name="submit" value="Search">
<input name="op" value="modload">
<input name="name" value="Search">
<input name="file" value="index">
<input name="action" value="search">
<input name="overview" value="1">
<input name="defaultstate" value="1">
<input name="togglebox" value="on">
<input name="active_comments" value="1">
<input name="active_users" value="1">
<input name="active_eventreg" value="1">
<input name="active_trssnews" value="1">
<input name="active_paypalcart" value="1">
<input name="active_pnzclassifieds" value="1">
<input name="pnzclassifieds_cat" value="38">
<input name="pnzclassifieds_cat" value="48">
<input name="pnzclassifieds_cat" value="1">
<input name="pnzclassifieds_state" value="0">
<input name="pnzclassifieds_country" value="0">
<input name="active_reviews" value="1">
<input name="active_v4bJournal" value="1">
<input name="pnForum_startnum" value="0">
<input name="active_pnForum" value="1">
<input name="pnForum_forum" value="">
<input name="pnForum_author" value="">
<input name="pnForum_order" value="1">
<input name="pnForum_limit" value="10">
<input name="active_downloads" value="1">
<input name="active_postcalendar" value="1">
<input name="pc_category" value="">
<input name="active_stories" value="1">
<input name="stories_topics" value="">
<input name="stories_cat" value="">
<input name="stories_author" value="">
<input name="active_ency" value="1">
<input name="active_photoshare" value="1">
<input name="pnUpper_startnum" value="0">
<input name="active_pnUpper" value="1">
<input name="pnUpper_sortby" value="date">
<input name="pnUpper_sortdir" value="desc">
<input name="active_sections" value="1">
<input name="active_petitions" value="1">
<input name="active_weblinks" value="1">
<input name="active_ezcomments" value="1">
<input name="active_faqs" value="1">

Now, save this file as whatever you chose in the ?update? field, except substituting the extension .xml with src. So if you said searchplugin.xml, name this file: searchplugin.src
Now download (or otherwise acquire) a copy of your favicon. rename it to the same name as your search plugin, accept leave the image extension.
You should now have two files that look like:
searchplugin.src
searchplugin.png
The image file could be .gif or .png. Other extensions may work but I don't know.

2.
Make sure that Firefox 2 is not running. You are going to drop these two files into the plug-in folder for your installation of Firefox 2 listed below.

For Windows XP, put in:
(make sure hidden files are visible)
C:/Documents and Settings/Yourusername/Application Data/Mozilla/Firefox/Profiles/w2y17i0j.default/searchplugins/
The ?w2y17i0j? will probably not be the same but similar.
Or You can maybe use
C:/Program Files/Mozilla Firefox/searchplugins/
but I haven't tried there.
For Mac OSX put in:
YourBootDrive/Users/Yourusername/Library/Application Support/Firefox/Profiles/ip5ofywm.default/searchplugins
The ?ip5ofywm? will probably not be the same but similar.
For Ubuntu Linux:
(make sure hidden files are visible)
Yourusername/.Mozilla/firefox/pcn5c2m.default/searchplugins/
Again ? pcn5c2m? will likely not be the same but similar.

Now run Firefox. You should see the Search Bar now lists your site name, and shows the icon. If it doesn't, give Firefox another restart. At this point the plug-in does work with Firefox, but if you want the IE compatibility keep going...

3
Go back to your .../searchplugins/ folder. The two files you added should be gone (copied into backup), and replaced with:
searchplugin.xml
Open this file. It should look similar to:

Code

<SearchPlugin xmlns="http://www.mozilla.org/2006/browser/search/" xmlns:os="http://a9.com/-/spec/opensearch/1.1/">
<os:ShortName>Your Site Name</os:ShortName>
<os:Description>Search Plugin for Your Site</os:Description>
<os:InputEncoding>ISO-8859-1</os:InputEncoding>
<os:Image width="16" height="16">data:image/x-icon;base64,R0lGODlhEAAQALMAAAAAAP///+7u7t3d3czMzLu7u6qqqpmZmYiIiHd3d2ZmZlVVVURERDMzMyIiIhERESwAAAAAEAAQAAAEezAEBACtQWHJUZOPEQgMZw6AEDRKYCSm2RzC8wSJGEvJYlCEhmrneiSCiQ9xBHDgALDlahEoAHQcVAXAEDgeQ4kmgCKzAg8ERwCglgOHUuMmQThaZcFZMRux8FsLKgoHTggHCoAxLQ5xGYprJQcWAQsLWgAcDgAtQhoAEQA7</os:Image>
<UpdateInterval>3</UpdateInterval>
<UpdateUrl>http://www.yoursite.com/searchplugin.xml</UpdateUrl>
<IconUpdateUrl>http://www.yoursite.com/favicon.gif</IconUpdateUrl>
<SearchForm>http://www.yoursite/index.php?name=Search</SearchForm>
<os:Url type="text/html" method="GET" template="http://www.yoursite.com/index.php?q={searchTerms}&amp;submit=Search&amp;op=modload&amp;name=Search&amp;file=index&amp;action=search&amp;overview=1&amp;defaultstate=1&amp;togglebox=on&amp;active_comments=1&amp;active_users=1&amp;active_eventreg=1&amp;active_trssnews=1&amp;active_paypalcart=1&amp;active_pnzclassifieds=1&amp;pnzclassifieds_cat=38&amp;pnzclassifieds_cat=48&amp;pnzclassifieds_cat=1&amp;pnzclassifieds_state=0&amp;pnzclassifieds_country=0&amp;active_reviews=1&amp;active_v4bJournal=1&amp;pnForum_startnum=0&amp;active_pnForum=1&amp;pnForum_order=1&amp;pnForum_limit=10&amp;active_downloads=1&amp;active_postcalendar=1&amp;active_stories=1&amp;active_ency=1&amp;active_photoshare=1&amp;pnUpper_startnum=0&amp;active_pnUpper=1&amp;pnUpper_sortby=date&amp;pnUpper_sortdir=desc&amp;active_sections=1&amp;active_petitions=1&amp;active_weblinks=1&amp;active_ezcomments=1&amp;active_faqs=1">
</os:Url>
</SearchPlugin>

It will be shorter if there were less modules to begin with. What you need to now is insert the info from this file into the following example XML:

Code

<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
<ShortName>MSDN</ShortName>
<Description>MSDN Search</Description>
<Url type="text/html"
   template="http://search.msdn.microsoft.com/search/results.aspx?view=msdn&amp;qu={searchTerms}"
/>  
</OpenSearchDescription>

Add lines as necessary, but maintain the tags/formatting of the example. Here is what this might look like when complete. Note that lines that did not appear in the example, but were in your version from Firefox have been added, because they still will work.

Code

<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
<ShortName>Your Site Name</ShortName>
<Description>Search Plugin for Your Site</Description>
<InputEncoding>ISO-8859-1</InputEncoding>
<Image width="16" height="16">data:image/x-icon;base64,R0lGODlhEAAQALMAAAAAAP///+7u7t3d3czMzLu7u6qqqpmZmYiIiHd3d2ZmZlVVVURERDMzMyIiIhERESwAAAAAEAAQAAAEezAEBACtQWHJUZOPEQgMZw6AEDRKYCSm2RzC8wSJGEvJYlCEhmrneiSCiQ9xBHDgALDlahEoAHQcVAXAEDgeQ4kmgCKzAg8ERwCglgOHUuMmQThaZcFZMRux8FsLKgoHTggHCoAxLQ5xGYprJQcWAQsLWgAcDgAtQhoAEQA7</Image>
<UpdateInterval>3</UpdateInterval>
<UpdateUrl>http://www.yoursite.com/searchplugin.xml</UpdateUrl>
<IconUpdateUrl>http://www.yoursite.com/favicon.gif</IconUpdateUrl>
<SearchForm>http://www.yoursite.com/index.php?name=Search</SearchForm>
<Url type="text/html" method="GET" template="http://www.yoursite.com/index.php?q={searchTerms}&amp;submit=Search&amp;op=modload&amp;name=Search&amp;file=index&amp;action=search&amp;overview=1&amp;defaultstate=1&amp;togglebox=on&amp;active_comments=1&amp;active_users=1&amp;active_eventreg=1&amp;active_trssnews=1&amp;active_paypalcart=1&amp;active_pnzclassifieds=1&amp;pnzclassifieds_cat=38&amp;pnzclassifieds_cat=48&amp;pnzclassifieds_cat=1&amp;pnzclassifieds_state=0&amp;pnzclassifieds_country=0&amp;active_reviews=1&amp;active_v4bJournal=1&amp;pnForum_startnum=0&amp;active_pnForum=1&amp;pnForum_order=1&amp;pnForum_limit=10&amp;active_downloads=1&amp;active_postcalendar=1&amp;active_stories=1&amp;active_ency=1&amp;active_photoshare=1&amp;pnUpper_startnum=0&amp;active_pnUpper=1&amp;pnUpper_sortby=date&amp;pnUpper_sortdir=desc&amp;active_sections=1&amp;active_petitions=1&amp;active_weblinks=1&amp;active_ezcomments=1&amp;active_faqs=1"
/>  
</OpenSearchDescription>

Save this new file as searchplugin.xml (or whatever you specified in ?update?)

4
Upload the new searchplugin.xml and searchplugin.png (or .gif) to whatever URLs that you specified in ?UpdateUrl? http://www.yoursite.com/searchplugin.xml
and
updateIcon="http://www.yoursite.com/favicon.gif"

NOTE: that these locations must be accessible to the public. If you want to restrict access to the plug-in there are many ways, but for now we'll assume that its open to everyone.

5
At this point the plug-in is ready for use, but we need to inform web browsers that it is there. Next you need to add a small bit of code between the head tags ( ) of your main site HTML. In theme files this would be: master.html for Xanthia, theme.html, for AutoTheme. Or it can go in: ...modules/Header_Footer/pntemplates/header_footer_page.htm.
Here is the code, again swapping href field with the place you put your plug-in:

Code

 

6
Or make a button for users to click to install the plug-in. Insert this HTML anywhere that accepts HTML, like module or theme templates. Again, swap out the URL.

Code

<INPUT TYPE="button" VALUE="Add Your Site Search to your Browser"
   onClick='window.external.AddSearchProvider("http://http://www.yoursite.com/searchplugin.xml");'>

7
Moment of truth.
Go to your site. In IE7, the search bar button should ?light up?. Hit the button and go down to Add Search Providers and your plugin should be there. For Firefox, go to the Search bar button and at the bottom of the list you should see your plug-in offered. Once added, it should be functional immediately. As you make changes to the search module, add them to the ?template? line of the searchplugin.xml. Installed copies of the plug-in in browsers will update themselves to this file as often as what you specified in ?updateCheckDays?.

That should be it. I want to thank http://www.pncms.de/ for having initially written a Firefox src version for their PostNuke site. This was an important starting point to this tutorial.
backharlow

Freshman
Freshman
Posts: 31

Posted:
7.Mar 2007 - 03:19

If anyone sees any issues with this code, or knows a much better way of doing this, i'm curious. And apologies for the extra massive right margin, with those long addresses.
pru
avatar
Softmore
Softmore
Posts: 99

Posted:
8.Aug 2007 - 14:37

Hi,

PN .764 with lots of Pagesetter 6.3.0 in it and not much else
==============================================================
I thought this was a good idea, and started trying to implement it. However, I simply have a Search link hard-coded into my Home theme template (using AT lite), so after creating the searchplugin.src (no problem there), I reckoned I had to go and hack the modules/Search/index.php page. Problem: the modules to be searched are put there by a foreach loop. Is it even possible to hack this page, and if so, where would I need to put your plugin code?

Tks,
Pru
backharlow

Freshman
Freshman
Posts: 31

Posted:
8.Aug 2007 - 19:31

Thanks pru for giving this a try. Looking back through this I guess maybe my instructions were a bit too detailed. Also, and this relates to your question, I just noticed that the code on step 5 was made invisible by the "code" formatting of this forum, so I'll repost that. It is a simple link that you put in the "head" of your theme.html (for AutoTheme) or Header_Footer module templates. Here it is.

link rel="search"
type="application/opensearchdescription+xml"
title="My Search Engine"
href="http://www.mysite.com/searchplugin.xml"

except put a < at the beginning before the word "link" and a /> at the very end.


format this as... "type" leave alone, "title" is what you want it to show the user as the name of your site search, and "href" is the full path to where you've decided to store the plugin.

Okay, so if you put that in your "header" the web browser will automatically detect the available plugin and offer it to the user when they click on their browser search bar. It doesn't matter where you put this file, as long as you copy the address to it correctly. This does not require altering PostNuke in any way other than adding that link to your theme.html. Whenever a user runs a search with it, it pulls up their results in the current window, using the normal search results page of the core Search module.



edited by: backharlow, Aug 08, 2007 - 08:35 AM