Ich nun auch mit FF Searchplugin

März 20th, 2009 | Tags: , , , , , , , , , , , ,
Anzeige

Nach dem Erfolg1 des Bee5 Searchplugins (Bee5 Suchplugin für FireFox) und dem Versuch meiner Herzdame gestern etwas über Ubuntu auf meinem Blog zu finden, habe ich mich entschlossen nun auch ein Searchplugin für meinen Blog anzubieten.

Dem Aufmerksamen betrachter wird es sicher aufgefallen sein, dass sich beim Besuchen des Blogs die Suchleiste im Firefox verändert hat. Klappt man sie nun auch findet sich dort auch ein neuer Eintrag.

Geschmeidig und einfach kann man nun durch einen Klick auf die (links) markierte Zeile klicken, und das Suchplugin zu den beliebsten Scuhmaschienen hinzufügen.2

Es wäre jetzt aber sehr plump von mir einfach nur einen Beitrag zu schreiben, in dem ich sage, was ich habe neee ich nutze die Gelegenheit auch gleich um zu beschreiben3 , wie jeder mit ein ganz, gaaanz wenig Ahnung von der Materie hat so ein Blugin erstellen kann. Speziell werde ich auf die Zielgruppe Blogbetreiber4 eingehen, was aber nicht heißt, dass es nicht auch für andere Seitenbetreiber geeignet ist.

Was braucht man?

Nur wenig dinge werden im Vorfeld benötigt:

  • Eine Webseite mit einer Möglichkeit etwas zu suchen.
    Man muss wissen, wie die Seite eine Suchanfrage verarbeitet (Auf welche Seite gelangt man, wenn man die Suchmaske bestätigt, welche Informationen werden auf welche Art und weise mitgeteilt (Wie heißen die Variablen, wie werden sie übertragen (POST oder GET) )
  • Ein Icon in der Größe 16×16 Pixel.
    Ich habe dafür mein FavIcon benutzt (Man muss das Rad ja nicht zwei mal erfinden
  • Einen Texteditor
  • Optional Zugriff auf den Quellcode der Seite speziell auf den Headerbereich

Los geht es mit einer Dummie-XML Datei

Zuerst nimmt man sich eine Beispieldatei3

<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/" xmlns:moz="http://www.mozilla.org/2006/browser/search/">
  <ShortName>NAME</ShortName>
  <Description>BESCHREIBUNG</Description>
  <InputEncoding>z.B. UTF-8</InputEncoding>
  <Image width="16" height="16" type="image/x-icon">http://example.com/favicon.ico</Image>
  <Url type="text/html" method="method" template="http://example.com/">
    <Param name="suchVariable" value="{searchTerms}"/>
    ...
    <Param name="paramNameN" value="paramValueN"/>
  </Url>
  <moz:SearchForm>http://example.com</moz:SearchForm>
</OpenSearchDescription>
  • Zeile 2: Dort wird der Name eingetragen, der später in dem Suchfeld zu sehen sein soll (Wenn keine Suche eingetragen ist)
  • Zeile 3: Eine Kurze Beschreibung (worum geht es)
  • Zeile 4: Mit welcher Kodierung soll gesendet werden. Ich empfehle UTF-8
  • Zeile 5: Hier die URL von eurem Icon. Ihr könnt auch das data: URI scheme nutzen. Aber wenn ihr der Anleitung folgt, wird es automatisch umgewandelt.
  • Zeile 6: Dort tragt Ihr sowohl eure gewünschte Methode zur übertragung der Daten (POST oder GET)  als auch die Adresse auf der die anfrage verarbeitet werden soll. Da ist nun das wissen über eure Seite gefragt, wo landet die Suche? Bei WP ist es die Startseite des Blogs und Methode GET.
  • Zeile 7-9: Hier könnt ihr nun die Parameter eintragen, die bei der Suche übergeben werden sollen (Variablen – Namen Paar. {searchTerms} ist dabei der Wert, der in das Suchfeld eingeben wurde. Ihr könnt da so viele Parameter angeben wie ihr wollt. Bei WP lautet dar name der suche einfach nur s (kleines S). Ich lass zur auswertung (reines interesse von mir, wie das Plugin benutzt wird) noch einen weiteren Parameter übergeben, in dem ich auswerten kann, ob die Suche von meinem Plugin kommt.
  • Zeile 11: Beinhaltet eure Webseite. Damit ist sichergestellt, dass ein Benutzer, der ohne Eingabe eines Suchgegriffes direkt auf eure Seite kommt.

Das war es schon (fast). Wenn ihr jetzt noch wollt, dass sich das Plugin selbst updatet5, falls ihr mal etwas ändert (z.B. Die Seite die die suche bearbeitet ist umgezogen) , müsst ihr noch eine Zeile hinzufügen (ich empfehle nach Zeile 10)

<Url type="application/opensearchdescription+xml" rel="self" template="http://example/mysearchplugin.xml" />

Dort tragt ihr bei template einfach die URL zu eurer später hochgeladenen xml Datei ein und das Plugin (soll) macht selber updates.

Die Datei speichert ihr nun als *.xml Datei ab und ladet sie dann per FTP auf eure Webseite hoch.

Jetzt soll eure Seite eure Benutzer darüber informieren, dass ihr solch ein Plugin benutzt

Klar, was nutzt so ein Plugin, wenn es niemand nutzt, weil es unbekannt ist.
In eurem HTML Code (ziwschen <head> und </head> fügt ihr folgenden Code ein:

<link rel="search" type="application/opensearchdescription+xml" title="searchTitle" href="pluginURL">

Ersetzt searchTitle durch den Namen eurer Suche und pluginURL durch die URL zu eurer XML Datei, die ihr gerade hochgeladen habt.
Nun wird jeder FF Benutzer informiert6, dass es was zu suchen bei euch gibt.

Ich hoffe es konnte euch helfen, und es sprießen jetzt die Suchplugins nur so aus dem Boden. (Würde mich über Feedback freuen)

  1. der noch zu erwarten ist *hust hust* []
  2. Man, der Gedanke meine Seite neben Seiten wie Google, Wikipedia, Amazon und Co stehen zu haben ist nen tolles gefühl []
  3. Original siehe hier []
  4. mit WordPress []
  5. Erst ab FF Version 3.1 möglich []
  6. Das Dropdowfeld in der Suchleiste verändert die Farbe []

Weiter lesen


Keine Kommentare
Kommentieren