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

Bạn có thể thêm và tuỳ chỉnh nút chia sẻ trong 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 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, bạn cho phép người dùng chia sẻ nội dung của bạn với lớp học của họ và thu hút lưu lượng truy cập vào trang web của bạn.

Bắt đầu

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

Phương pháp dễ nhất để đưa nút chia sẻ Lớp học vào trang của bạn là thê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 và thêm data- vào tiền tố của mọi thuộc tính nút.

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

Theo mặc định, tập lệnh đi kèm sẽ truyền tải DOM và hiển thị các 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 để chỉ truyền tải 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ẻ.

Hoãn thực thi bằng onLoad và các thông số thẻ tập lệnh

Đặt tham số thẻ tập lệnh parsetags thành onload (mặc định) hoặc explicit để xác định thời điểm mã nút được thực thi. Để 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õ URL mục tiêu cần chia sẻ và phải được thiết lập để 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 tham số này kiểm soát cơ chế tải nút được dùng trên toàn bộ trang web.

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

đang 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 xong. Xem ví dụ về lệnh thực thi bị trì hoãn onLoad.

phản cảm

Các nút chia sẻ chỉ hiển thị với các lệnh gọi rõ ràng đến gapi.sharetoclassroom.go hoặc gapi.sharetoclassroom.render.

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

Chia sẻ thuộc tính thẻ

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

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

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

Màn hình của Nút chia sẻ Lớp học phải tuân theo nguyên tắc về kích thước tối thiểu và các mẫu nút/màu có liên quan của chúng tôi. 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 kích thước tối đa là 96 pixel.

Giao diện	Ví dụ:
Cổ điển
Tối
Nhạt

Tuỳ chỉnh

Chúng tôi mong bạn không thay đổi hay 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 của bên thứ ba cùng nhau trên ứng dụng, bạn có thể tuỳ chỉnh biểu tượng Lớp học cho phù hợp với phong cách của ứng dụng. Nếu bạn làm như vậy, hãy đảm bảo rằng tất cả các nút đều được tuỳ chỉnh theo một kiểu tương tự nhau và mọi tuỳ chỉnh đều tuân thủ Nguyên tắc sử dụng thương hiệu của Lớp học. Nếu muốn kiểm soát hoàn toàn giao diện và hành vi của nút chia sẻ, bạn có thể bắt đầu chia sẻ thông qua URL có cấu trúc sau: https://classroom.google.com/share?url={url-to-share}.

API JavaScript

JavaScript của nút chia sẻ xác định hai hàm hiển thị nút trong không gian tên gapi.sharetoclassroom. Bạn phải gọi một trong các hàm này nếu tắt tính năng kết xuất tự động 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 để kết xuất dưới dạng nút chia sẻ. Hãy chỉ định mã nhận dạng của vùng chứa (chuỗi) hoặc chính phần tử DOM. tham số Một đối tượng chứa các thuộc tính thẻ dưới dạng cặp key=value. Ví dụ: {"size": "300", "theme": "light"}.
gapi.sharetoclassroom.go( opt_container )	Hiển thị tất cả các lớp và thẻ nút chia sẻ trong vùng chứa được chỉ định. Bạn chỉ nên sử dụng hàm này nếu parsetags được đặt thành explicit (bạn có thể thực hiện điều này vì lý do hiệu suất). vùng chứa tuỳ chọn Vùng chứa chứa các thẻ nút chia sẻ để kết xuất. Hãy chỉ định mã nhận dạng của vùng chứa (chuỗi) hoặc chính phần tử DOM. Nếu bạn bỏ qua thông số opt_container, tất 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 rõ ràng các thẻ trong một tập hợp con của 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>

Kết xuất 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 liên quan đến các yếu tố cần cân nhắc về mặt kỹ thuật và chi tiết triển khai. Để tham khảo thêm tài nguyên, vui lòng xem phần Câu hỏi chung thường gặp.

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

Bạn có thể yêu cầu tài khoản kiểm tra Lớp học để kiểm tra tính năng chia sẻ với Lớp học khi tích hợp.

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

Có. Sử dụng thuộc tính url như được chỉ định trong các thông số thẻ chia sẻ để cho biết URL sẽ được 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 là người hiểu rõ nhất về trang và người dùng của mình, vì vậy, bạn nên đặt nút ở bất kỳ nơi nào mà bạn cho rằng sẽ hiệu quả nhất. Trong màn hình đầu tiên, gần tiêu đề trang và gần với liên kết chia sẻ thường là vị trí tốt. Bạn cũng nên đặt nút chia sẻ ở cả cuối và đầu một phần nội dung đã tạo.

Vị trí của thẻ <script> trên trang có ảnh hưởng đến độ trễ không?

Không, vị trí đặt thẻ <script> không ảnh hưởng đáng kể đế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.

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

Không, thẻ <script> có thể được thêm vào bất cứ đâu trên trang.

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

Có, nếu sử dụng bất kỳ phương thức API JavaScript nào, bạn cần đặt các phương thức đó vào trang sau khi đưa <script> vào. 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 url một cách rõ ràng, nút chia sẻ sẽ không hiển thị. Hãy xem phần chia sẻ URL đích để 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 trang có nút chia sẻ. Làm cách nào để tắt tính năng 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 khi bao gồm tập lệnh thông qua http:// trên một trang được tải qua https://. Bạn nên sử dụng https:// để thê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ẻ của Lớp học hỗ trợ các trình duyệt web tương tự như 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 không cần phải sử dụng các hàm được chỉ định cho onsharestart và onsharecomplete.

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

Khi nhấp vào nút chia sẻ, người dùng sẽ được nhắc đăng nhập bằng tài khoản G Suite for Education. 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 việc đăng bài.