您的用户是通过 Google Meet 使用 Google 课堂吗?请查看 Apps 脚本快速入门 - 了解如何在 Google Meet 课程中查看学生出席情况

添加“课堂”分享按钮

使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。

课堂分享按钮

您可以添加和自定义 Google 课堂分享按钮(例如修改按钮大小和加载方式),以满足网站的需求。通过将 Google 课堂分享按钮添加到您的网站,您可以允许用户将您的内容分享到课程,并为您的网站吸引流量。

开始使用

简单的按钮

要在网页上添加“课堂”分享按钮,最简单的方法就是添加必要的 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 协议加载,并且可从页面上的任何位置随意添加,不受限制。如需了解详情,请参阅常见问题解答

您还可以通过将类属性设为 g-sharetoclassroom,并在任何按钮属性前添加 data- 作为 HTML5 有效的分享标记。

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

配置

设置要分享到 Google 课堂的网址

分享到 Google 课堂的网址由该按钮的 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 设置此属性,则不应对该网址进行转义。

课堂分享按钮指南

“课堂分享”按钮的显示应遵循我们的大小下限准则以及相关颜色/按钮模板。该按钮支持多种尺寸,从最小 32 像素到最多 96 像素。

主题 示例
经典版
深色
浅色

自定义

建议您不要更改或重新制作此图标。但是,如果您同时在应用中显示多个第三方社交图标,则可以自定义 Google 课堂图标,以便与应用的样式相匹配。如果您这样做,请确保所有按钮都使用相似的样式进行自定义,并且所有自定义设置都遵循课堂品牌推广指南。如果您要完全控制分享按钮的外观和行为,可以通过以下结构的网址启动分享:https://classroom.google.com/share?url={url-to-share}

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(出于性能方面的原因)时,才应使用此函数。
选择启用容器
包含要呈现的分享按钮代码的容器。请指定容器(字符串)的 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 属性来指明要分享到 Google 课堂的网址。

分享按钮应放置在网页上的什么位置?

您最了解自己的网页和用户,因此我们建议您将该按钮放置在您认为能获得最佳效果的地方。首屏、网页标题附近以及靠近共享链接的位置通常都是不错的位置。将分享按钮放置在创建内容的末尾和开头也可以非常有效。

<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 课堂以完成发布。