ВебмастерМетрикаВиджетыРекламная сетьДиректПоиск для сайтаAPI
ещё
кабинет разработчика виджетов
Войти
Помощь
Найти

Быстрый старт

Руководство разработчика

Справочник по API
В формате PDF
← Ctrl предыдущаяследующая Ctrl →

Устройство виджета

Виджет представляет собой XHTML-файл, загружаемый в отдельный элемент <iframe>, которому можно задать нужный размер и разместить в произвольном месте. Это позволяет «установить» на одну страницу большое количество виджетов. При этом внешне данная страница выглядит совершенно обычно.

Примечание

Содержимое файла виджета должно быть в кодировке UTF-8.

Рисунок 1.  Виджеты в режиме редактирования (слева) и в обычном режиме (справа)

 

XHTML-файл виджета выглядит следующим образом: 

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:widget="http://wdgt.yandex.ru/ns/"  >
  <head>

  <!-- Описание виджета -->

    <!-- Свойства виджета -->
      <meta name="description" content="Подробное и емкое описание" />
      <meta name="..." content="..." />
      <meta name="..." content="..." />
      ...
      <!-- Cсылка для загрузки тела серверного виджета (см. ниже) -->
      <meta name="src" content="..." />

    <!-- Пользовательские настройки -->
      <widget:preferences>
        <preference name="..." type="..." />
        <preference name="..." type="..." defaultValue="..." />
        ...
      </widget:preferences>

  <!-- конец описания -->

    <!-- Если планируется использование виджетного JS API, подключите соответствующую библиотеку (подробнее см. "Справочник по API") -->
    <script type="text/javascript" src="http://img.yandex.net/webwidgets/1/WidgetApi.js">
    </script>

  </head>
  <body>
    <!-- Тело автономного виджета (см. ниже) -->
  </body>
</html>

Из примера видно, что виджет состоит из описания и тела.

Описание виджета

В описании виджета указываются некоторые обязательные свойства и пользовательские настройки (опционально).

Свойства содержат описательную и служебную информацию о виджете, например:

<!-- Заглавие (title): название виджета -->
<meta name="title" content="Часы" />
<!-- Описание (description): основная функция виджета -->
<meta name="description" content="Показывает время в разных часовых поясах" />

Для загрузки виджета на Яндекс должно быть указано название виджета (title). Для добавления в каталог виджетов нужно указать основные функции виджета (description).

Примечание

Подробнее см. справочный раздел Свойства виджета.

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

<widget:preferences>
  <preference name="city" type="list" label="Показывать погоду в городе: ">
      <option value="1">Москва</option>
      <option value="2">Санкт-Петербург</option>
      <option value="3">Мурманск</option>
      <option value="4">Норильск</option>
      <option value="5">Ярославль</option>
      ...
  </preference> 
</widget:preferences>
Примечание

Подробнее см. справочный раздел Настройки виджета.

Тело виджета

Тело виджета представляет собой обычную HTML-страницу, которая может содержать скрипты, таблицы стилей и пр. Тело может храниться в том же файле, что и описание, а может - на отдельном сервере. В зависимости от этого виджеты делятся на автономные и серверные. Тело серверного виджета может быть результатом работы любого серверного языка программирования, который на выходе генерирует HTML.

См. также