此页面由 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 课堂的网址

分享到 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`	字符串	null	设置要分享到 Google 课堂的内容正文。
`courseid`	字符串	null	如果指定了此选项，则在用户点击“分享”按钮后，系统会在显示的“选择课程”菜单中将课程 ID 设为预先选择。用户可以根据需要更改此预先选择的值。
`itemtype`	`announcement`、`assignment`、`material` 或 `question`	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`	`classic`、`dark` 或 `light`	`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 课堂以完成发布。