Документация

Настройка Яндекс.Карточки для вашего сайта

Яндекс.Карточка — это расширение для браузера, которое добавляет на веб-страницы контекстные подсказки от Яндекса (карточки). Карточки дают краткие биографические справки для персоналий, определения терминов, а также описания мест, событий и других известных объектов. Расширение автоматически выбирает объекты, для которых нужно сгенерировать карточки, так чтобы все важные объекты были выделены, но страница не стала перегружена карточками.

Вы можете использовать технологию Яндекс.Карточек на своем сайте. Для этого достаточно вызвать нужный скрипт на каждой странице, где могут понадобиться карточки. Это позволит вам:

  • Показывать контекстные подсказки всем посетителям сайта, вне зависимости от того, установили ли они расширение для браузера. На странице, использующей скрипт Яндекс.Карточек, расширение ничего изменять не будет.

  • Настроить ссылки с карточек для поиска соответствующих объектов на вашем сайте.

  • Указывать, в каких блоках страницы можно искать объекты для карточек (в том числе для пользователей, у которых установлено расширение).

    Расширение не застраховано от того, чтобы показать карточку в навигационном или рекламном блоке страницы. Вызывая скрипт Яндекс.Карточки, вы можете явно указать все блоки, где карточки стоит показывать.

Как вызывать скрипт Яндекс.Карточки

Скрипт нужно подключить и вызвать на каждой странице, на которой вы хотели бы видеть карточки:

  ...
  <script charset="utf-8" type="text/javascript"
          src="https://static.yandex.net/yobject/v2/_/loader.js"></script>
  <script>ya.yobject.load(<DOM-узлы>, {domainSearch: <ссылка на поиск>; callback: <callback-функция>});</script>
</body>

Скрипт следует вызывать непосредственно перед закрывающим тегом </body>. Это гарантирует, что все указанные в вызове узлы DOM-дерева точно будут созданы перед началом работы скрипта.

Параметры вызова:

  • <DOM-узлы> — 'Element | Array' отдельный узел или массив узлов DOM-дерева, в которых можно размещать контекстные подсказки. Например, чтобы указать на элемент с идентификатором main_text, передайте в качестве параметра результат вызова document.getElementById('main_text').

    Этот параметр необходим для работы скрипта, значение по умолчанию не предусмотрено.

    Примечание. Некоторые методы (например, getElementsByClassName) возвращают объект типа HTMLCollection, а не Array. Не забудьте преобразовать нужный набор узлов в массив.
  • <ссылка на поиск> — шаблон URL для поиска по вашему сайту (ссылка Искать на сайте). На название карточки в шаблоне можно сослаться с помощью строки {0}. Необязательный параметр.

    По умолчанию ссылка для карточки на сайте example.com составляется по такому шаблону: https://yandex.{tld}/search/?text={0}%20site:example.com

    Чтобы поставить ссылку на ваш собственный поиск, задайте шаблон нужным образом, например: http://www.example.com/search/?q={0}

  • <callback-функция> — JavaScript-функция, которую скрипт Карточки должен вызвать после того, как на страницу будет добавлена последняя карточка. Необязательный параметр.

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

Чтобы проверить, как карточки будут выглядеть на вашем сайте, вызовите скрипт для всей страницы целиком без дополнительных параметров. Код вызова следует вставить непосредственно перед закрывающим тегом </body>:

<script charset="utf-8" type="text/javascript"
        src="https://static.yandex.net/yobject/v2/_/loader.js"></script>
<script>ya.yobject.load(document.body);</script>

В результате работы скрипта карточки могут быть добавлены по всему тексту страницы без исключений.