Поисковый плагин для сайта



Влад Мержевич

В интерфейс браузера Firefox, начиная с версии 2.0 встроена строка поиска, позволяющая без захода на сайт вводить поисковые запросы к Гуглу, Яндексу и другим системам. Идея оказалась удачной и ее впоследствии подхватили разработчики других браузеров. Несмотря на то, что подобным поиском пользуются многие, включая и создателей сайтов, большинство из них не подозревают, насколько просто и легко сделать собственный поисковый плагин для сайта. Плюсов у такого плагина несколько: пользователи начинают активнее использовать поиск, возрастает количество посетителей, повышается результативность сайта, улучшается юзабилити. Главное, что затрат практически нет. Если на сайте используется поиск, «прикрутить» для него плагин раз плюнуть.

В основе плагина лежит технология OpenSearch, которая представляет собой коллекцию небольших форматов для распространения результатов поиска. Эти данные могут использоваться браузером для перехода к нужной странице, вывода описания, картинок и других вещей. Поскольку я затрону лишь малую часть всех возможностей, отсылаю желающих к полному описанию спецификации по адресу http://opensearch.org.

Перейдем от теории к практике. Итак, у вас на сайте уже есть поиск и при вводе запрашиваемой строки выводятся результаты по адресу http://mysite.ru/search/?q=бла-бла. Вместо «бла-бла» может быть любая строка, конечно же. Создаем файл с расширением xml, назовем его search.xml, и сохраняем на сервере. Содержание этого файла следующее (пример 1).

Пример 1. Файл search.xml

<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
 <ShortName>Краткое название сайта</ShortName>
 <Description>Краткое описание поиска</Description>
 <Image height="16" width="16" type="image/x-icon">http://mysite.ru/favicon.ico</Image>
 <Url type="text/html" method="get" 
  xmlns:referrer="http://a9.com/-/opensearch/extensions/referrer/" 
  template="http://mysite.ru/search/?q={searchTerms}"/>
 <InputEncoding>UTF-8</InputEncoding>
</OpenSearchDescription>

Первые две строки в примере являются стандартными. Остальные элементы описаны ниже.

ShortName — краткое название сайта, как оно будет отображаться в строке поиска браузера, длина не более 16 символов. В имени недопустимо использовать теги HTML.

Description — краткое описание поисковой системы. Не должно превышать 1024 символа и содержать HTML-теги. Это необязательный параметр и его можно опустить.

Image — путь к иконке сайта в формате ICO, PNG или JPEG. Размер иконки обычно 16x16 пикселов. Элемент не обязателен и если иконки нет, удалите его из текста. Непременно должен быть указан тип файла через параметр type, для ICO — image/x-icon, PNG — image/png, JPG — image/jpeg.

Url — путь к результатам поиска. В параметре method пишется метод отправки данных (обычно GET), а в template указывается полный адрес к поисковой странице. Вместо поискового запроса надо написать {searchTerms}. Если для работы поиска требуются и другие параметры, их можно перечислить здесь же через амперсанд (?q={searchTerms}&lang=ru).

InputEncoding — кодировка, в которой выводятся результаты поиска.

Теперь остается включить механизм добавления плагина в браузер пользователя. Это можно сделать двумя способами: через тег <link> и JavaScript.

Использование тега <link>

В теге <head> добавьте следующую строку.

<link rel="search" type="application/opensearchdescription+xml" title="Title" href="URL">

Здесь Title название поиска, URL относительный или абсолютный путь к файлу search.xml. К примеру, для сайта htmlbook.ru эта строка имеет такой вид:

<link rel="search" type="application/opensearchdescription+xml" 
  title="htmlbook.ru" href="/sites/search/search.xml" />

После включения указанной строки на сайт при открытии списка поисковых плагинов будет виден и ваш (рис. 1).

Поисковый плагин в списке Firefox

Рис. 1. Поисковый плагин в списке Firefox

Использование JavaScript

Пользователи не всегда догадываются, что в строку поиска можно добавить плагин с текущего сайта, поэтому следует предложить им это сделать явно, нажав на ссылку. Сама ссылка ведет не на документ, а на следующий скрипт (пример 2).

Пример 2. Скрипт для добавления плагина в браузер

<script type="text/javascript">
function addEngine() {
  URL = 'http://mysite.ru/search.xml';
  if (window.external && ("AddSearchProvider" in window.external)) {
    window.external.AddSearchProvider(URL);
  } else {
    alert('Ваш браузер не поддерживает поисковый плагин!');
  }
}
</script>

Здесь переменная URL содержит путь к файлу search.xml. Скрипт работает в браузерах Firefox, Internet Explorer 7 и старше. Для остальных браузеров будет выведено сообщение с помощью alert().

Создать ссылку можно разными способами — через тег <a>, указав в качестве адреса решетку и добавив событие onclick (пример 3), либо вообще отказаться от ссылки, заменив ее тегом <span> (пример 4).

Пример 3. Ссылка на скрипт

<p><a href="#" onclick="addEngine()">Установить плагин</a></p>

В данном примере, чтобы ссылка не вела на реальный адрес, в качестве значения атрибута href ставится решетка, или, как еще называют, заглушка. Сам скрипт вызывается через событие onclick.

Пример 4. Вызов скрипта

<p><span
 style="color: blue; border-bottom: 1px dashed blue; cursor: pointer;" 
 onclick="addEngine()">Установить плагин</span></p>

Здесь нет ссылки, а ее роль выполняет тег <span>. Чтобы он стал похож на ссылку, через стили меняется цвет текста, добавляется подчеркивание и меняется форма курсора.

Технология OpenSearch не ограничивается простым перенаправлением на результаты поиска, с ее помощью также можно выводить в браузере подходящие варианты слов и даже изображения. Для этого используются предложения поиска.

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.