Come creare un form di “Cerca con google”

Poco fa ho scritto un articolo dove desideravo integrare il form di ricerca di google: Come liberarsi dai fastidiosi call center

Il metodo consigliato da google è quello di generare il proprio motore di ricerca tramite questo servizio: https://cse.google.it/

Questo strumento, oltre a permettere molte personalizzazioni (esempio: ricerca su tutto il web, solo sul proprio sito o lista siti; link promozionale – che io ho inserito con caratteri jolly così spunta ad ogni ricerca; solo web o web e immagini; temi; aspetto…) genera anche un codice in javascript per integrarlo sul sito, ma non riesco ad integrarlo qui nell’articolo perché il filtro di sicurezza “teme” il codice javascript.

In ogni caso, è possibile anche impostare il proprio motore di ricerca in “pubblico o riservato”, e io l’ho impostato su pubblico così da avere un link dimostrativo: https://cse.google.it/cse/publicurl?cx=017022616033712520405:wvyl3e7cxew

Il codice javascript generato sarà simile a questo:

<script>
 (function() {
 var cx = '017022616033712520405:wubeztwxcum';
 var gcse = document.createElement('script');
 gcse.type = 'text/javascript';
 gcse.async = true;
 gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
 var s = document.getElementsByTagName('script')[0];
 s.parentNode.insertBefore(gcse, s);
 })();
</script>
<gcse:search></gcse:search>

Basterà integrarlo in un file html (o nel vostro sito, script, template) per vedere il risultato!

 

Detto ciò, dato che io non riuscivo ad usarlo negli articoli qui con IPB WordPress, mi son creato un semplice form in puro html (quello poi inserito nel precedente articolo – e ripropongo qui per dimostrazione):

<form role="search" method="get" action="https://www.google.com/search" target="_blank">
    <label>
        <span class="screen-reader-text">Cerca con Google ...</span><input type="search" name="q" placeholder="... Cerca con Google &#x1F50E;" value="" autocomplete="off" required>
    </label>
    <label>
        <input type="checkbox" id="checkbox_sitesearch" name="sitesearch" value="laltroweb.it"><small>Solo su: L'AltroWeb</small>
    </label>
    <button class="google-search-submit" type="submit">Cerca<span class="screen-reader-text">Cerca</span></button>
</form>

 

In pratica ha una sezione per la ricerca classica su google, e una checkbox (non flaggata di default) per la ricerca sul sito desiderato.

Non è certo il motore di ricerca fornito da Google Custom Search Engine, ma fa bene il suo dovere:

search only on laltroweb.it ?

Come potrete notare non l’ho toccato granché a livello grafico, che poi io l’ho integrato via plugin con shortcode ecc… ma questa è un’altra roba 😀

Per adattarlo alle vostre esigenze, vi basterà modificare “laltroweb.it” con il vostro dominio e sarà operativo. Se la ricerca interna non vi interessa, basterà rimuovere questa parte:

<input type="checkbox" id="checkbox_sitesearch" name="sitesearch" value="laltroweb.it"><small>Solo su: L'AltroWeb</small>

Ah, potrebbe anche avere bisogno di un paio di ritocchi estetici (come dicevo, ci ho lavorato un po’), ma niente di complicato.

Bene! Adesso abbiamo entrambi i codici.

Quello fornito da google in javascript, e l’alternativa in puro e semplice html/css.

A voi la scelta 😉

Per dubbi, domande, richieste di aiuto o modifiche per adattarlo alle vostre esigenze, commentate pure!

---

---

---