Como implementar a caixa de pesquisa

Depois de criar o Mecanismo de Pesquisa Programável, você pode adicionar o Elemento de Pesquisa Programável ao site. Para fazer isso, será necessário copiar e colar um código no HTML do site, na posição onde você quer que o mecanismo de pesquisa apareça.

  1. No painel de controle, clique no mecanismo de pesquisa que você quer usar.
  2. 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 sua página, na posição onde você quer que o Programmable Search Element apareça.

O elemento <div class="gcse-search"></div> é um marcador de posição, onde o elemento de pesquisa (caixa e resultados da pesquisa) será renderizado.

<!-- Insira seu próprio ID do Mecanismo de Pesquisa Programável aqui --> &lt;script async src=&quot;https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga&quot;&gt;&lt;/script&gt; 
<div class="gcse-search"></div>

Como testar layouts diferentes

Em muitas ocasiões, faz sentido que uma caixa de pesquisa seja exibida 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 mostre resultados em outra área (por exemplo, a área principal da página).

Para alterar 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.

<!-- Insira seu próprio ID do Mecanismo de Pesquisa Programável aqui --> &lt;script async src=&quot;https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga&quot;&gt;&lt;/script&gt; 
<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. Ele permite que você implemente sua própria caixa de pesquisa em uma página e processe os resultados de pesquisa padrão em outra página 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 autônoma, alterando o atributo resultsUrl para apontar para o URL em que você quer exibir 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>

Faça um teste

Para implementar uma página autônoma de resultados de pesquisa, 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 passando um "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.

Faça um teste

Próxima etapa...

Prossiga para Como ativar o preenchimento automático.