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

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

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

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

Hello, world!

В данном примере рассматривается процесс создания виджета, который выводит на экран строку "Hello, world!". Будет описан процесс загрузки виджета и особенности его добавления в каталог.

Из чего состоит виджет?

Посмотрите на следующий код:

<?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="title" content="Hello, World!" />
    <meta name="description" content="Показывает строку Hello, world!"/>
  </head>
  <body style="margin:0">
    <!-- Тело виджета -->
    <p>Hello, world!</p>
  </body>
</html>

Это - готовый виджет.

Данный XHTML-файл содержит:

Описание виджета
Описание содержит свойства виджета, включая название, краткое описание функций и т. п. Виджет должен содержать как минимум свойство title (название), необходимое для загрузки виджета на Яндекс:
<meta name="title" content="Hello, World!" />
Примечание
Описание также может содержать настройки, о которых рассказано в примере Конвертор величин измерения расстояния.
Тело виджета
В теле виджета находится HTML-код, скрипты и таблицы стилей, реализующие функции виджета. В нашем примере тело состоит из одной строки:
<p>Hello, world!</p>

Первые строки файла содержат служебную информацию: 

<?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/"  >
  ...
</html>
Внимание!
Нужно обязательно указать кодировку UTF-8.

Эти строки лучше не изменять без конкретного понимания того, что вы делаете.

См. также

Как создать свой виджет "Hello, world!"?

Создайте пустой файл с расширением *.html и скопируйте в него код виджета, приведенный выше. Сохраните файл. Теперь этот файл можно просмотреть в браузере.

Примечание
Файл с расширением *.html открывается вашим браузером по умолчанию. Чтобы иметь возможность редактировать его текст, щелкните на файле правой кнопкой мыши и выберите пункт меню Открыть с помощью -> Выбрать программу... и из списка программ выберите текстовый редактор.

Сейчас виджет выглядит достаточно буднично. Добавьте к тегу <body> следующий атрибут:

<body style="background-color:#ffcc00; color:blue; margin:0;">

Теперь текст "Hello, world!" будет отображаться синими буквами на ярко-желтом фоне.

Теперь поэкспериментируйте со свойствами виджета. Например, по умолчанию высота виджета равна 300 пикселов. Этого явно много для отображения одной строки текста. Чтобы решить эту проблему, можно воспользоваться свойством виджета height ("высота"). Добавьте к свойствам виджета следующую строку:

<meta name="height" content="60" />

После загрузки на Яндекс виджет будет отображаться с высотой 60 пикселов.

Текст файла должен выглядеть следующим образом:

<?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="title" content="Hello, World!" />
    <meta name="description" content="Показывает строку Hello, world!"/>
    <meta name="height" content="60" />
  </head>
  <body style="background-color:#ffcc00; color:blue; margin:0;">
    <p>Hello, world!</p>
  </body>
</html>

На данный момент в браузере должна отображаться желтая страница с текстом в верхнем левом углу. Виджет готов, нужно лишь загрузить его на сервер Яндекса, чтобы созданная страница отображалась в специально отведенном для нее окне (<iframe>).

См. также

Как загрузить виджет на Яндекс?

  1. Зайдите в кабинет разработчика по адресу http://wdgt.yandex.ru. Для входа в кабинет нужно указать логин и пароль на Яндексе.
  2. Перейдите по ссылке Создать виджет.
  3. Примите условия пользовательского соглашения.
  4. Загрузите данные виджета:
    • XHTML-файл виджета;
    • картинку для каталога.

Если загрузка прошла удачно, вы будете перенаправлены на страницу редактирования виджета, на которой вы сможете:

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

Как пользователи смогут установить мой виджет?

Если круг пользователей заранее известен, можно просто поделиться с ними ссылкой на виджет. Перейдя по ней, любой пользователь сможет добавить виджет к себе на страницу.

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

См. также

И как это работает?

Когда пользователь устанавливает виджет, на его страницу добавляется элемент <iframe>, в который загружается тело виджета. Созданный в данном примере виджет будет выглядеть следующим образом:

См. также