Используют ли ваши пользователи Класс с Google Meet? Ознакомьтесь с кратким руководством по скрипту приложений, в котором рассказывается, как проверить посещаемость учащихся на курсах Google Meet .

Добавьте кнопку «Поделиться в классе»

Кнопка «Поделиться в классе»

Вы можете добавить и настроить кнопку «Поделиться в Классе» в соответствии с потребностями вашего веб-сайта, например изменить размер кнопки и метод загрузки. Добавляя кнопку «Поделиться в классе» на свой веб-сайт, вы позволяете своим пользователям делиться вашим контентом со своими классами и привлекать трафик на ваш сайт.

Начиная

Простая кнопка

Самый простой способ добавить кнопку «Поделиться в классе» на свою страницу — включить необходимый ресурс JavaScript и добавить тег кнопки «Поделиться»:

<script src="https://apis.google.com/js/platform.js" async defer></script>
<g:sharetoclassroom url="http://url-to-share" size="32"></g:sharetoclassroom>

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

Вы также можете использовать HTML5-действительный тег общего доступа, установив для атрибута class значение g-sharetoclassroom и добавив префикс data- для любых атрибутов кнопок.

<div class="g-sharetoclassroom" data-size="32" data-url="..." ></div>

По умолчанию включенный скрипт проходит через DOM и отображает теги общего доступа в виде кнопок. Вы можете сократить время рендеринга на больших страницах, используя JavaScript API для обхода только одного элемента на странице или для рендеринга определенного элемента в качестве кнопки «Поделиться».

Отложенное выполнение с параметрами тега onLoad и скрипта

Установите для параметра тега скрипта parsetags значение onload (по умолчанию) или explicit значение, чтобы определить, когда выполняется код кнопки. Чтобы указать параметры тега скрипта, используйте следующий синтаксис:

<script >
  window.___gcfg = {
    parsetags: 'onload'
  };
</script>
<script src="https://apis.google.com/js/platform.js" async defer></script>

Конфигурация

Настройка URL-адреса для отправки в Класс

URL-адрес, который предоставляется Классу, определяется атрибутом url -адреса кнопки. Этот атрибут явно определяет целевой URL-адрес для совместного использования и должен быть установлен для отображения кнопки общего доступа.

Параметры тега скрипта

Эти параметры определяются в элементе <script /> , который должен запускаться перед загрузкой сценария platform.js . Параметры управляют механизмом загрузки кнопок, который используется на всей веб-странице.

Допустимые параметры:

в процессе
Все кнопки общего доступа на странице автоматически отображаются после загрузки страницы. См. пример отложенного выполнения onLoad .
явный
Кнопки общего доступа отображаются только при явных вызовах gapi.sharetoclassroom.go или gapi.sharetoclassroom.render .

Когда вы используете явную загрузку в сочетании с вызовами go и render, которые указывают на определенные контейнеры на вашей странице, вы предотвращаете обход скриптом всей DOM, что может сократить время рендеринга кнопки. См. примеры gapi.sharetoclassroom.go и gapi.sharetoclassroom.render .

Поделиться атрибутами тега

Эти параметры управляют настройками для каждой кнопки. Вы можете установить эти параметры как пары attribute=value в тегах кнопок общего доступа или как пары JavaScript key:value в вызове gapi.sharetoclassroom.render .

Атрибут Ценность По умолчанию Описание
body нить нулевой Устанавливает основной текст элемента для публикации в Классе.
courseid нить нулевой Если указано, устанавливает идентификатор курса для предварительного выбора в меню «Выбрать класс», отображаемом после того, как пользователь нажимает кнопку «Поделиться». При необходимости пользователь может изменить это предварительно выбранное значение.
itemtype announcement , assignment , material или question нулевой Это автоматически отобразит диалоговое окно создания после того, как пользователь впервые выберет курс (или сразу, если courseid указан курс). Если ученик выбирает класс или учитель выбирает класс, в котором он учится, это значение игнорируется.
locale Языковой тег, совместимый с RFC 3066 en-US Устанавливает язык для кнопки aria-label в целях доступности. Это не влияет на язык диалогового окна обмена, которое появляется, когда пользователь нажимает кнопку: на него влияют настройки браузера пользователя.
onsharecomplete нить нулевой Если указано, задает имя функции в глобальном пространстве имен, которая вызывается, когда пользователь заканчивает делиться вашей ссылкой. Если вы передаете свои аргументы через параметры в gapi.sharetoclassroom.render , вы также можете использовать саму функцию. Эта функция не работает в Internet Explorer ( см. ниже ).
onsharestart нить нулевой Если указано, задает имя функции в глобальном пространстве имен, которая вызывается при открытии диалогового окна общего доступа. Если вы передаете свои аргументы через параметры в gapi.sharetoclassroom.render , вы также можете использовать саму функцию. Эта функция не работает в Internet Explorer ( см. ниже ).
size инт нулевой Устанавливает размер кнопки «Поделиться» в пикселях. Если размер не указан, кнопка использует 32.
theme classic , dark или light classic Устанавливает значок кнопки для выбранной темы.
title нить нулевой Устанавливает название элемента для публикации в Классе.
url URL для обмена нулевой Устанавливает URL-адрес для отправки в Класс. Если вы устанавливаете этот атрибут с помощью gapi.sharetoclassroom.render , вы не должны экранировать URL-адрес.

Рекомендации по кнопке «Поделиться» в классе

