사용자가 Google Meet에서 클래스룸을 사용 중인가요? Google Meet에서 학생의 참석 여부를 확인하는 방법 관련 Apps Script 빠른 시작을 확인하세요.

클래스룸 공유 버튼 추가

클래스룸 공유 버튼

버튼 공유 및 로드 기법 수정 등 웹사이트의 요구에 맞게 클래스룸 공유 버튼을 추가하고 맞춤설정할 수 있습니다. 웹사이트에 클래스룸 공유 버튼을 추가하면 사용자가 수업에 콘텐츠를 공유하고 사이트로 트래픽을 유도할 수 있습니다.

시작하기

간단한 버튼

페이지에 클래스룸 공유 버튼을 포함하는 가장 쉬운 방법은 필요한 자바스크립트 리소스를 포함하고 공유 버튼 태그를 추가하는 것입니다.

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

스크립트는 HTTPS 프로토콜을 사용하여 로드해야 하며 페이지의 어느 포인트에서 제한 없이 포함할 수 있습니다. 자세한 내용은 FAQ를 참고하세요.

클래스 속성을 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>

구성

클래스룸에 공유할 URL 설정

클래스룸에 공유되는 URL은 버튼의 url 속성에 따라 결정됩니다. 이 속성은 공유할 타겟 URL을 명시적으로 정의하며 공유 버튼을 렌더링하도록 설정해야 합니다.

스크립트 태그 매개변수

이러한 매개변수는 platform.js 스크립트를 로드하기 전에 실행해야 하는 <script /> 요소 내에 정의됩니다. 매개변수는 전체 웹페이지에서 사용되는 버튼 로드 메커니즘을 제어합니다.

허용되는 매개변수는 다음과 같습니다.

onload
페이지의 모든 공유 버튼은 페이지가 로드되면 자동으로 렌더링됩니다. 지연 실행 onLoad 예를 참고하세요.
명시적
공유 버튼은 gapi.sharetoclassroom.go 또는 gapi.sharetoclassroom.render를 명시적으로 호출하는 경우에만 렌더링됩니다.

명시적 로드를 go 및 페이지의 특정 컨테이너를 가리키는 렌더링 호출과 함께 사용하면 스크립트가 전체 DOM을 통과하는 것을 방지할 수 있으므로 버튼 렌더링 시간이 개선될 수 있습니다. gapi.sharetoclassroom.gogapi.sharetoclassroom.render 예시를 참고하세요.

태그 속성 공유

이러한 매개변수는 각 버튼의 설정을 제어합니다. 이러한 매개변수는 공유 버튼 태그에서 attribute=value 쌍 또는 gapi.sharetoclassroom.render 호출에서 자바스크립트 key:value 쌍으로 설정할 수 있습니다.

속성 기본값 설명
body 문자열 null 클래스룸에 공유할 항목 본문 텍스트를 설정합니다.
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 클래스룸에 공유할 항목 제목을 설정합니다.
url 공유할 URL null 클래스룸에 공유할 URL을 설정합니다. gapi.sharetoclassroom.render를 사용하여 이 속성을 설정하는 경우 URL을 이스케이프해서는 안 됩니다.

클래스룸 공유 버튼 가이드라인

클래스룸 공유 버튼 표시는 최소 크기 크기 가이드라인 및 관련 색상/버튼 템플릿을 준수해야 합니다. 버튼은 최소 크기 32픽셀에서 최대 96픽셀까지 다양한 크기를 지원합니다.

테마
기본
어두운 테마
밝은 테마

어떤 방식으로도 아이콘을 변경하거나 다시 만들지 않는 것이 좋습니다. 그러나 앱에 여러 타사 소셜 아이콘을 함께 표시하는 경우 모든 스타일을 비슷한 스타일로 맞춤설정한다면 클래스룸 스타일을 앱 스타일에 맞게 맞춤설정할 수 있습니다.

자세한 내용은 클래스룸 브랜드 가이드라인을 참조하세요.

JavaScript API

공유 버튼 자바스크립트는 gapi.sharetoclassroom 네임스페이스에서 버튼 렌더링 함수 두 개를 정의합니다. 자동 태그 추가를 explicit으로 설정하여 자동 렌더링을 사용 중지한 경우 이러한 함수 중 하나를 호출해야 합니다.

