您的用户是通过 Google Meet 使用 Google 课堂吗?请查看 Apps 脚本快速入门 - 了解如何在 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 协议加载,且可从页面上的任何位置包含且不受限制。如需了解详情,请参阅常见问题解答

您还可以使用 HTML5 有效的分享标记,只需将类属性设置为 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 属性决定。 此属性会明确定义要共享的目标网址,必须设置此网址才能呈现分享按钮。

脚本代码参数

这些参数是在 <script /> 元素中定义的,该元素必须在加载 platform.js 脚本之前运行。这些参数用于控制整个网页使用的按钮加载机制。

允许的参数为:

onload
网页加载后,页面上的所有分享按钮都会自动呈现。 请参阅延迟加载 onLoad 示例
显式
共享按钮仅在显式调用 gapi.sharetoclassroom.gogapi.sharetoclassroom.render 的情况下渲染。

当您将显式加载与指向网页特定容器的 go 和 render 调用结合使用时,可防止该脚本遍历整个 DOM,从而缩短按钮渲染时间。请参阅 gapi.sharetoclassroom.gogapi.sharetoclassroom.render 示例

共享标记属性

这些参数用于控制每个按钮的设置。您可以在分享按钮代码上将这些参数设置为 attribute=value 对,也可以在调用 gapi.sharetoclassroom.render 时将其设为 JavaScript key:value 对。

特性 默认 说明
body 字符串 null 设置要分享到 Google 课堂的内容正文。
courseid 字符串 null 如果指定此参数,则系统会在用户点击“分享”按钮后,在“选择类”菜单中预先选择课程 ID。用户可以根据需要更改此预选值。
itemtype announcementassignmentmaterialquestion null 这将在用户首次选择课程后自动显示创建对话框(或者,如果还指定了 courseid,则立即显示)。如果学生选择课程,或者教师选择学生所在的课程,此值会被忽略。
locale 符合 RFC 3066 的语言标记 en-US 为按钮 aria-label 设置语言,以实现无障碍功能。但这并不会影响用户点击该按钮时显示的共享对话框的语言:它受用户的浏览器偏好设置的影响。
onsharecomplete 字符串 null 如果已指定,则会设置在用户分享链接时调用的全局命名空间中的函数名称。如果您通过参数向 gapi.sharetoclassroom.render 传递参数,也可以使用函数本身。此功能无法在 Internet Explorer 中使用(请参阅下文
onsharestart 字符串 null 如果已指定,则会设置共享对话框中打开时调用的全局命名空间中函数的名称。如果您通过参数向 gapi.sharetoclassroom.render 传递参数,也可以使用函数本身。此功能在 Internet Explorer 中使用(请参阅下文)。
size int null 设置分享按钮的尺寸(以像素为单位)。如果省略尺寸,该按钮将使用 32。
theme classicdarklight classic 设置所选主题的按钮图标。
title 字符串 null 设置要分享到 Google 课堂的内容标题。
url 要共享的网址 null 设置分享到 Google 课堂的网址。如果您使用 gapi.sharetoclassroom.render 设置此属性,则不应对网址进行转义。

Google 课堂分享按钮指南

“课堂”分享按钮的显示方式符合我们的最小尺寸指南和相关颜色/按钮模板要求。该按钮支持各种尺寸,从最小 32 像素到最多 96 像素。

主题 示例
经典版
深色
浅色

我们建议您不要以任何方式更改或重新制作该图标。但是,如果您在应用中同时显示多个第三方社交图标,则可以自定义 Google 课堂图标,使其与应用的样式相匹配,前提是所有按钮都使用相似的样式进行自定义。

有关详情,请参阅 Google 课堂品牌推广指南

JavaScript API

分享按钮 JavaScript 在 gapi.sharetoclassroom 命名空间下定义了两个按钮呈现函数。如果您通过将 parsetag 设置为 explicit 来停用自动呈现功能,则必须调用其中一个函数。

方法 说明
gapi.sharetoclassroom.render(
 container,
 parameters
)
将指定的容器呈现为分享按钮。
容器
呈现为分享按钮的容器。指定容器的 ID(字符串)或 DOM 元素本身。
参数
key=value 对的形式包含标记属性的对象。例如,{"size": "300", "theme": "light"}
gapi.sharetoclassroom.go(
 opt_container
)
呈现指定容器中的所有分享按钮代码和类。只有在 parsetags 设置为 explicit 时(出于性能方面的原因),您才能使用此功能。
opt_container
包含要呈现的分享按钮代码的容器。请指定容器的 ID(字符串)或 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>

常见问题解答

以下常见问题解答介绍了技术注意事项和实现细节。如需其他资源,请参阅常规常见问题解答

如何测试 Google 课堂分享按钮集成?

您可以申请 Google 课堂测试帐号以通过集成测试分享到 Google 课堂。

能否在一个网页上放置多个网址均不同的按钮?

可以。使用分享代码参数中指定的 url 属性指明要分享到课堂的网址。

分享按钮应位于网页上的哪个位置?

您最了解自己的网页和用户,因此,我们建议您将此按钮放置在您认为最有效的位置。首屏、网页标题附近以及靠近分享链接的位置通常都是不错的选择。此外,将分享按钮放置在一段创建的内容的末尾和开头处也可能会有所帮助。

<script> 标记在网页中的位置是否有任何延迟影响?

不会,<script> 标记的位置不会显著影响延迟时间。但是,如果将此标记放置在文档底部,紧挨着 </body> 结束标记之前,便可能会提高网页的加载速度。

是否需要在分享标记之前添加 <script> 标记?

不是,<script> 标记可以包含在网页中的任何位置。

是否需要在另一个 <script> 代码调用 JavaScript API 部分中的任一方法之前添加 <script> 代码?

可以。如果您使用任何 JavaScript API 方法,则需要在包含 <script> 之后将其添加到网页中。此外,不能将 async defer 与任何 JavaScript API 方法一起使用。

我需要使用 url 属性吗?

url 属性是必需的。如果未明确设置 url,则分享按钮将无法呈现。如需了解详情,请参阅共享目标网址

我的部分用户在查看包含分享按钮的网页时,会收到安全警告。如何解决该问题?

分享按钮代码需要使用 Google 服务器的脚本。通过在通过 https:// 加载的网页上使用 http:// 添加脚本,您可能会收到此错误。我们建议使用 https:// 来包含脚本:

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

支持哪些网络浏览器?

“课堂”分享按钮支持的浏览器与 Google 课堂网页界面、Chrome、Firefox®、Internet Explorer® 或 Safari® 等浏览器相同。注意:系统不会针对 Internet Explorer 用户调用为 onsharestart 和 onsharecomplete 指定的函数。

点击“课堂”分享按钮后,系统会将哪些数据发送到 Google 课堂?

当用户点击分享按钮时,系统会提示他们使用自己的 G Suite 教育版帐号登录。进行身份验证后,系统会将用户帐号和 url 属性发送到 Google 课堂以完成发布。