Google CSE in un iframe

Una delle primizie del mondo Google è Google CSE, ovvero Custom Search Engine. CSE permette a chiunque di crearsi un motore di ricerca personalizzato, basato sui risultati di Google.

La vera forza di CSE è la possibilità di definire un sottoinsieme di siti, all'interno dei quali effettuare le ricerche. E poi poterci guadagnare. Nella versione free di CSE la pubblicità tra gli annunci – a prescindere dal layout che scegliete – c'è sempre. L'unica cosa che potete fare è decidere se regalare gli introiti a Google, oppure condividerli con lui inserendo un vostro account Adsense.

Non scenderò in specifiche su funzionalità e settaggi (cercate qui Google CSE), ma voglio fare il punto sull'utilizzo di CSE, ottimizzato per i permalink. E' cosa abbastanza nota che CSE per essere implementato necessiti di due tipi di codice:

  • codice per il form
  • codice per i risultati (serp)

Per puntare a una pagina di risultati di un nostro CSE è necessario settare il vecchio modo di pubblicazione contenuti (classico FORM con pagina dedicata) altrimenti se usiamo quello asincrono in javascript è un vero macello. Di quello parlerò.

Il codice di generazione SERP di CSE, non essendo server side, piglia i dati tramite script in javascript dall'url. E per funzionare ha necessità di una serie di parametri (in querystring) tipo cx, q, forid, …

Dopo tanto beste… studiare ho trovato una soluzione funzionante. A prescindere che la serp generata da CSE sia dentro un IFRAME possiamo in una nostra pagina configurare un IFRAME all'interno del quale chiamiamo la pagina con il LINK di cui ha bisogno. Sembra semplicissimo: non vi resta che preparare una paginetta di appoggio per la sola SERP (chiamiamola _myserp.cfm) e mettere dentro il codice per la generazione dei risultati.

Alla fine lo schema sarà così:

  • paginaRisultati.cfm?cerca=Merlinox
    • (iFrame) _myserp.cfm?cx=xxxxxxxxx:yyyyyyyyyyy&q=Merlinox&forid=10&…

Chiaro? Peccato però non sia finita. Infatti è necessario apportare un paio di accorgimenti. Affinchè la paginazione funzioni in _myserp.cfm dovete aggiungere anche il codice per il form di ricerca. Ma potete tranquillamente nasconderlo. Vedi esempio:

<div style="display:none">
<form action="" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="xxxxxxxxx:yyyyyyyyyyy" />
<input type="hidden" name="cof" value="FORID:10" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" id="q" autocomplete="off" size="31" />
<input type="submit" name="sa" value="Cerca" />
</div>
</form>
</div>

Poi un'altra cosa fondamentale è aggiungere un piccolo parametro googleSearchResizeIframe allo script di generazione SERP, altrimenti una volta caricati i risultati, ve li pubblicherà nel frame _top, ovvero nella finestra base del browser vanificando ogni sforzo. Ecco il codice dove si trova il parametro:

<script type="text/javascript">
var googleSearchIframeName = "cse-search-results";
var googleSearchFormName = "cse-search-box";
var googleSearchFrameWidth = 690;
var googleSearchDomain = "www.google.com";
var googleSearchPath = "/cse";
var googleSearchResizeIframe = false;
</script>

E tutto funzionerà correttamente. Se ci sono altri dubbi scrivete pure che ci ragioniamo insieme.

 

Google CSE è suggerimenti

Piccola postilla geek per quanto riguarda la parte "suggerimenti". Se avete configurato il vostro Google CSE affinchè presenti i suggerimenti di ricerca nel campo di input, sappiate che su alcuni browser le eventuali funzioni onSubmit che dichiarate nello stesso form possono andare in conflitto con eventi asincroni che solo Google sa.

Infatti, inserendo nella funzione chiamata dal onSubmit un alert o un qualsiasi blocco sincrono, l'esecuzione avviene sempre correttamente in ogni browser. Diversamente pare che gli eventi asincroni abbiano la priorità.

Loading Facebook Comments ...

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *