Google Classroom 外掛程式現已全面開放開發人員使用！詳情請參閱外掛程式說明文件。

本頁面由 Cloud Translation API 翻譯而成。

新增 Classroom 分享按鈕

Classroom 分享按鈕

您可以根據網站需求 (例如修改按鈕大小和載入技巧) 新增及自訂 Classroom 分享按鈕。只要將 Classroom 分享按鈕加入您的網站，使用者就能將內容分享至自己的課程，為您的網站帶來流量。

開始使用

簡易按鈕

如要在網頁中加入 Classroom 分享按鈕，最簡單的方法是加入必要的 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 通訊協定載入，且可由網頁上的任何位置加入，不受限制。詳情請參閱常見問題。

您也可以使用 HTML5 有效的共用標記，方法是將類別屬性設為 g-sharetoclassroom，並在任何按鈕屬性前面加上 data-。

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

設定

設定要分享到 Classroom 的網址

分享到 Classroom 的網址取決於按鈕的 url 屬性。這項屬性會明確定義要共用的目標網址，且必須設定才能顯示分享按鈕。

指令碼代碼參數

這些參數會在載入 platform.js 指令碼前必須執行的 <script /> 元素內定義。參數可控制用於整個網頁的按鈕載入機制。

允許使用的參數如下：

onload: 頁面載入後，所有分享按鈕都會自動顯示。請參閱延遲執行 onLoad 範例。
煽情露骨內容: 只有在明確呼叫 gapi.sharetoclassroom.go 或 gapi.sharetoclassroom.render 時，分享按鈕才會算繪。

當您使用明確載入功能搭配 Go 及轉譯指向網頁中特定容器的呼叫時，指令碼就無法週遊整個 DOM，這可以縮短按鈕轉譯時間。請參閱 gapi.sharetoclassroom.go 和 gapi.sharetoclassroom.render 範例。

分享標記屬性

這些參數可控制每個按鈕的設定。您可以在分享按鈕標記中將這些參數設為 attribute=value 組合，或在對 gapi.sharetoclassroom.render 的呼叫中，將 JavaScript key:value 配對設為組合。

屬性	值	預設	說明
`body`	字串	空值	設定要分享到 Classroom 的項目內文。
`courseid`	字串	空值	如果有指定，請在使用者點選分享按鈕後，顯示「選擇課程」選單中的「課程 ID」預先選取。使用者可視需要變更這個預先選取的值。
`itemtype`	`announcement`、`assignment`、`material` 或 `question`	空值	在使用者首次選取課程後，系統就會自動顯示建立對話方塊 (如果同時指定了 `courseid`，則會立即顯示)。如果學生選擇課程，或老師選擇學生所屬的課程，這個值將遭到忽略。
`locale`	符合 RFC 3066 規範的語言標記	`en-US`	設定按鈕 `aria-label` 的語言，以便使用無障礙功能。這不會影響使用者點選按鈕時顯示的分享對話方塊語言，因為其語言會影響使用者的瀏覽器偏好設定。
`onsharecomplete`	字串	空值	如果有指定，系統會設定使用者完成共用連結時呼叫的全域命名空間中呼叫的函式名稱。如果您將引數透過參數傳遞至 `gapi.sharetoclassroom.render`，也可以使用函式本身。這項功能不適用於 Internet Explorer (參閱下文)
`onsharestart`	字串	空值	如已指定，系統會設定在開啟分享對話方塊時呼叫的全域命名空間中的函式名稱。如果您將引數透過參數傳遞至 `gapi.sharetoclassroom.render`，也可以使用函式本身。這項功能不適用於 Internet Explorer (參閱下文)。
`size`	int	空值	設定分享按鈕的大小 (以像素為單位)。如果省略大小，按鈕使用的尺寸會是 32。
`theme`	`classic`、`dark` 或 `light`	`classic`	設定所選主題的按鈕圖示。
`title`	字串	空值	設定要分享到 Classroom 的項目標題。
`url`	要分享的網址	空值	設定要分享到 Classroom 的網址。如果使用 `gapi.sharetoclassroom.render` 設定這個屬性，請勿逸出網址。

Classroom 分享按鈕規範

