Depois de criar o Mecanismo de Pesquisa Programável, é possível adicionar o Elemento de Pesquisa Programável ao seu site. Para fazer isso, você precisa copiar um código e colá-lo no HTML do site, na posição em que você quer que o mecanismo de pesquisa seja exibido.
- No Painel de controle, clique no mecanismo de pesquisa que você quer usar.
- Na seção Básico da página Visão geral, clique em Obter código. Copie e cole o código no código-fonte HTML da página, onde quiser que o Elemento de Pesquisa Programável apareça.
O elemento <div class="gcse-search"></div> é um marcador de posição. É aqui que o elemento de pesquisa (caixa e resultados) vai ser renderizado.
<div class="gcse-search"></div>
Como testar layouts diferentes
Em muitas ocasiões, faz sentido que uma caixa de pesquisa apareça independentemente dos resultados da pesquisa. Um layout de duas colunas permite que você renderize uma caixa de pesquisa em uma área da página (por exemplo, na barra lateral) e exiba os resultados em outra (por exemplo, a área principal da página).
Para mudar o layout do mecanismo, acesse a seção Layout da página Aparência no Painel de controle. Depois de selecionar e salvar o layout de duas colunas no Painel de controle, você também precisará alterar o código HTML do Elemento de pesquisa.
<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>
Outro layout interessante é a opção de duas páginas. Com ele, você pode implementar sua própria caixa de pesquisa em uma página e renderizar os resultados padrão em outra usando parâmetros na barra de endereço.
Selecione e salve o layout de duas páginas no painel de controle. Em uma página, implemente uma caixa de pesquisa independente, mudando o atributo resultsUrl para direcionar ao URL em que você quer mostrar os resultados.
<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>
Para implementar uma página de resultados de pesquisa autônoma, cole o snippet de código dos resultados na sua página de resultados:
<script async src="https://cse.google.com/cse.js?cx=YOUR_ENGINE_ID"></script>
<div class="gcse-searchresults-only"></div>
Agora você pode acionar os resultados da pesquisa nesta página transmitindo um argumento "q" no URL:
https://my-results-page-url.com/?q=myQuery
Observe o parâmetro q=myQuery na barra de endereço. É assim que o elemento <div class="gcse-searchresults-only"></div> sabe quais resultados de consulta exibir.
Próxima etapa...
Prossiga para Ativar o preenchimento automático.