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

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

Начиная

Основная кнопка

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

/g: доля в классе

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

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

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

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

Отложенное выполнение с параметрами тега 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.go gapi.sharetoclassroom.render

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

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

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

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

Тема	Пример
Классический
Темный
Свет

Кастомизация

Мы предпочитаем, чтобы вы каким-либо образом не меняли и не переделывали значок. Однако если вы отображаете в своем приложении несколько значков сторонних социальных сетей вместе, вы можете настроить значок «Класс» в соответствии со стилем вашего приложения. Если вы это сделаете, убедитесь, что все кнопки настроены в одинаковом стиле и что все настройки соответствуют рекомендациям по фирменному оформлению Класса . Если вы хотите полностью контролировать внешний вид и поведение кнопки «Поделиться», вы можете инициировать общий доступ, используя URL-адрес следующей структуры: https://classroom.google.com/share?url={url-to-share} .

JavaScript API

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

gapi.sharetoclassroom.render(
 container,
 parameters
)

gapi.sharetoclassroom.go(
 opt_container
)

Примеры

Ниже приведены HTML-примеры реализации кнопки «Поделиться в классе».

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

<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>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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