So sieht das Suchfeld in Firefox aus.

Hier ein Tutorial für alle Firefox User oder für Webmaster die Firefox Usern eine Möglichkeit bieten wollen, die eigene Seite einfach und schnell direkt in Firefox zu durchsuchen. Firefox hat nämlich eine kleine Suchbox in der man standartmässig auf Google oder Yahoo suchen kann, jedoch kann man dort auch ganz einfach dem User ermöglichen dort die eigene Seite einzubinden. Wie das genau geht und was ihr dazu braucht, erkläre ich euch hier in diesem Tutorial.

Lernziele:

• Javascript Browserweiche
• Firefox Suchplugin erstellen

Voraussetzungen:

• Basis HTML Kentnisse

Für eine Vorschau hier klicken.

Zuerst etwas Theorie, Firefox und der Internet Explorer (ab ver 7.0) unterstützen den Opensearch Standard. Dieser wurde eingeführt um Suchergebnisse zu vereinheitlichen um so möglichst vielen Clients das Auslesen der Sucherebnissen zu ermöglichen.

So nun aber zum eigentlichen “Plugin”. Eigentlich ist dies nichts weiter als eine .xml Datei. Erstellt also eine neue .xml Datei und gebt ihr zum Beispiel den Namen “opensearch.xml”. Nun gebt ihr dort folgendes ein:

Das meiste sollte eigentlich klar sein, unter “Url template” gebt ihr an, an welche URL der Suchstring gesendet werden soll. Diese kann zum Beispiel so aussehen: www.deinedomain.de/suche.php?suche=. Unter “Image” kann man optional noch den Link zu einem Bild im .ico Format angeben, dieses wird dann in dem Suchfeld angezeigt. Zum Beispiel kann man den Link zu einem Favicon angeben: http://www.xdee.net/favicon.ico

Nun da wir unsere .xml Datei haben, müssen wir dem Browser noch mitteilen, dass die Seite ein solches Plugin anbietet. Dies tun wir ganz einfach indem wir in einem HTML Dokument im HEAD Bereich folgendes hinzufügen:

Nun weiss der Browser also, dass so ein Plugin vorhanden ist, um das Plugin aber nun hinzuzufügen brauchen wir nun aber noch etwas Javascript.

Mit folgendem Code bewirken wir, dass das Suchplugin beim Aufruf der Funktion hinzugefügt wird:

[cc lang="Javascript"]

function searchAdd() {
if (window.external && (“AddSearchProvider” in window.external)) {
window.external.AddSearchProvider(“Link zu opensearch.xml Datei”);
} else {
alert(“Ihr Browser unterstütz leider keine Suchplugins. Benutzen Sie doch Firefox oder den IE 7.0″);

}
}

[/cc]

Zuerst wird geprüft ob “window.external” und die Funktion “AddSearchProvider” existieren. Im Firfox und im IE ist dies der Fall. Danach wird eben diese Funktion aufgerufen und das Suchplugin wird hinzugefügt.

Nun müssen wir diese Funktion noch aufrufen, mit etwas HTML Code können wir dies zum Beispiel beim Klick auf einen Link tun:

So, beim Klick auf den Link wird eine Meldung erscheinen und euer Browser wird euch fragen, ob ihr die Suche hinzufügen wollt oder nicht. Danach wird die Suche im Browser im Suchfeld möglich sein.

Dies ist eine gute Möglichkeit um dem User eine einfache Suche zu ermöglichen, ohne dass er zuerst die Seite aufrufen muss.

Für Fragen, Kritik etc. benutzt doch einfach die Kommentarfunktion

MFG

Michael