OpenSearch anche nel nostro blog
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 <head> e </head>) 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.