เพิ่มปุ่มแชร์สําหรับ 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>

การกำหนดค่า

การตั้งค่า URL เพื่อแชร์กับ Classroom

URL ที่จะแชร์ไปยัง Classroom จะกําหนดโดยแอตทริบิวต์ url ของปุ่ม แอตทริบิวต์นี้กําหนด URL เป้าหมายที่จะแชร์อย่างชัดแจ้ง และต้องตั้งค่าเพื่อให้ระบบแสดงปุ่มแชร์

พารามิเตอร์แท็กสคริปต์

พารามิเตอร์เหล่านี้กําหนดภายในองค์ประกอบ <script /> ที่ต้องเรียกใช้ก่อนโหลดสคริปต์ platform.js พารามิเตอร์จะควบคุมกลไกการโหลดปุ่มที่ใช้ในทั้งหน้าเว็บ

พารามิเตอร์ที่อนุญาตมีดังนี้

เมื่อโหลด
ปุ่มแชร์ทั้งหมดในหน้าจะแสดงผลโดยอัตโนมัติหลังจากโหลดหน้าเว็บ ดูตัวอย่าง onload ที่ถูกเลื่อนเวลา
โจ่งแจ้ง อาจไม่เหมาะสม
ปุ่มแชร์จะแสดงผลเมื่อมีการเรียกไปยัง gapi.sharetoclassroom.go หรือ gapi.sharetoclassroom.render อย่างชัดเจนเท่านั้น

เมื่อคุณใช้การโหลดที่ชัดเจนร่วมกับ Go และแสดงผลการเรียกที่ชี้ไปยังคอนเทนเนอร์หนึ่งๆ ในหน้าเว็บ จะทําให้สคริปต์ข้าม DOM ทั้งหมดไม่ได้ ซึ่งจะช่วยปรับปรุงเวลาในการแสดงผลปุ่ม ดู gapi.sharetoclassroom.go และ gapi.sharetoclassroom.render ตัวอย่าง

แชร์แอตทริบิวต์ของแท็ก

พารามิเตอร์เหล่านี้จะควบคุมการตั้งค่าของแต่ละปุ่ม คุณสามารถตั้งค่าพารามิเตอร์เหล่านี้เป็นคู่ attribute=value ในแท็กปุ่มแชร์ หรือเป็นการจับคู่ JavaScript key:value ในการเรียก gapi.sharetoclassroom.render

แอตทริบิวต์ ค่า ค่าเริ่มต้น คำอธิบาย
body สตริง Null ตั้งค่าข้อความเนื้อหาของรายการเพื่อแชร์กับ Classroom
courseid สตริง Null หากระบุแล้ว ให้กําหนดรหัสหลักสูตรเป็นเลือกไว้ล่วงหน้าในเมนู "เลือกชั้นเรียน" ที่แสดงหลังจากที่ผู้ใช้คลิกปุ่มแชร์ ผู้ใช้สามารถเปลี่ยนค่าที่เลือกไว้ล่วงหน้านี้ได้ หากจําเป็น
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 ตั้งค่าชื่อรายการที่จะแชร์ไปยัง Classroom
url URL ที่จะแชร์ Null ตั้งค่า URL ที่จะแชร์ไปยัง Classroom หากตั้งค่าแอตทริบิวต์นี้โดยใช้ gapi.sharetoclassroom.render คุณไม่ควรกําหนด URL เป็นอักขระหลีก

หลักเกณฑ์ของปุ่มแชร์ของ Classroom

การแสดงปุ่มแชร์ของ Classroom ควรเป็นไปตามหลักเกณฑ์เกี่ยวกับขนาดขั้นต่ําและเทมเพลตสี/ปุ่มที่เกี่ยวข้อง ปุ่มรองรับหลายขนาด ตั้งแต่ขนาดต่ําสุด 32 พิกเซลไปจนถึงสูงสุด 96 พิกเซล

ธีม ตัวอย่าง
คลาสสิก
มืด
น้อย

ขอแนะนําว่าคุณไม่ควรเปลี่ยนไอคอนหรือสร้างใหม่ แต่หากคุณแสดงไอคอนโซเชียลของบุคคลที่สามหลายรายการในแอป ก็จะปรับแต่งไอคอน Classroom ให้สอดคล้องกับสไตล์ของแอปได้ โดยมีการปรับแต่งปุ่มทั้งหมดด้วยสไตล์ที่คล้ายกัน

โปรดดูข้อมูลเพิ่มเติมในหลักเกณฑ์การใช้แบรนด์ Classroom

JavaScript API

JavaScript ของปุ่มแชร์จะกําหนดฟังก์ชันการแสดงผลปุ่ม 2 ฟังก์ชันภายใต้เนมสเปซ gapi.sharetoclassroom คุณต้องเรียกใช้หนึ่งในฟังก์ชันเหล่านี้หากปิดใช้การแสดงผลอัตโนมัติโดยตั้งค่าแท็กแท็กเป็น explicit

