Người dùng của bạn có đang sử dụng Lớp học với Google Meet không? Hãy tham khảo bài viết hướng dẫn nhanh về Apps Script để biết cách điểm danh học viên trong các khóa học của Google Meet.

Thêm Nút Chia sẻ Lớp học

Nút Chia sẻ với Lớp học

Bạn có thể thêm và tùy chỉnh nút chia sẻ Lớp học để đáp ứng nhu cầu của trang web, chẳng hạn như sửa đổi kích thước của nút và kỹ thuật tải. Bằng cách thêm nút chia sẻ Lớp học vào trang web của mình, bạn cho phép người dùng chia sẻ nội dung của bạn với các lớp học và tăng lưu lượng truy cập vào trang web.

Bắt đầu

Một nút đơn giản

Phương thức dễ dàng nhất để đưa nút chia sẻ Lớp học vào trang của bạn là bao gồm tài nguyên JavaScript cần thiết và thêm thẻ nút chia sẻ:

<script src="https://apis.google.com/js/platform.js" async defer></script>
<g:sharetoclassroom url="http://url-to-share" size="32"></g:sharetoclassroom>

Tập lệnh phải được tải bằng giao thức HTTPS và có thể được đưa vào từ bất kỳ điểm nào trên trang mà không bị hạn chế. Để biết thêm thông tin, hãy xem phần Câu hỏi thường gặp.

Bạn cũng có thể sử dụng thẻ chia sẻ hợp lệ HTML5 bằng cách đặt thuộc tính lớp thành g-sharetoclassroom, rồi đặt tiền tố cho các thuộc tính nút bất kỳ trong data-.

<div class="g-sharetoclassroom" data-size="32" data-url="..." ></div>

Theo mặc định, tập lệnh đã bao gồm sẽ truyền tải DOM và hiển thị thẻ chia sẻ dưới dạng nút. Bạn có thể cải thiện thời gian kết xuất trên các trang lớn bằng cách sử dụng API JavaScript để chuyển qua một phần tử duy nhất trong trang hoặc hiển thị một phần tử cụ thể dưới dạng nút chia sẻ.

Quá trình thực thi bị trì hoãn bằng onLoad và các thông số thẻ tập lệnh

Đặt parsetags thông số thẻ tập lệnh thành onload (mặc định) hoặc explicit để xác định thời điểm thực thi mã nút. Để chỉ định thông số thẻ tập lệnh, hãy sử dụng cú pháp sau:

<script >
  window.___gcfg = {
    parsetags: 'onload'
  };
</script>
<script src="https://apis.google.com/js/platform.js" async defer></script>

Cấu hình

Đặt URL để chia sẻ với Lớp học

URL được chia sẻ với Lớp học được xác định bằng thuộc tính url của nút. Thuộc tính này xác định rõ ràng URL mục tiêu để chia sẻ và phải được đặt để hiển thị nút chia sẻ.

Thông số thẻ tập lệnh

Các thông số này được xác định trong phần tử <script /> phải chạy trước khi tải tập lệnh platform.js. Các thông số này kiểm soát cơ chế tải nút được sử dụng trên toàn bộ trang web.

Các thông số được phép là:

tải
Tất cả các nút chia sẻ trên trang sẽ tự động hiển thị sau khi trang tải. Xem ví dụ về thực thi onLoad trì hoãn.
tục tĩu
Các nút chia sẻ chỉ hiển thị với cuộc gọi rõ ràng đến gapi.sharetoclassroom.go hoặc gapi.sharetoclassroom.render.

Khi sử dụng tải rõ ràng cùng với lệnh gọi đi và hiển thị trỏ đến các vùng chứa cụ thể trên trang của mình, bạn sẽ ngăn tập lệnh di chuyển toàn bộ DOM, điều này có thể cải thiện thời gian hiển thị nút. Xem ví dụ gapi.sharetoclassroom.gogapi.sharetoclassroom.render.

Chia sẻ các thuộc tính thẻ

Các thông số này kiểm soát các tùy chọn cài đặt cho mỗi nút. Bạn có thể đặt các thông số này ở dạng cặp attribute=value trên thẻ nút chia sẻ hoặc khi cặp key:value của JavaScript trong lệnh gọi tới gapi.sharetoclassroom.render.

