Устаревший. Sites API устарел и может перестать работать в любой момент. Sites API может получить доступ только к классическим сайтам. С помощью Sites API нельзя получить доступ к переработанной версии Сайтов, которая была запущена 22 ноября 2016 г.

Чтобы переводить контент на ваш предпочитаемый язык, Google использует технологии на основе искусственного интеллекта. Переводы от ИИ могут содержать ошибки.

Гаджеты для Google Сайтов

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

Каждая страница Сайтов может быть контейнером гаджетов. Кроме того, в Сайтах есть Data API, который можно использовать вместе с гаджетами для создания мощных приложений. Это означает, что как разработчик гаджетов вы можете использовать Sites API для создания интересных инструментов для других веб-разработчиков и их аудиторий, а также для собственных нужд.

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

Теперь вы знаете, что {sites_name_short} – отличная платформа для распространения гаджетов. Чего же вы ждете? Начните создавать гаджеты для Сайтов прямо сейчас!

Обзор гаджета "Сайты"

В общем случае гаджеты – это небольшие утилиты, которые генерируют или извлекают внешнюю информацию для веб-страниц. В самом простом варианте гаджет представляет собой небольшой XML-файл, который извлекает информацию и позволяет одновременно использовать ее на нескольких веб-страницах. В Сайтах добавление гаджета приводит к созданию iframe, который служит каналом для передачи внешней информации. Некоторые гаджеты представляют собой не более чем фреймы, передающие информацию с другого сайта.

Более сложные гаджеты собирают динамический контент и позволяют создавать интерактивные приложения на страницах Сайтов. См. пример гаджета.

Гаджеты состоят из следующих компонентов:

Файл спецификации гаджета – XML-файл, в котором содержатся функции HTML и JavaScript.
Страница контейнера – веб-страница, на которую вставлен гаджет (в данном случае сайт Google).
Внешний источник данных . Это необязательный элемент, который может находиться в том же месте, что и XML-файл, но часто вызывается спецификацией гаджета по протоколу HTTP для предоставления результатов.

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

Хороший пример – гаджет календаря. Персонализированный гаджет календаря, скорее всего, будет по умолчанию показывать календарь вошедшего в аккаунт пользователя, а гаджет календаря на сайте может позволять соавторам выбирать из множества календарей, относящихся к определенным местоположениям.

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

Внимание! Гаджеты, созданные с помощью устаревшего API гаджетов, могут работать на Сайтах, но официально не поддерживаются. Встроенные гаджеты и гаджеты на основе фидов также не поддерживаются. Поэтому Google рекомендует создавать все гаджеты Сайтов с помощью текущей версии gadgets.*. . Подробнее:
http://igoogledeveloper.blogspot.com/2009/09/more-things-change-more-they-stay-same.html

Пример гаджета

Вот простой, но популярный гаджет Include, который представляет собой iframe для передачи другого веб-контента:

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Include gadget (iframe)" title_url="http://sites.google.com/"
          description="Include another web page in your Google Site"
          thumbnail="https://www.gstatic.com/sites-gadgets/common/images/sites-icon-gadget-thumb.png"
          screenshot="https://www.gstatic.com/sites-gadgets/common/images/sites-icon-gadget-ss.png"
          height="800" width="600" author="Google">
    <Require feature="dynamic-height"/>
  </ModulePrefs>
  <UserPref name="iframeURL" display_name="URL to content" required="true"/>
  <UserPref name="scroll" display_name="Display scrollbar" default_value="auto" datatype="enum">
    <EnumValue value="auto" display_value="Automatic"/>
    <EnumValue value="no" display_value="No"/>
    <EnumValue value="yes" display_value="Yes"/>
  </UserPref>
  <Content type="html" view="default,canvas">
  <div id='dest'><img src="http://www.google.com/ig/images/spinner.gif"></div>
  <script type="text/javascript">
  gadgets.util.registerOnLoadHandler(doRender);

  function doRender(){
    // setup variables
    var prefs = new gadgets.Prefs();
    var iframeURL = prefs.getString('iframeURL');
    var scroll = prefs.getString('scroll');
    var height = 800;
    var width = 600;

    if (gadgets.window) {
      var viewport = gadgets.window.getViewportDimensions();
      if (viewport.width) {
        var width = viewport.width;
      }
      if (viewport.height) {
        var height = viewport.height;
      }
    }

    var iframe = document.createElement('iframe');
    iframe.setAttribute('width', width + 'px');
    iframe.setAttribute('height', height + 'px');
    iframe.setAttribute('frameborder','no');
    if(scroll){
      iframe.setAttribute('scrolling', scroll);
    }
    iframe.setAttribute('src', iframeURL);

    // set the slideshow to the placeholder div
    var dest = document.getElementById('dest');
    dest.innerHTML = '';
    dest.appendChild(iframe);
  }
  </script>
  </Content>