Classroom 分享按鈕的顯示方式必須符合我們的最小尺寸指南以及相關顏色/按鈕範本。按鈕支援多種尺寸，從最小尺寸為 32 像素到最大 96 像素。

主題	範例
傳統版
深色
淺色

自訂

建議您不要以任何方式變更或重新調整圖示。不過，如果您在應用程式中同時顯示多個第三方社群媒體圖示，可以配合應用程式樣式自訂 Classroom 圖示。如果是這樣，請確保所有按鈕都使用相似的樣式自訂，且所有自訂項目都符合 Classroom 品牌宣傳指南。如要完全控制共用按鈕的外觀和行為，可以透過下列結構的網址啟動共用：https://classroom.google.com/share?url={url-to-share}。

JavaScript API

共用按鈕 JavaScript 會定義 gapi.sharetoclassroom 命名空間下的兩個按鈕轉譯函式。如果您要將剖析標記設為 explicit 來停用自動轉譯功能，則必須呼叫其中一個函式。

方法	說明
gapi.sharetoclassroom.render( container, parameters )	將指定容器轉譯為共用按鈕。容器要顯示為共用按鈕的容器。您可以指定容器 (字串) 或 DOM 元素本身的 ID。參數包含做為 `key=value` 組合標記屬性的物件。例如 `{"size": "300", "theme": "light"}`。
gapi.sharetoclassroom.go( opt_container )	在指定容器中轉譯所有分享按鈕標記和類別。只有在 `parsetags` 設為 `explicit` 時，才能使用這個函式，而這可能會基於效能考量。 opt_container 這個容器包含要顯示的分享按鈕代碼。請指定容器的 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>

常見問題

下列常見問題將說明技術考量和實作詳情。如需其他資源，請參閱一般常見問題。

如何測試 Classroom 分享按鈕整合？

您可以要求 Classroom 測試帳戶測試從整合服務分享到 Classroom 的效果。

我可以在單一網頁上放置多個按鈕，但這些按鈕各自擁有不同的網址嗎？

可以，請使用分享標記參數中指定的 url 屬性，指出要分享到 Classroom 的網址。

我應該將分享按鈕放在網頁的哪個位置？

您最瞭解自己的網頁和使用者，因此建議您將按鈕放在最有效的位置。例如不需捲動位置、網頁標題附近和分享連結附近，通常都是適合的位置。將分享按鈕放在所建立內容的結尾或開頭，也是很有效的做法。

`<script>` 標記在網頁中的位置是否有任何延遲？

不會，<script> 標記的位置不會受到重大延遲影響。不過，將標記放在文件底部，緊接在 </body> 關閉標記前面，可以加快頁面載入速度。

是否需要在分享標記之前加上 `<script>` 標記？

不可以，您可以在網頁中任何位置加入 <script> 標記。

是否需要在另一個 `<script>` 標記之前加入 `<script>` 標記，才能呼叫 JavaScript API 區段中的任一方法？

是的，如果您使用任何 JavaScript API 方法，這些方法都必須放在 <script> 納入之後的網頁中。您也可以將 async defer 與任何 JavaScript API 方法搭配使用。

我需要使用 `url` 屬性嗎？

url 為必要屬性。未明確設定 url 會導致分享按鈕無法顯示。詳情請參閱「共用目標網址」一文。

我的部分使用者在瀏覽含有分享按鈕的網頁時，收到安全性警告。如何移除安全性警告？

分享按鈕程式碼需要 Google 伺服器的指令碼，您可能會透過 http:// 在透過 https:// 載入的網頁中包含指令碼，而收到這個錯誤。建議您使用 https:// 來加入指令碼：

<script src="https://apis.google.com/js/platform.js" async defer></script>

Google 作業支援哪些網路瀏覽器？

Classroom 分享按鈕支援與 Classroom 網頁介面相同的網路瀏覽器，以及 Chrome、Firefox®、Internet Explorer® 或 Safari® 等瀏覽器。注意：系統不會呼叫 onsharestart 和 onsharecomplete 指定的函式。

您點選 Classroom 分享按鈕後，系統會將哪些資料傳送至 Classroom？

使用者點選分享按鈕時，系統會提示他們使用 G Suite 教育版帳戶登入。驗證完畢後，系統會將使用者帳戶和 url 屬性傳送至 Classroom，以便完成貼文。