Thuộc tính Giá trị Mặc định Mô tả
body string null Thiết lập văn bản nội dung của mục để chia sẻ với Lớp học.
courseid string null Nếu bạn chỉ định, hãy đặt Mã khóa học để chọn trước trong trình đơn "quot;Select class" hiển thị sau khi người dùng nhấp vào nút chia sẻ". Người dùng có thể thay đổi giá trị được chọn trước này, nếu cần.
itemtype announcement, assignment, material hoặc question null Thao tác này sẽ tự động hiện hộp thoại tạo sau khi người dùng chọn khóa học lần đầu tiên (hoặc ngay lập tức nếu courseid được chỉ định). Nếu học viên chọn một lớp hoặc giáo viên chọn một lớp mà học viên đó là học viên, thì giá trị này sẽ bị bỏ qua.
locale Thẻ ngôn ngữ tuân thủ tiêu chuẩn RFC 3066 en-US Đặt ngôn ngữ cho nút aria-label cho mục đích hỗ trợ tiếp cận. Điều này không ảnh hưởng đến ngôn ngữ của hộp thoại chia sẻ xuất hiện khi người dùng nhấp vào nút: bị ảnh hưởng bởi tùy chọn trình duyệt của người dùng.
onsharecomplete string null Nếu được chỉ định, hãy đặt tên của hàm trong vùng chứa tên chung được gọi khi người dùng chia sẻ xong đường liên kết của bạn. Nếu chuyển các đối số thông qua tham số cho gapi.sharetoclassroom.render, bạn cũng có thể dùng một hàm. Tính năng này không hoạt động trên Internet Explorer (xem bên dưới)
onsharestart string null Nếu được chỉ định, hãy đặt tên của một hàm trong vùng chứa tên chung được gọi khi hộp thoại chia sẻ mở ra. Nếu chuyển các đối số thông qua tham số cho gapi.sharetoclassroom.render, bạn cũng có thể dùng một hàm. Tính năng này không hoạt động trên Internet Explorer (xem bên dưới).
size int null Đặt kích thước bằng pixel của nút chia sẻ. Nếu bỏ qua kích thước, nút sẽ sử dụng 32.
theme classic, dark hoặc light classic Đặt biểu tượng nút cho giao diện đã chọn.
title string null Đặt tiêu đề mục để chia sẻ với Lớp học.
url URL để chia sẻ null Đặt URL để chia sẻ với Lớp học. Nếu đặt thuộc tính này bằng gapi.sharetoclassroom.render, thì bạn không được thoát URL.

Nguyên tắc về nút chia sẻ trong Lớp học

Việc hiển thị Nút chia sẻ Lớp học phải tuân thủ nguyên tắc về kích thước tối thiểu và các mẫu màu/nút có liên quan. Nút này hỗ trợ nhiều kích thước, từ kích thước tối thiểu là 32 pixel đến tối đa là 96 pixel.

Giao diện Ví dụ:
Cổ điển
Tối
Sáng

Bạn không nên thay đổi hoặc tạo lại biểu tượng theo bất kỳ cách nào. Tuy nhiên, nếu hiển thị nhiều biểu tượng mạng xã hội bên thứ ba trên ứng dụng của mình, thì bạn có thể tùy chỉnh biểu tượng Lớp học cho phù hợp với kiểu của ứng dụng, miễn là tất cả các nút đều được tùy chỉnh theo kiểu tương tự.

Vui lòng tham khảo Nguyên tắc về thương hiệu của Lớp học để biết thêm thông tin.

API JavaScript

JavaScript của nút chia sẻ xác định 2 hàm hiển thị nút trong vùng chứa tên gapi.sharetoclassroom. Bạn phải gọi một trong những hàm này nếu tắt tính năng tự động hiển thị bằng cách đặt thẻ phân tích cú pháp thành explicit.

Phương thức Mô tả
gapi.sharetoclassroom.render(
 container,
 parameters
)
Hiển thị vùng chứa được chỉ định dưới dạng nút chia sẻ.
vùng chứa
Vùng chứa sẽ hiển thị dưới dạng nút chia sẻ. Chỉ định mã nhận dạng của vùng chứa (chuỗi) hoặc chính phần tử DOM.
thông số
Một đối tượng chứa các thuộc tính thẻ dưới dạng các cặp key=value. Ví dụ: {"size": "300", "theme": "light"}.
gapi.sharetoclassroom.go(
 opt_container
)
Hiển thị tất cả thẻ và lớp của nút chia sẻ trong vùng chứa được chỉ định. Bạn chỉ nên dùng hàm này nếu đã đặt parsetags thành explicit vì lý do hiệu suất.
vùng chứa ưu tiên
Vùng chứa chứa các thẻ nút chia sẻ để hiển thị. Chỉ định mã nhận dạng của vùng chứa (chuỗi) hoặc phần tử DOM. Nếu thông số opt_container bị bỏ qua, thì tất cả các thẻ nút chia sẻ trên trang sẽ hiển thị.

