Как добавить программируемый поиск от Google на свой сайт?
В этой статье мы разберём как на свой сайт добавить программируемый поиск от Google. Начнём мы этот процесс с создания поисковой системы посредством панели управления. После этого приступим к настройке данной системы. Завершим всё это дело, получением её кода и встраиванием его на свой сайт.
Что такое программируемая поисковая система Google?
Программируемая поисковая система – это простой и удобный инструмент для создания поиска на своём сайте. Она имеет много настроек, с помощью которых вы можете достаточно точно определить как эта система должна выглядеть на сайте и где должна искать информацию. В основе этой системы лежат постоянно развивающиеся технологии Google Поиска.
Создание поисковой системы
Самый простой способ создать базовую поисковую систему – это воспользоваться панелью управления.
Для создания новой программируемой поисковой системы нажмём на кнопку «Добавить» и на открывшейся странице заполним форму. В ней укажем название поисковой системы, а также место, в котором нужно осуществлять поиск. В качестве варианта выберем «Поиск на определенных сайтах и веб-страницах», затем в поле «Укажите сайт или веб-страницы» введём нужный адрес (например, «itchief.ru») и нажмём кнопку «Добавить».
После этого при необходимости можно задать некоторые дополнительные настройки. Для завершения необходимо установить флажок "Я не робот" и нажать на кнопку «Создать».
После этого появится сообщение, что поисковая система создана.
Настройка внешнего вида
Выберем только что созданную поисковую систему, в отрывшейся странице «Обзор» перейдем в раздел «Внешний вид» и нажмем на кнопку «Все настройки внешнего вида».
В качестве макета установим "Только результаты".
Добавление поисковой системы на свой сайт
На данном шаге встроим полученный HTML-код программируемого поиска Google на свой сайт. Осуществляется это посредством его вставки в нужное место HTML-страницы, в котором оно должно отображаться. Если вы забыли скопировать HTML-код этой системы, то получить его заново можно на странице «Обзор» посредством нажатия на ссылку «Получить код».
Код будет выглядеть примерно так:
<script async src="https://cse.google.com/cse.js?cx=a50c64a99584d4961"></script>
<div class="gcse-searchresults-only"></div>
Так как мы выбрали вариант поисковой системы только с отображением результатов, то нам необходимо будет дополнительно ещё сделать форму для ввода поискового запроса. Например, следующим образом (полный вариант HTML-страницы):
<h1>🔍 Поиск по сайту</h1>
<!-- Форма, содержащее поле поиска -->
<form class="search-form" action="#" method="GET">
<label class="search-label" for="search-input">
<svg xmlns="http://www.w3.org/2000/svg" focusable="false" width="16" height="16" fill="currentColor" class="search-image" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"></path></svg>
</label>
<input class="search-input" id="search-input" type="search" name="q" value="" placeholder="что хотите найти?">
<button type="reset" class="search-reset" title="Очистить запрос" hidden>
<svg width="20" height="20" viewBox="0 0 20 20"><path d="M10 10l5.09-5.09L10 10l5.09 5.09L10 10zm0 0L4.91 4.91 10 10l-5.09 5.09L10 10z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg>
</button>
<button class="search-submit" type="submit" tabindex="-1">Найти</button>
</form>
<div class="search-header">📢 Результаты поиска</div>
<div class="gcse-result">
<!-- Место для отображения результатов поиска -->
<div class="gcse-searchresults-only"></div>
</div>
<script async src="https://cse.google.com/cse.js?cx=a50c64a99584d4961"></script>
Для оформления внешнего вида этой веб-страницы создадим стили и подключим их к странице с помощью тега <link>
:
<link rel="stylesheet" href="css/main.css">
Для того чтобы данная страница работала, мы напишем JavaScript код. С помощью него мы будем обрабатывать форму после ввода поискового запроса в форму и нажатия на кнопку «Найти». Чтобы это сделать мы назначим обработчик событию submit
для <form>
:
const { href } = window.location;
const url = new URL(href);
const form = document.querySelector('.search-form');
const input = form.querySelector('#search-input');
// назначаем обработчик событию submit для формы
form.addEventListener('submit', (e) => {
// отменим отправку формы на сервер
e.preventDefault();
// перезагрузим страницу
window.location.href = `${url.origin}${url.pathname}?q=${encodeURIComponent(input.value.trim())}`;
});
В коде обработчика мы первым действием отменим отправку данной формы на сервер. После этого будем выполнять перезагрузку этой страницы, дополнив её URL-адрес GET-параметром q
. В качестве значения этого параметра установим текст, которые мы ввели в поле <input>
.
Например, после ввода запроса «JavaScript» и нажатия на кнопку «Найти», URL-страницы будет содержать параметр q
с этим значением.
Далее всё выполняет скрипт https://cse.google.com/cse.js
. Он читает значение GET-параметра q
, отправляет запрос на сервер Google, получает ответ и выводит его результаты в HTML-элемент .gcse-searchresults-only
.
Для того чтобы с формой было более комфортно работать напишем с помощью JavaScript (полный код) ещё логику для:
- отображения сообщения «Вы не ввели запрос в поисковую строку.», когда запрос пустой;
- переключения видимости кнопки, которая используется для очистки значения поля
<input>
, в зависимости от наличия в нём текста.
Теперь, когда запрос пустой мы увидим сообщение.
Все файлы этого проекта расположены на GitHub: https://github.com/itchief/ui-components/tree/master/search.
Комментарии: 4
А как сделать, чтоб результаты в новом окне открывались сайт на modx revo? Форма запроса такая
Доброго дня
Почему то выкидывает на стр.404, хотя если вставить код то работает. Проверил все что возможно проверитьДа, и почему то ругается на эту строку
Привет! Может параметр
Если дело именно в этой строчке, то её можно переписать по старинке:q
как-то обрабатывается в правилах на сайте. В этом случае необходимо вместоq
назначить какое другое имя в параметрах поисковой системы, а затем также изменить его в JavaScript коде.Ну и возможно пригодиться еще кому, если будет 404