Nachdem Sie die Programmable Search Engine erstellt haben, können Sie Ihrer Website das Programmable Search Element hinzufügen. Dazu müssen Sie Code kopieren und an der Stelle in den HTML-Code Ihrer Website einfügen, an der die Suchmaschine angezeigt werden soll.
- Klicken Sie im Steuerfeld auf die Suchmaschine, die Sie verwenden möchten.
- Klicken Sie auf der Seite Übersicht im Bereich Einfach auf Code abrufen. Kopieren Sie den Code und fügen Sie ihn dort in den HTML-Quellcode Ihrer Seite ein, wo das Programmable Search Element angezeigt werden soll.
Das <div class="gcse-search"></div>-Element ist ein Platzhalter. Hier wird das Suchelement (sowohl das Suchfeld als auch die Suchergebnisse) gerendert.
<div class="gcse-search"></div>
Verschiedene Layouts ausprobieren
In vielen Fällen ist es sinnvoll, ein Suchfeld unabhängig von den Suchergebnissen zu platzieren. Bei einem zweispaltigen Layout können Sie ein Suchfeld in einem Bereich Ihrer Seite rendern, z. B. in der Seitenleiste, und die Ergebnisse in einem anderen Bereich anzeigen, z. B. im Hauptbereich der Seite.
Um das Layout Ihrer Suchmaschine zu ändern, gehen Sie in der Systemsteuerung auf der Seite Design zum Abschnitt Layout. Nachdem Sie das zweispaltige Layout im Steuerfeld ausgewählt und gespeichert haben, müssen Sie auch den HTML-Code für das Suchelement ändern.
<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>
Ein weiteres interessantes Layout ist die zweiseitige Option. Mit dieser Funktion können Sie auf einer Seite ein eigenes Suchfeld implementieren und die Standardsuchergebnisse mithilfe von Parametern in der Adressleiste auf einer anderen Seite rendern.
Wählen Sie im Steuerfeld das zweiseitige Layout aus und speichern Sie es. Implementieren Sie auf einer Seite ein eigenständiges Suchfeld, indem Sie das resultsUrl-Attribut so ändern, dass es auf die URL verweist, auf der die Ergebnisse angezeigt werden sollen.
<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>
Um eine eigenständige Suchergebnisseite zu implementieren, fügen Sie das Ergebnis-Code-Snippet in Ihre Ergebnisseite ein:
<script async src="https://cse.google.com/cse.js?cx=YOUR_ENGINE_ID"></script>
<div class="gcse-searchresults-only"></div>
Sie können jetzt Suchergebnisse auf dieser Seite auslösen, indem Sie ein "q" übergeben. Argument in der URL:
https://my-results-page-url.com/?q=myQuery
Beachten Sie den Parameter q=myQuery in der Adressleiste. So weiß das Element <div class="gcse-searchresults-only"></div>, welche Abfrageergebnisse angezeigt werden sollen.
Nächster Schritt...
Fahren Sie mit Automatische Vervollständigung aktivieren fort.