방법 설명
gapi.sharetoclassroom.render(
 container,
 parameters
)
지정된 컨테이너를 공유 버튼으로 렌더링합니다.
컨테이너
공유 버튼으로 렌더링할 컨테이너입니다. 컨테이너 ID (문자열) 또는 DOM 요소 자체를 지정합니다.
매개변수
태그 속성을 key=value 쌍으로 포함하는 객체입니다. {"size": "300", "theme": "light"}를 예로 들 수 있습니다.
gapi.sharetoclassroom.go(
 opt_container
)
지정된 컨테이너의 모든 공유 버튼 태그와 클래스를 렌더링합니다. 이 함수는 성능상의 이유로 parsetagsexplicit로 설정된 경우에만 사용해야 합니다.
Opt_container
렌더링할 공유 버튼 태그가 포함된 컨테이너입니다. 컨테이너 ID (문자열) 또는 DOM 요소 자체를 지정합니다. opt_container 매개변수가 생략되면 페이지의 모든 공유 버튼 태그가 렌더링됩니다.

Examples

기본 페이지

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

자주 묻는 질문(FAQ)

다음 FAQ는 기술적 고려사항 및 구현 세부정보를 다룹니다. 추가 리소스는 일반 FAQ를 참조하세요.

클래스룸 공유 버튼 통합을 테스트하려면 어떻게 해야 하나요?

통합을 통해 클래스룸에의 공유를 테스트하기 위해 클래스룸 테스트 계정을 요청할 수 있습니다.

서로 다른 URL을 공유하는 하나의 페이지에 여러 버튼을 배치할 수 있나요?

예. 공유 태그 매개변수에 지정된 대로 url 속성을 사용하여 클래스룸에 공유할 URL을 지정합니다.

페이지의 공유 버튼은 어디에 넣어야 하나요?

페이지와 사용자를 가장 잘 알고 있으므로 가장 효과적이라고 생각되는 곳에 버튼을 배치하는 것이 좋습니다. 스크롤 없이 볼 수 있는 부분, 페이지 제목 근처에, 링크 공유에 가까이 두는 것이 좋은 경우가 많습니다. 또한 만든 콘텐츠의 끝과 시작 부분에 모두 공유 버튼을 배치할 수 있습니다.

페이지에서 <script> 태그 배치가 지연 시간에 영향을 미치나요?

아니요. <script> 태그의 배치에는 상당한 지연 시간이 영향을 미치지 않습니다. 하지만 문서를 문서 하단, </body> 닫기 태그 바로 앞에 배치하면 페이지의 로드 속도를 개선할 수 있습니다.

공유 태그 앞에 <script> 태그를 포함해야 하나요?

아니요. <script> 태그는 페이지의 어디에나 포함할 수 있습니다.

다른 <script> 태그가 JavaScript API 섹션의 메서드 중 하나를 호출하기 전에 <script> 태그를 포함해야 하나요?

예. 자바스크립트 API 메서드를 사용한다면 <script> 포함 후 페이지에 배치해야 합니다. 또한 자바스크립트 API 메서드와 함께 async defer을 사용할 수 없습니다.

url 속성을 사용해야 하나요?

url 속성은 필수 항목입니다. url를 명시적으로 설정하지 않으면 공유 버튼이 렌더링되지 않습니다. 자세한 내용은 공유 대상 URL 공유를 참고하세요.

일부 사용자가 공유 버튼이 있는 페이지를 볼 때 보안 경고가 표시됩니다. 어떻게 하면 없앨 수 있나요?

공유 버튼 코드를 사용하려면 Google 서버의 스크립트가 필요합니다. 이 오류는 https://를 통해 로드된 페이지에 http://를 통해 스크립트를 포함하면 발생할 수 있습니다. https://를 사용하여 스크립트를 포함하는 것이 좋습니다.

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

어떤 웹브라우저가 지원되나요?

클래스룸 공유 버튼은 클래스룸 웹브라우저 인터페이스와 동일한 웹브라우저, Chrome, Firefox®, Internet Explorer®, Safari®와 같은 브라우저를 지원합니다. 참고: onsharestart 및 onsharecomplete에 지정된 함수는 Internet Explorer 사용자에게 호출되지 않습니다.

클래스룸 공유 버튼을 클릭하면 클래스룸에 어떤 데이터가 전송되나요?

사용자가 공유 버튼을 클릭하면 G Suite for Education 계정으로 로그인하라는 메시지가 표시됩니다. 인증이 완료되면 사용자 계정과 url 속성이 클래스룸으로 전송되어 게시물을 완료합니다.