添加“课堂”分享按钮

课堂分享按钮

您可以添加和自定义 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.gogapi.sharetoclassroom.render 呈现。

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

共享标记属性

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

属性 默认 说明
body string null 设置要分享到 Google 课堂的内容正文。
courseid string null 如果已指定,则会将课程 ID 设置为在用户点击分享按钮后在“选择课程”菜单中预选。用户可以根据需要更改此预选择的值。
itemtype announcementassignmentmaterialquestion 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 classicdarklight 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 课堂以完成发布。