</Module>

Подробнее о начале работы с гаджетами… API, чтобы узнать больше о тегах гаджетов и их содержимом.

Размещение гаджета

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

Вот как можно разместить гаджет:

App Engine – может хранить все файлы, необходимые для работы гаджетов. Требуется некоторая настройка, а именно создание проектов и последующая загрузка файлов. но при этом легко масштабируется на большое количество пользователей. Вы можете создать приложение для хранения всех гаджетов и другое приложение для статических файлов, включая файл app.yaml, который выглядит следующим образом:
```
application: <your app name>
version: 1
runtime: python
api_version: 1

handlers:
- url: /.*
  static_dir: static
```
Если вы поместите все файлы гаджета в статический каталог, то сможете редактировать файлы в локальном каталоге и развертывать их в App Engine каждый раз, когда вносите изменения. Если у вас есть файл /static/gadget.xml, его URL будет выглядеть так: http://<your-app-name>.appspot.com/static/gadget.xml.
Любое онлайн-хранилище по вашему выбору. Вы полностью контролируете его, но и несете за него полную ответственность. Если ваш сервер будет недоступен, пользователи гаджетов не смогут ими пользоваться.

Как создать гаджет

Гаджеты – это HTML-код и (необязательно) JavaScript, Flash или Silverlight, обернутые в XML. В руководстве для разработчиков гаджетов приведена вся необходимая информация для создания собственных гаджетов. Кроме того, шаблоны OpenSocial можно использовать для быстрого создания социальных приложений в гаджетах.

Вот как создать гаджет для Сайтов:

Выберите, где будет размещен гаджет. Подробнее о вариантах размещения гаджета рассказывается в разделе Размещение гаджета .
Создайте новый XML-файл, который будет использоваться в качестве спецификации .Для этого можно воспользоваться любым текстовым редактором.
Выберите тип контента (HTML или URL) и укажите его в XML-файле гаджета, как показано ниже.
<Content type="html">
В большинстве случаев это будет HTML, поскольку предполагается, что весь контент указан непосредственно в XML-файле. Если вы планируете предоставить контент в отдельном файле, используйте тип контента URL. Подробную информацию о различиях между ними можно найти в разделе Выбор типа контента.
Создайте контент в XML-файле гаджета или в отдельных файлах, на которые ссылается спецификация. Чтобы узнать, как изучать существующие гаджеты, ознакомьтесь с разделом Примеры гаджетов.
Задайте основные настройки гаджета, которые пользователи смогут изменять. Инструкции приведены в разделе Как задать настройки пользователя. Чтобы настроить более сложные параметры, ознакомьтесь с разделом Как разрешить пользователям настраивать расширенные параметры.
Задайте настройки модуля, которые может изменять только автор гаджета. Подробнее о настройке параметров гаджета…
Проверьте гаджет. Инструкции приведены в разделе Как протестировать гаджет.

Как встроить гаджет

Гаджеты можно встраивать в страницы Сайтов, выбирая их в каталоге гаджетов Сайтов (который синхронизируется с каталогом гаджетов iGoogle) или добавляя их URL напрямую.

Как встроить гаджет в Google Сайты

Перейдите на страницу Сайтов, на которой будет размещен новый гаджет.
Откройте страницу для редактирования.
Выберите "Вставка > Дополнительные гаджеты".
Найдите гаджет, выберите его в категориях слева или нажмите Добавить гаджет по URL и вставьте URL XML-файла. Затем нажмите Добавить.
Совет. Этот же способ добавления гаджета по URL можно использовать для встраивания гаджетов из iGoogle и других источников в интернете.
Укажите размеры гаджета, выберите нужные настройки и нажмите ОК. Гаджет будет добавлен на страницу.
Сохраните страницу, чтобы посмотреть и протестировать гаджет на сайте.

