Dopo aver creato un Motore di ricerca programmabile, puoi aggiungere questo elemento al tuo sito. Per farlo, dovrai copiare del codice e incollarlo nel codice HTML del tuo sito nel punto in cui vuoi che venga visualizzato il tuo motore di ricerca.
- Nel Pannello di controllo, fai clic sul motore di ricerca che vuoi utilizzare.
- Nella sezione Base della pagina Panoramica, fai clic su Genera codice. Copia il codice e incollalo nel codice sorgente HTML della tua pagina, nel punto in cui vuoi che venga visualizzato l'Elemento di ricerca programmabile.
L'elemento <div class="gcse-search"></div> è un segnaposto: è qui che verrà eseguito il rendering dell'elemento di ricerca (sia la casella di ricerca sia i risultati di ricerca).
<div class="gcse-search"></div>
Provare layout diversi
In molte occasioni, ha senso fare in modo che una casella di ricerca venga visualizzata indipendentemente dai risultati di ricerca. Un layout a due colonne ti consente di mostrare una casella di ricerca in un'area della pagina (ad esempio nella barra laterale) e di visualizzare i risultati in un'altra (ad esempio l'area principale della pagina).
Per modificare il layout del motore, vai alla sezione Layout della pagina Aspetto e design nel pannello di controllo. Dopo aver selezionato e salvato il layout a 2 colonne nel pannello di controllo, devi anche modificare il codice HTML dell'elemento di ricerca.
<div style="border: 1px solid blue;">
Area 1 (for example a sidebar)
<div class="gcse-searchbox"></div>
</div>
<div style="border: 1px solid red;">
Area 2 (for example main area of the page)
<div class="gcse-searchresults"></div>
</div>
Un altro layout interessante è l'opzione di due pagine. Ti consente di implementare la tua casella di ricerca in una pagina e visualizzare i risultati di ricerca standard in un'altra utilizzando i parametri nella barra degli indirizzi.
Seleziona e salva il layout a due pagine nel pannello di controllo. In una pagina, implementa una casella di ricerca autonoma, modificando l'attributo resultsUrl in modo che punti all'URL in cui vuoi visualizzare i risultati.
<script async src="https://cse.google.com/cse.js?cx=YOUR_ENGINE_ID"></script>
<div class="gcse-searchbox-only" data-resultsUrl="YOUR_RESULTS_PAGE_URL"></div>
Per implementare una pagina dei risultati di ricerca autonoma, incolla lo snippet di codice dei risultati nella pagina dei risultati:
<script async src="https://cse.google.com/cse.js?cx=YOUR_ENGINE_ID"></script>
<div class="gcse-searchresults-only"></div>
Ora puoi attivare i risultati di ricerca su questa pagina passando una lettera "q" nell'URL:
https://my-results-page-url.com/?q=myQuery
Nota il parametro q=myQuery nella barra degli indirizzi: questo è il modo in cui l'elemento <div class="gcse-searchresults-only"></div> stabilisce quali risultati della query visualizzare.