클래스룸 공유 버튼 추가

클래스룸 공유 버튼

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

시작하기

간단한 버튼

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

<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 string null 클래스룸에 공유할 항목 본문 텍스트를 설정합니다.
courseid string null 이 플래그를 지정하면 사용자가 공유 버튼을 클릭한 후 표시되는 '수업 선택' 메뉴에서 수업 ID가 미리 선택되도록 설정합니다. 필요한 경우 사용자는 미리 선택된 이 값을 변경할 수 있습니다.
itemtype announcement, assignment, material 또는 question null 이렇게 하면 사용자가 처음 강의를 선택한 후 (또는 courseid도 지정된 경우 즉시) 만들기 대화상자가 자동으로 표시됩니다. 학생이 수업을 선택하거나 교사가 학생으로 속한 수업을 선택하는 경우 이 값은 무시됩니다.
locale RFC 3066 준수 언어 태그 en-US 접근성을 위해 aria-label 버튼의 언어를 설정합니다. 이는 사용자가 버튼을 클릭할 때 표시되는 공유 대화상자의 언어에는 영향을 미치지 않으며, 이는 사용자의 브라우저 환경설정의 영향을 받습니다.
onsharecomplete string null 지정된 경우 사용자가 링크 공유를 완료할 때 호출되는 전역 네임스페이스의 함수 이름을 설정합니다. 매개변수를 통해 gapi.sharetoclassroom.render에 인수를 전달하는 경우 함수 자체를 사용할 수도 있습니다. 이 기능은 Internet Explorer에서 작동하지 않습니다 (아래 참조).
onsharestart string null 지정하면 공유 대화상자가 열릴 때 호출되는 전역 네임스페이스의 함수 이름을 설정합니다. 매개변수를 통해 gapi.sharetoclassroom.render에 인수를 전달하는 경우 함수 자체를 사용할 수도 있습니다. 이 기능은 Internet Explorer에서는 작동하지 않습니다 (아래 참조).
size int null 공유 버튼의 크기를 픽셀로 설정합니다. 크기를 생략하면 버튼은 32를 사용합니다.
theme classic, dark, light classic 선택한 테마의 버튼 아이콘을 설정합니다.
title string null 클래스룸에 공유할 항목 제목을 설정합니다.
url 공유할 URL null 클래스룸에 공유할 URL을 설정합니다. gapi.sharetoclassroom.render를 사용하여 이 속성을 설정하는 경우 URL을 이스케이프 처리해서는 안 됩니다.

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

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

테마
기본
어둡게
밝게

맞춤설정

어떤 식으로든 아이콘을 변경하거나 다시 만들지 않는 것이 좋습니다. 그러나 앱에 여러 서드 파티 소셜 아이콘을 함께 표시하는 경우 앱 스타일에 맞게 클래스룸 아이콘을 맞춤설정할 수 있습니다. 이렇게 하는 경우 모든 버튼이 비슷한 스타일로 맞춤설정되고 모든 맞춤설정이 클래스룸 브랜드 가이드라인을 준수하는지 확인하세요. 공유 버튼의 모양과 동작을 완전히 제어하려면 https://classroom.google.com/share?url={url-to-share} 구조의 URL을 통해 공유를 시작하면 됩니다.

JavaScript API

공유 버튼 JavaScript는 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 매개변수를 생략하면 페이지의 모든 공유 버튼 태그가 렌더링됩니다.

예시

기본 페이지

<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> 태그를 포함해야 하나요?

예. JavaScript API 메서드를 사용하는 경우 <script>가 포함된 후에 페이지에 배치해야 합니다. 또한 JavaScript 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® 등의 브라우저를 지원합니다. 참고: Internet Explorer 사용자에게는 onsharestart 및 onsharecomplete에 지정된 함수가 호출되지 않습니다.

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

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