Как протестировать гаджет

После создания гаджета его нужно тщательно протестировать, прежде чем использовать самостоятельно или разрешать это другим. Проверьте гаджет вручную, создав один или несколько тестовых сайтов Google и встроив в них гаджет. Подробные инструкции приведены в разделе Как встроить гаджет. Функциональность и внешний вид гаджета зависят от сайта, на котором он размещен. Поэтому лучший способ отладки гаджета – протестировать его в контексте реального сайта Google. Попробуйте разные темы Сайтов, чтобы убедиться, что гаджет корректно отображается в каждой из них.

В процессе тестирования гаджета вы наверняка обнаружите ошибки и вам придется вносить исправления в XML-файл гаджета. Во время редактирования XML-файла кеширование гаджетов должно быть отключено. В противном случае изменения не будут показываться на странице. Спецификации гаджетов кешируются, если вы не запретите это в настройках Сайтов. Чтобы обойти кеш во время разработки, добавьте в конец URL страницы Сайтов, содержащей гаджет (но не URL файла спецификации гаджета .xml), следующий код:

 ?nocache=1

В Сайтах есть стандартный интерфейс для добавления и настройки гаджетов. При добавлении гаджета вы увидите его предварительный просмотр и все параметры UserPref, которые можно настроить. Проверьте, как работают разные значения конфигурации, и добавьте гаджет на тестовый сайт. Убедитесь, что гаджет работает на сайте правильно. Проверьте, может ли администратор сайта правильно настроить все определенные вами UserPref.

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

Как разрешить пользователям настраивать параметры

Все гаджеты могут предлагать возможность задавать основные настройки пользователя, которые указываются в разделе UserPref файла спецификации гаджета. Обычно они влияют на размеры, полосы прокрутки, границы, заголовки и настройки гаджетов, как показано на скриншоте ниже.

Настройки гаджета Сайтов

Однако во многих случаях гаджетам требуются более сложные параметры, чем те, которые можно задать с помощью стандартных компонентов UserPref. Параметры часто должны включать такие функции, как пользовательская бизнес-логика, проверки или средства выбора. Интерфейс, созданный на основе разделов гаджета UserPref, поддерживает ограниченное количество типов данных (строка, перечисление и т. д.), поэтому проверка введенных данных, например URL или дат, невозможна.

Кроме того, в контейнерах, таких как iGoogle, где зритель и редактор – одно и то же лицо, авторы гаджетов могут расширять конфигурацию в рамках стандартного представления. В Сайтах зритель не всегда является редактором, поэтому автор гаджета не может гарантировать, что у пользователя, просматривающего страницу, есть доступ к настройкам. В социальных контейнерах, таких как Сайты, изменять настройки может только автор.

В Google Сайтах базовый интерфейс настроек гаджета, созданный с помощью UserPref, можно заменить на представление конфигурации, в котором можно задать множество дополнительных настроек и типов данных, как показано на скриншоте ниже.

Вид конфигурации гаджета Сайтов

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

Разработчики могут использовать стандартные API setprefs, чтобы сохранять настройки в этом режиме. Дополнительную информацию можно найти в справочнике по XML-коду гаджетов и в разделе Сохранение состояния руководства для разработчиков. Эти представления позволяют контейнерному приложению предоставлять дополнительную информацию о конфигурации и устанавливаются в файлах спецификаций гаджета в формате XML после разделов UserPref с открывающим тегом, похожим на следующий:

  <Content type="html" view="configuration" preferred_height="150">

Например, гаджет news.xml, который предоставляет показанное выше представление конфигурации, содержит следующий раздел:

<Content type="html" view="configuration" preferred_height="300">
<style type="text/css">
  .config-options {
    margin: 10px;
  }
  .label {
    font-weight: bold;
    width: 35%;
    vertical-align: top;
  }
  .gray {
    color:#666666;
  }
  html {
    font-family:arial,sans-serif;
    font-size:0.81em;
    font-size-adjust:none;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
    line-height:1.5;
  }
  a:link, a:visited, a:active { text-decoration: none }
