апр
30
2017

Добавление google поиска на сайт

Для добавления google поиска на сайт вам необходимо зарегистрироваться в системе Google Custom Search Engine, добавить необходимый сайт, произвести необходимые настройки. Ничего сложного там нет, всё интуитивно понятно, всё расписано:

Добавление google поиска на сайт

После добавления сайта переходим на вкладку "Внешний вид" и выбираем "только результаты". Нажимаем "Сохранить и получить код".

Добавление google поиска на сайт

Да, в сервисах Google есть опечатки.

Добавление google поиска на сайт

Теперь осталось создать форму поиска и страницу, на которой будут выводиться результаты поиска.

Форма поиска крайне проста. У меня она выглядит следующим образом:

Форма поиска
<form id="search" action="/pages/search.html" target="_self">
	<input type="text" name="q" placeholder="Hello, is it me you're looking for?"/>
	<button type="submit" name="sa"></button>
</form>

Атрибуту "action" задайте значение, в котором укажите путь к странице, на которой будут выводиться результаты.
На странице вывода результатов (в моем случае это search.html) добавьте скрипт, полученный в Google Custom Search. Сам скрипт я добавил в конец <head>-а, а результаты поиска <gcse:searchresults-only></gcse:searchresults-only> добавил в основную часть документа.

search.html
<head>
	...
	<script>
		(function() {
		var cx = '007922824692736228963:5cr9mkfktyy';
		var gcse = document.createElement('script');
		gcse.type = 'text/javascript';
		gcse.async = true;
		gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
		var s = document.getElementsByTagName('script')[0];
		s.parentNode.insertBefore(gcse, s);
		})();
	</script>
</head>
<body>
	...
	<main>
		...
		<gcse:searchresults-only></gcse:searchresults-only>
	</main>
</body>

Осталось добавить необходимые стили для результатов поиска. У меня они выглядят следующим образом:

search.html
<head>
	...
	<style>
		...
		.gsc-above-wrapper-area,.gcsc-branding {
		display:none!important
		}
		.gsc-control-cse {
		padding:0!important;
		border:0!important;
		background-color:#F6FBFB!important
		}
		.gsc-webResult.gsc-result {
		border:1px solid transparent!important;
		background-color:#F6FBFB!important;
		transition:border-color .2s ease-in-out,background-color .2s ease-in-out
		}
		.gsc-webResult.gsc-result:hover {
		border-color:#D2D6DC!important;
		box-shadow:none!important;
		background-color:#F4F4F4!important
		}
		.gsc-results {
		background-color:#F6FBFB!important
		}
		.gsc-results .gsc-cursor-box .gsc-cursor-page {
		border:2px solid #397776!important;
		background:#ecf6f6!important;
		color:#232323!important;
		text-decoration:none!important;
		font:bold 13px "Century Gothic",CenturyGothic,AppleGothic,sans-serif!important;
		transition:background .25s ease-in-out,color .25s ease-in-out;
		text-shadow:none!important
		}
		.gsc-results .gsc-cursor-box .gsc-cursor-current-page {
		border:2px solid #397776!important;
		background:#397776!important;
		color:#fff!important;
		padding:2px 8px!important;
		display:inline-block!important;
		width:30px!important;
		font-size:18px!important;
		font-family:"Century Gothic",CenturyGothic,AppleGothic,sans-serif!important;
		cursor:pointer!important
		}
		.gsc-results .gsc-cursor-box .gsc-cursor-page:hover {
		background:#397776!important;
		color:#fff!important
		}
	</style>
	...
</head>

Для того чтобы убрать рекламу добавьте следующий стиль:

search.html
<head>
	...
	<style>
		.gsc-adBlock{display: none!important;}
	</style>
	...
</head>