Ví dụ

Trang cơ bản

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

Tải thẻ một cách rõ ràng trong một nhóm nhỏ 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>

Hiển thị rõ ràng

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

Câu hỏi thường gặp

Các câu hỏi thường gặp sau đây giải quyết các vấn đề kỹ thuật và chi tiết triển khai. Để xem thêm tài nguyên, hãy xem Câu hỏi thường gặp chung.

Làm cách nào để kiểm tra việc tích hợp nút chia sẻ Lớp học?

Bạn có thể yêu cầu các tài khoản thử nghiệm Lớp học để thử nghiệm tính năng chia sẻ với Lớp học từ quá trình tích hợp của bạn.

Tôi có thể đặt nhiều nút trên một trang mà tất cả các URL có chung một URL không?

Có. Sử dụng thuộc tính url như đã chỉ định trong các thông số thẻ chia sẻ để cho biết URL mà bạn muốn chia sẻ với Lớp học.

Tôi nên đặt nút chia sẻ ở đâu trên các trang của mình?

Bạn biết rõ nhất về trang của mình và người dùng, vì vậy, bạn nên đặt nút ở vị trí phù hợp nhất. Trong màn hình đầu tiên, gần tiêu đề của trang và gần với các đường liên kết chia sẻ thường là một vị trí tốt. Bạn cũng có thể đặt nút chia sẻ ở cả cuối và cuối một nội dung đã tạo.

Vị trí của thẻ <script> trên trang có tác động gì không?

Không. Vị trí của thẻ <script> không ảnh hưởng nhiều đến độ trễ. Tuy nhiên, bằng cách đặt thẻ ở cuối tài liệu, ngay trước thẻ đóng </body>, bạn có thể cải thiện tốc độ tải của trang.

Thẻ <script> có cần được đưa vào trước thẻ chia sẻ không?

Không, bạn có thể đưa thẻ <script> vào mọi vị trí trên trang.

Thẻ <script> có cần được đưa vào trước khi một thẻ <script> khác gọi một trong các phương thức trong phần API JavaScript không?

Có, nếu bạn sử dụng bất kỳ phương thức API JavaScript nào, thì các phương thức đó cần được đặt trong trang sau khi bao gồm <script>. Bạn cũng không thể sử dụng async defer với bất kỳ phương thức API JavaScript nào.

Tôi có cần dùng thuộc tính url không?

Thuộc tính url là bắt buộc. Nếu bạn không đặt rõ ràng url, nút chia sẻ sẽ không hiển thị. Xem bài viết Chia sẻ URL mục tiêu để biết thêm thông tin.

Một số người dùng của tôi nhận được cảnh báo bảo mật khi họ xem các trang có nút chia sẻ. Làm cách nào để xóa cái này?

Mã nút chia sẻ yêu cầu tập lệnh từ máy chủ của Google. Bạn có thể gặp lỗi này bằng cách đưa tập lệnh vào http:// trên một trang tải qua https://. Chúng tôi khuyên bạn nên sử dụng https:// để bao gồm tập lệnh:

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

Những trình duyệt web nào được hỗ trợ?

Nút chia sẻ Lớp học hỗ trợ cùng một trình duyệt web với giao diện web của Lớp học, các trình duyệt như Chrome, Firefox®, Internet Explorer® hoặc Safari®. Lưu ý: Người dùng Internet Explorer sẽ không sử dụng được các chức năng được chỉ định cho onsharestart và onsharecomplete.

Dữ liệu nào được gửi đến Lớp học khi bạn nhấp vào nút chia sẻ trong Lớp học?

Khi người dùng nhấp vào nút chia sẻ, họ sẽ được nhắc đăng nhập bằng tài khoản G Suite cho giáo dục của mình. Sau khi xác thực, tài khoản người dùng và thuộc tính url sẽ được gửi đến Lớp học để hoàn tất bài đăng.