您可以添加和自定义 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 ) |
将指定的容器呈现为分享按钮。
|
gapi.sharetoclassroom.go( opt_container ) |
呈现指定容器中的所有分享按钮标记和类。
仅当 parsetags 设置为 explicit (出于性能方面的原因)时,才应使用此函数。
|
示例
基本页面
<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 课堂以完成发布。