Ieri il forum di Ubuntu Italia ha operato importanti aggiornamenti destinati a una migliore fruibilità dei contenuti: il più importante è senz’altro quello di trovare in cima ad ogni sezione i collegamenti alle rispettive parti del wiki. Un altro aggiornamento riguarda la possibilità di effettuare una ricerca all’interno del forum e del wiki senza la necessità di farlo dal sito, ma direttamente dalla barra di ricerca di Firefox e dei browser che implementano OpenSearch. Anche noi possiamo aggiungere questa funzionalità al nostro blog/sito, con pochissimo impegno. Vediamo come.
Preparate l’icona
Innanzitutto è doveroso, direi, associare una icona al campo di ricerca, in modo da individuare subito su quale sito cercare, proprio come i motori già presenti nella vostra barra di ricerca (Google, Wikipedia, De Mauro, ecc.). L’ideale sarebbe la favicon del vostro blog; altrimenti createne una allo scopo. Createla con una dimensione di 16×16 pixel e salvatela.
Ora questa icona dovrà essere trasformata in formato testo con codifica base64 e incorporata nel file XML. Fate così:
- caricate l’immagine nel vostro server;
- col browser andate qui e nel campo URI inserite il percorso dell’immagine (ad es. http://www.miosito.it/mia-immagine.png);
- il sito vi restituirà il risultato della codifica dell’immagine in formato testo;
- tenete aperta questa finestra perché dovremo prelevarne subito il codice;
- eliminate l’immagine di poco fa dal vostro server, perché non vi serve più.
Creiamo il file XML
Aprite il vostro editor di testo preferito e incollate questo testo che segue:
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/" xmlns:moz="http://www.mozilla.org/2006/browser/search/"> <ShortName>TITOLO BREVE</ShortName> <Description>DESCRIZIONE</Description> <InputEncoding>UTF-8</InputEncoding> <Image width="16" height="16">TESTO IMMAGINE CODIFICATA</Image> <Url type="text/html" method="GET" template="VOSTRO INDIRIZZO"> <Param name="s" value="{searchTerms}"/> </Url> <moz:SearchForm>VOSTRO INDIRIZZO</moz:SearchForm> </OpenSearchDescription>
Sostituite le parti di testo che ho scritto in maiuscolo con quelle vostre. Fate attenzione, soprattutto, al tag “Image“: al posto di “TESTO IMMAGINE CODIFICATA” inserite il testo che vi ha restituito poco fa quel sito. Sarà un testo lunghetto del tipo: “data:image/png;base64,iVBORw0KGg[…]ElFTkSuQmCC“. Mettetelo così com’è. Salvate il file col nome che preferite, aggiungendo l’estensione “xml”, ad esempio: miosito.xml e caricatelo sul server.
Carichiamo l’XML
Caricate ora questo file sul vostro server e mettetelo dove più vi aggrada: magari in un cartella apposita chiamata “searchplugins”. L’importante è che mettiate il percorso corretto nel file che segue.
Modifichiamo l’header dell’HTML
Caricato l’XML, modifichiamo la sezione “header” delle nostre pagine HTML. Per chi usa WordPress ciò si riduce a modificare un solo file del proprio tema, cioè header.php. Salvatelo in locale (o modificatelo dal Pannello di WordPress), apritelo e all’interno della sezione head (racchiusa tra i due tag e ) inserite questa riga
<link rel="search" type="application/opensearchdescription+xml" title="TITOLO BREVE" href="PERCORSO AL FILE XML" />
modificando i due parametri in maiuscolo. Per il parametro href, se avete messo il file xml nella cartella, ad esempio, “opensearch” del vostro spazio web, il parametro sarà:
href="http://www.vostro-sito.it/searchplugins/nome-che-avete-dato.xml"
cambiando vostro-sito.it con il vostro indirizzo e nome-che-avete-dato.xml con il nome del file xml. Salvate il file header.php (o quello che usate come Header del vostro sito) e sostituitelo a quello che avete sul server.
Aggiungiamo il motore di ricerca a Firefox
Fate una prova aggiornando dal browser la home page del vostro blog: nella barra di ricerca dovreste vedere il pulsante cambiare colore (almeno così è in Firefox), segno che il browser ha rilevato la possibilità di effettuare ricerche nel vostro sito. Aggiungetelo all’elenco e fate qualche prova.