Google 课堂插件现已面向开发者正式推出！如需了解详情，请参阅插件文档。

此页面由 Cloud Translation API 翻译。

添加“课堂”分享按钮

课堂分享按钮

您可以添加和自定义 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 课堂的网址由按钮的 url 属性决定。此属性明确定义要共享的目标网址，必须设置才能呈现分享按钮。

脚本代码参数

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

允许的参数包括：

onload: 网页加载后，网页上的所有分享按钮都会自动呈现。请参阅延迟执行 onLoad 示例。
显式: 分享按钮只能通过显式调用 gapi.sharetoclassroom.go 或 gapi.sharetoclassroom.render 呈现。

如果您将显式加载与指向您网页中特定容器的 go 和 render 调用结合使用，便可以阻止脚本遍历整个 DOM，而这可以缩短按钮的呈现时间。请参阅 gapi.sharetoclassroom.go 和 gapi.sharetoclassroom.render 示例。

共享标记属性

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

属性	值	默认	说明
`body`	string	null	设置要分享到 Google 课堂的内容正文。
`courseid`	string	null	如果已指定，则会将课程 ID 设置为在用户点击分享按钮后在“选择课程”菜单中预选。用户可以根据需要更改此预选择的值。
`itemtype`	`announcement`、`assignment`、`material` 或 `question`	null	这样会在用户首次选择课程后自动显示创建对话框（如果还指定了 `courseid`，则立即显示创建对话框）。如果学生选择了某一课程，或教师选择了自己是学生的课程，系统会忽略此值。
`locale`	符合 RFC 3066 规范的语言标记	`en-US`	设置按钮 `aria-label` 的语言，以实现无障碍功能。这不会影响用户点击按钮时显示的共享对话框语言，因为语言会受用户的浏览器偏好设置影响。
`onsharecomplete`	string	null	如果已指定，则会设置全局命名空间中在用户完成共享链接时调用的函数的名称。如果您通过形参将参数传递给 `gapi.sharetoclassroom.render`，也可以使用函数本身。此功能不适用于 Internet Explorer（见下文）
`onsharestart`	string	null	如果已指定，则会设置全局命名空间中在打开共享对话框时调用的函数的名称。如果您通过形参将参数传递给 `gapi.sharetoclassroom.render`，也可以使用函数本身。此功能不适用于 Internet Explorer（见下文）。
`size`	int	null	设置分享按钮的大小（以像素为单位）。如果省略尺寸，按钮会使用 32。
`theme`	`classic`、`dark` 或 `light`	`classic`	设置所选主题的按钮图标。
`title`	string	null	设置要共享到 Google 课堂的内容标题。
`url`	要共享的网址	null	设置要分享到“课堂”的网址。如果您使用 `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> 结束标记之前，可能会提高网页的加载速度。

是否需要在 Share 标记之前添加 `<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 指定的函数。

当您点击“课堂”分享按钮时，系统会将哪些数据发送到“课堂”？

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