Une fois que vous avez créé votre Programmable Search Engine, vous pouvez ajouter le Programmable Search Element à votre site. Pour ce faire, vous devez copier du code, puis le coller dans le code HTML de votre site, là où vous souhaitez que votre moteur de recherche apparaisse.
- Dans le panneau de configuration, cliquez sur le moteur de recherche que vous souhaitez utiliser.
- Dans la section Basic de la page Overview (Présentation), cliquez sur Get code (Obtenir le code). Copiez le code, puis collez-le dans le code HTML source de la page, à l'endroit où vous souhaitez que le Programmable Search Element s'affiche.
L'élément <div class="gcse-search"></div> est un espace réservé, c'est-à-dire où l'élément de recherche (champ de recherche et résultats de recherche) s'affiche.
<div class="gcse-search"></div>
Tester différentes mises en page
Dans de nombreux cas, il est judicieux d'afficher un champ de recherche indépendamment des résultats. Une mise en page en deux colonnes vous permet d'afficher un champ de recherche dans une zone de votre page (par exemple, dans la barre latérale) et d'afficher les résultats dans une autre zone (par exemple, la zone principale de la page).
Pour modifier la mise en page de votre moteur, accédez à la section Mise en page de la page Apparence dans le panneau de configuration. Après avoir sélectionné et enregistré la présentation en deux colonnes dans le panneau de configuration, vous devez également modifier le code HTML de l'élément de recherche.
<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>
Une autre mise en page intéressante est l'option sur deux pages. Il vous permet d'implémenter votre propre champ de recherche sur une page et d'afficher les résultats de recherche standards sur une autre page en utilisant les paramètres de la barre d'adresse.
Sélectionnez et enregistrez la mise en page sur deux pages dans le panneau de configuration. Sur une page, implémentez un champ de recherche autonome, en modifiant l'attribut resultsUrl pour qu'il pointe vers l'URL où vous souhaitez afficher les résultats.
<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>
Pour implémenter une page de résultats de recherche autonome, collez l'extrait de code sur la page de résultats:
<script async src="https://cse.google.com/cse.js?cx=YOUR_ENGINE_ID"></script>
<div class="gcse-searchresults-only"></div>
Vous pouvez désormais afficher les résultats de recherche sur cette page en transmettant un argument "q" dans l'URL:
https://my-results-page-url.com/?q=myQuery
Notez le paramètre q=myQuery dans la barre d'adresse. Cela permet à l'élément <div class="gcse-searchresults-only"></div> de savoir quels résultats de requête afficher.
Suivant...
Passez à la section Activer la saisie semi-automatique.