วิธีการ คำอธิบาย
gapi.sharetoclassroom.render(
 container,
 parameters
)
แสดงผลคอนเทนเนอร์ที่ระบุเป็นปุ่มแชร์
คอนเทนเนอร์
คอนเทนเนอร์สําหรับแสดงเป็นปุ่มแชร์ ระบุรหัสของคอนเทนเนอร์ (สตริง) หรือองค์ประกอบ DOM เอง
พารามิเตอร์
ออบเจ็กต์ที่มีแอตทริบิวต์แท็กเป็นคู่ key=value เช่น {"size": "300", "theme": "light"}
gapi.sharetoclassroom.go(
 opt_container
)
แสดงผลแท็กและคลาสของปุ่มแชร์ทั้งหมดในคอนเทนเนอร์ที่ระบุ ควรใช้ฟังก์ชันนี้เมื่อตั้งค่า parsetags เป็น explicit เท่านั้น ซึ่งคุณอาจต้องดําเนินการเพื่อเหตุผลด้านประสิทธิภาพ
Opt_container
คอนเทนเนอร์ที่มีแท็กปุ่มแชร์ที่จะแสดง ระบุรหัสของคอนเทนเนอร์ (สตริง) หรือองค์ประกอบ 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 ต่างกันได้หรือไม่

ได้ ใช้แอตทริบิวต์ url ตามที่ระบุไว้ในพารามิเตอร์การแชร์แท็กเพื่อระบุ URL ที่จะแชร์กับ Classroom

ฉันควรวางปุ่มแชร์ไว้ที่ใดในหน้าเว็บ

คุณรู้จักหน้าเว็บและผู้ใช้ของคุณดีที่สุด เราจึงขอแนะนําให้วางปุ่มในจุดที่มีประสิทธิภาพสูงสุด บริเวณครึ่งหน้าบน ใกล้กับชื่อของหน้าเว็บ และใกล้กับการแชร์ลิงก์มักจะเป็นตําแหน่งที่ดี และยังสามารถวางปุ่มแชร์ไว้ที่ส่วนท้ายและตอนต้นของเนื้อหาที่สร้างขึ้นได้ด้วย

ส่งผลต่อเวลาในการตอบสนองจากตําแหน่งของแท็ก <script> ในหน้าเว็บไหม

ไม่ จะไม่มีผลต่อเวลาในการตอบสนองอย่างมีนัยสําคัญจากตําแหน่งของแท็ก <script> แต่การวางแท็กไว้ที่ท้ายเอกสารก่อนแท็กปิด </body> อาจทําให้ความเร็วในการโหลดหน้าเว็บเพิ่มขึ้น

ต้องรวมแท็ก <script> ก่อนแท็กแชร์ไหม

ไม่ได้ แท็ก <script> สามารถรวมไว้ที่ใดก็ได้ในหน้าเว็บ

ต้องใส่แท็ก <script> ก่อนแท็ก <script> อื่นเพื่อเรียกใช้เมธอดใดเมธอดหนึ่งในส่วน JavaScript API ใช่ไหม

ได้ หากคุณใช้เมธอด JavaScript API คุณต้องวางเมธอดเหล่านี้ในหน้าเว็บหลังจากรวม <script> ไว้แล้ว นอกจากนี้ คุณยังใช้ async defer กับเมธอด JavaScript API ใดๆ ไม่ได้ด้วย

ฉันต้องใช้แอตทริบิวต์ url ไหม

ต้องระบุแอตทริบิวต์ url การไม่ตั้งค่า url อย่างชัดแจ้งจะทําให้ปุ่มแชร์ไม่แสดง โปรดดูข้อมูลเพิ่มเติมที่แชร์ URL เป้าหมาย

ผู้ใช้บางรายของฉันได้รับคําเตือนด้านความปลอดภัยเมื่อดูหน้าเว็บด้วยปุ่มแชร์ ฉันจะกําจัดปัญหานี้ได้อย่างไร

โค้ดปุ่มแชร์ต้องใช้สคริปต์จากเซิร์ฟเวอร์ของ Google คุณอาจได้รับข้อผิดพลาดนี้โดยใส่สคริปต์ผ่าน http:// ในหน้าที่โหลดผ่าน https:// เราขอแนะนําให้ใช้ https:// เพื่อใส่สคริปต์

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

รองรับเว็บเบราว์เซอร์ใดบ้าง

ปุ่มแชร์ของ Classroom รองรับเว็บเบราว์เซอร์เดียวกันกับอินเทอร์เฟซเว็บของ Classroom, เบราว์เซอร์ เช่น Chrome, Firefox®, Internet Explorer® หรือ Safari® หมายเหตุ: ผู้ใช้ Internet Explorer ไม่เรียกฟังก์ชันที่ระบุไว้สําหรับ onsharestart และ onsharecomplete

ข้อมูลที่ส่งไปยัง Classroom เมื่อคุณคลิกปุ่มแชร์ Classroom

เมื่อผู้ใช้คลิกปุ่มแชร์ ระบบจะแจ้งให้ลงชื่อเข้าใช้ด้วยบัญชี G Suite for Education หลังจากตรวจสอบสิทธิ์แล้ว ระบบจะส่งบัญชีผู้ใช้และแอตทริบิวต์ url ไปยัง Classroom เพื่อดําเนินการโพสต์ให้เสร็จสมบูรณ์