</style>
  <img alt="Google Web Elements" src="http://www.google.com/webelements/images/web_elements_logo.gif"/>
  <table class="config-options">
  <tr>
  <td align="left" class="label">Size:</td>
  <td align="left">
  <select id="size" onchange="Update()">
  <option selected="selected" value="300x250">Medium rectangle (300x250)</option>
  <option value="728x90">Leaderboard (728x90)</option>
  </select>
  </td>
  </tr>
  <tr>
  <td align="left" class="label">Select sections:</td>
  <td align="left">
  <table>
  <tbody><tr>
  <td><input type="checkbox" onclick="Update()" id="sec_h" value="h"/> Top Stories</td>
  <td><input type="checkbox" onclick="Update()" id="sec_w" value="w"/> World</td>
  <td><input type="checkbox" onclick="Update()" id="sec_b" value="b"/> Business</td>
  </tr><tr>
  <td><input type="checkbox" onclick="Update()" id="sec_p" value="p"/> Politics</td>
  <td><input type="checkbox" onclick="Update()" id="sec_n" value="n"/> Nation</td>
  <td><input type="checkbox" onclick="Update()" id="sec_e" value="e"/> Entertainment</td>
  </tr><tr>
  <td><input type="checkbox" onclick="Update()" id="sec_t" value="t"/> Technology</td>
  <td><input type="checkbox" onclick="Update()" id="sec_s" value="s"/> Sports</td>
  <td><input type="checkbox" onclick="Update()" id="sec_m" value="m"/> Health</td>
  </tr></tbody>
  </table>
  </td>
  </tr>
  <tr>
  <td align="left" class="label">Or create one:</td>
  <td align="left">
  <input type="text" id="query" onchange="Update()"/>
  <br/>
  <span class="gray">Example: 2010 Olympics</span>
  </td>
  </tr>
  <tr>
  <td colspan="2">
  <div id="preview" style="margin-top:10px;overflow:auto;width:100%;">
  <iframe id="preview_ifr" frameborder="0" marginwidth="0" marginheight="0" border="0"
  style="border:0;margin:0;"
  scrolling="no" allowtransparency="true"></iframe>
  </div>
  </td>
  </tr>
  </table>
  <script type="text/javascript">
  var prefs = new gadgets.Prefs();

  function getSelectedTopics() {
    var selected = [];
    var topics = ['h', 'w', 'b', 'p', 'n', 'e', 't', 's', 'm'];
    for (var i = 0; i < topics.length; i++) {
      if (document.getElementById('sec_' + topics[i]).checked) {
        selected.push(topics[i]);
      }
    }
    return selected.join(',');
  }

  function setSelectedTopics(selected) {
    if (selected && selected.length >= 0) {
      var topics = selected.split(',');
      for (var i = 0; i < topics.length; i++) {
        document.getElementById('sec_' + topics[i]).checked = true;
      }
    }
  }

  function Update() {
    var topic = getSelectedTopics();
    var query = document.getElementById('query').value;
    var size = document.getElementById('size').value;

    var url = 'http://www.google.com/uds/modules/elements/newsshow/iframe.html?rsz=large&' +
        'format=SIZE&element=true';
    var iframe = document.getElementById('preview_ifr');
    url = url.replace(/SIZE/, size);
    if (topic.length > 0) {
      url += '&topic=' + topic;
    }
    if (query.length > 0) {
      url += '&q=' + encodeURIComponent(query);
    }
    iframe.src = url;
    if (size == '728x90') {
      iframe.style.width = '728px';
      iframe.style.height = '90px'
    } else {
      iframe.style.width = '300px';
      iframe.style.height = '250px';
    }
    prefs.set('size', size);
    prefs.set('topic', topic);
    prefs.set('query', query);
    gadgets.window.adjustHeight();
  }

  function Initialize() {
    var size = '__UP_size__';
    if (size.length > 0) {
      document.getElementById('size').value = size;
    }
    var query = '__UP_query__';
    if (query.length > 0) {
      document.getElementById('query').value = query;
    }
    setSelectedTopics('__UP_topic__');
    Update();
  }

  gadgets.util.registerOnLoadHandler(Initialize);
  </script>
  </Content>

Примеры гаджетов для Сайтов с представлениями конфигурации можно найти по следующим ссылкам:
https://www.gstatic.com/sites-gadgets/news/news.xml
http://gadgets.pardonmyzinger.org/static/qrcode.xml
https://www.gstatic.com/sites-gadgets/news/youtube_news.xml

Гаджеты для Google Сайтов Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.