Dopo aver creato il Motore di ricerca programmabile, puoi aggiungere l'Elemento di ricerca programmabile al tuo sito. A tale scopo, 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 Di 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 visualizzare l'Elemento di ricerca programmabile.
L'elemento <div class="gcse-search"></div> è un segnaposto: è qui che viene eseguito il rendering dell'elemento di ricerca (sia della casella di ricerca sia dei risultati di ricerca).
<div class="gcse-search"></div>
Provare diversi layout
In molte occasioni, ha senso che una casella di ricerca venga visualizzata indipendentemente dai risultati di ricerca. Un layout a due colonne ti consente di eseguire il rendering di 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 due colonne nel pannello di controllo, devi modificare anche 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 a due pagine. Ti consente di implementare la tua casella di ricerca su una pagina e di visualizzare i risultati di ricerca standard su un'altra pagina utilizzando i parametri nella barra degli indirizzi.
Seleziona e salva il layout a due pagine nel pannello di controllo. Su una pagina, implementa una casella di ricerca autonoma, modificando l'attributo resultsUrl in modo che rimandi 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 in questa pagina passando un argomento "q" nell'URL:
https://my-results-page-url.com/?q=myQuery
Osserva il parametro q=myQuery nella barra degli indirizzi: questo è il modo in cui l'elemento <div class="gcse-searchresults-only"></div> riconosce i risultati della query da visualizzare.