Отображение кнопки «Поделиться в классе» должно соответствовать нашим рекомендациям по минимальному и максимальному размеру и соответствующим шаблонам цветов/кнопок. Кнопка поддерживает различные размеры, от минимального размера 32 пикселя до максимального 96 пикселов.

Тема Пример
Классический
Темный
Легкий

Мы предпочитаем, чтобы вы никоим образом не меняли и не переделывали значок. Но если вы одновременно отображаете несколько сторонних значков социальных сетей в своем приложении, вы можете настроить значок «Класс» в соответствии со стилем вашего приложения при условии, что все кнопки настроены с использованием аналогичного стиля.

Дополнительные сведения см. в руководстве по использованию бренда Класса .

JavaScript API

Кнопка «Поделиться» JavaScript определяет две функции рендеринга кнопок в пространстве имен gapi.sharetoclassroom . Вы должны вызвать одну из этих функций, если вы отключите автоматический рендеринг, установив для parsetags explicit значение .

Метод Описание
gapi.sharetoclassroom.render(
 container,
 parameters
)
Отображает указанный контейнер как кнопку общего доступа.
контейнер
Контейнер для отображения в качестве кнопки «Поделиться». Укажите либо идентификатор контейнера (строка), либо сам элемент DOM.
параметры
Объект, содержащий атрибуты тега в виде пар key=value . Например, {"size": "300", "theme": "light"} .
gapi.sharetoclassroom.go(
 opt_container
)
Отображает все теги и классы кнопок общего доступа в указанном контейнере. Эту функцию следует использовать только в том случае, если parsetags установлен в explicit значение, что вы можете сделать из соображений производительности.
opt_container
Контейнер, содержащий теги кнопок общего доступа для отображения. Укажите либо идентификатор контейнера (строка), либо сам элемент DOM. Если параметр opt_container не указан, отображаются все теги кнопок общего доступа на странице.

Примеры

Основная страница

<html>
  <head>
    <title>Classroom demo: Basic page</title>
    <link href="http://www.example.com" />
    <script src="https://apis.google.com/js/platform.js" async defer>
    </script>
  </head>
  <body>
    <g:sharetoclassroom size=32 url="http://google.com"></g:sharetoclassroom>
  </body>
</html>

Явно загружать теги в подмножестве DOM

<html>
  <head>
    <title>Demo: Explicit load of a Classroom share button</title>
    <link href="http://www.example.com" />
    <script>
      window.___gcfg = {
        parsetags: 'explicit'
      };
    </script>
    <script src="https://apis.google.com/js/platform.js">
    </script>
  </head>
  <body>
    <div id="content">
      <div class="g-sharetoclassroom" data-size="32" data-url="..." ></div>
    </div>
    <script>
      gapi.sharetoclassroom.go("content");
    </script>
  </body>
</html>

Явный рендеринг

<html>
  <head>
    <title>Demo: Explicit render of a Classroom share button</title>
    <link href="http://www.example.com" />
    <script>
      window.___gcfg = {
        parsetags: 'explicit'
      };
      function renderWidget() {
        gapi.sharetoclassroom.render("widget-div",
            {"url": "http://www.google.com"} );
      }
    </script>
    <script src="https://apis.google.com/js/platform.js">
    </script>
  </head>
  <body>
    <a href="#" onClick="renderWidget();">Render the Classroom share button</a>
    <div id="widget-div"></div>
  </body>
</html>

Часто задаваемые вопросы

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

Как протестировать интеграцию кнопки «Поделиться» в Классе?

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

Могу ли я разместить на одной странице несколько кнопок с разными URL-адресами?

Да. Используйте атрибут url -адреса, указанный в параметрах тега общего доступа, чтобы указать URL-адрес, которым нужно поделиться в Классе.

Где я должен разместить кнопку «Поделиться» на своих страницах?

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

Влияет ли на задержку положение <script> на странице?

Нет, размещение <script> не оказывает существенного влияния на задержку. Однако, поместив тег внизу документа, непосредственно перед закрывающим тегом </body> , вы можете повысить скорость загрузки страницы.

Нужно ли включать тег <script> перед тегом общего доступа?

Нет, <script> можно разместить в любом месте страницы.

Нужно ли включать тег < <script> > перед тем, как другой <script> вызовет один из методов в разделе JavaScript API?

Да, если вы используете какой-либо из методов JavaScript API, их необходимо разместить на странице после включения <script> . Вы также не можете использовать async defer ни с одним из методов JavaScript API.

Нужно ли использовать атрибут url ?

Атрибут url обязателен. Не указание url -адреса явным образом приведет к тому, что кнопка «Поделиться» не будет отображаться. Дополнительную информацию см. в разделе « Поделиться целевым URL-адресом ».

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

Для кода кнопки «Поделиться» требуется сценарий с серверов Google. Вы можете получить эту ошибку, включив скрипт через http:// на страницу, которая загружается через https:// . Мы рекомендуем использовать https:// для включения скрипта:

<script src="https://apis.google.com/js/platform.js" async defer></script>

Какие веб-браузеры поддерживаются?

Кнопка общего доступа в Классе поддерживает те же веб-браузеры, что и веб-интерфейс Класса, такие браузеры, как Chrome, Firefox®, Internet Explorer® или Safari®. Примечание. Функции, указанные для onsharestart и onsharecomplete, не вызываются для пользователей Internet Explorer.

Какие данные отправляются в Класс, когда вы нажимаете кнопку «Поделиться в Классе»?

Когда пользователь нажимает кнопку «Поделиться», ему предлагается войти в свою учетную запись G Suite for Education. После аутентификации учетная запись пользователя и атрибут url отправляются в Classroom для завершения публикации.