Dodawanie przycisku Udostępnij w Classroom

Przycisk udostępniania w Classroom możesz dodać i dostosować do potrzeb swojej witryny, na przykład do zmiany rozmiaru przycisku czy metody wczytywania. Dodając przycisk udostępniania Classroom do witryny, umożliwiasz użytkownikom udostępnianie Twoich materiałów na zajęciach i zwiększenie ruchu w Twojej witrynie.

Pierwsze kroki

Prosty przycisk

Najłatwiejszym sposobem umieszczenia na stronie przycisku udostępniania Classroom jest uwzględnienie niezbędnego zasobu JavaScript i dodanie tagu przycisku udostępniania:

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

Skrypt musi być wczytywany przy użyciu protokołu HTTPS i można go uwzględniać w dowolnym punkcie strony bez ograniczeń. Aby dowiedzieć się więcej, zobacz Najczęstsze pytania.

Możesz też użyć tagu udostępniania zgodnego z HTML5, ustawiając atrybut klasy na g-sharetoclassroom i dodając do wszystkich atrybutów przycisku prefiks data-.

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

Domyślnie uwzględniony skrypt przemierza interfejs DOM i renderuje tagi udostępniania jako przyciski. Możesz skrócić czas renderowania dużych stron, korzystając z interfejsu JavaScript API, który pozwala przeglądać tylko jeden element na stronie lub renderować konkretny element jako przycisk udostępniania.

Odroczone wykonanie z parametrami onLoad i tagu skryptu

Ustaw parametr tagu skryptu parsetags na onload (wartość domyślna) lub explicit, aby określić, kiedy ma być wykonywany kod przycisku. Aby określić parametry tagu skryptu, użyj tej składni:

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

Konfiguracja

Ustawianie adresu URL do udostępniania w Classroom

Adres URL udostępniany w Classroom jest określany przez atrybut url przycisku. Ten atrybut wyraźnie określa docelowy adres URL do udostępnienia i musi być ustawiony, aby możliwe było wyrenderowanie przycisku udostępniania.

Parametry tagu skryptu

Te parametry są zdefiniowane w elemencie <script />, który musi być uruchomiony przed wczytaniem skryptu platform.js. Parametry te sterują mechanizmem wczytywania przycisków używanym w całej witrynie.

Dozwolone parametry to:

onload

Wszystkie przyciski udostępniania na stronie są automatycznie renderowane po wczytaniu strony. Zobacz przykład odroczonego wykonania onLoad.

dla pełnoletnich

Przyciski udostępniania są renderowane tylko w przypadku wyraźnych wywołań funkcji gapi.sharetoclassroom.go lub gapi.sharetoclassroom.render.

Jeśli korzystasz z ładunku jawnego w połączeniu z go i renderujesz wywołania, które wskazują konkretne kontenery na stronie, uniemożliwiasz skryptowi przemierzanie całego modelu DOM, co może skrócić czas renderowania przycisku. Zobacz przykłady gapi.sharetoclassroom.go i gapi.sharetoclassroom.render.

Udostępnij atrybuty tagów

Te parametry kontrolują ustawienia każdego przycisku. Parametry te można ustawić jako pary attribute=value w tagach przycisku udostępniania lub jako pary JavaScript key:value w wywołaniu gapi.sharetoclassroom.render.

Atrybut	Wartość	Domyślna	Opis
body	ciąg znaków	null	Ustawia treść elementu do udostępnienia w Classroom.
courseid	ciąg znaków	null	Jeśli określisz Identyfikator zajęć, zostanie on wstępnie wybrany w menu „Wybierz zajęcia”, gdy użytkownik kliknie przycisk udostępniania. W razie potrzeby użytkownik może zmienić tę wstępnie wybraną wartość.
itemtype	announcement, assignment, material lub question	null	Spowoduje to automatyczne wyświetlenie okna tworzenia, gdy użytkownik po raz pierwszy wybierze kurs (lub od razu, jeśli określono również courseid). Jeśli uczeń wybiera zajęcia lub nauczyciel wybiera zajęcia, w których jest uczniem, ta wartość jest ignorowana.
locale	Tag języka zgodny ze standardem RFC 3066	en-US	Ustawia język przycisku aria-label na potrzeby ułatwień dostępu. Nie ma to wpływu na język okna udostępniania wyświetlanego po kliknięciu przycisku przez użytkownika.
onsharecomplete	ciąg znaków	null	Jeśli jest określony, ustawia nazwę funkcji w globalnej przestrzeni nazw, która jest wywoływana, gdy użytkownik zakończy udostępnianie linku. Jeśli przekazujesz argumenty za pomocą parametrów do funkcji gapi.sharetoclassroom.render, możesz też użyć samej funkcji. Ta funkcja nie działa w Internet Explorerze (patrz niżej).
onsharestart	ciąg znaków	null	Jeśli jest określony, ustawia nazwę funkcji w globalnej przestrzeni nazw, która jest wywoływana po otwarciu okna udostępniania. Jeśli przekazujesz argumenty za pomocą parametrów do funkcji gapi.sharetoclassroom.render, możesz też użyć samej funkcji. Ta funkcja nie działa w Internet Explorerze (patrz niżej).
size	int,	null	Ustawia rozmiar przycisku udostępniania w pikselach. Jeśli rozmiar zostanie pominięty, przycisk będzie miał wartość 32.
theme	classic, dark lub light	classic	Ustawia ikonę przycisku dla wybranego motywu.
title	ciąg znaków	null	Ustawia tytuł elementu do udostępnienia w Classroom.
url	URL do udostępnienia	null	Ustawia adres URL do udostępnienia w Classroom. Jeśli ustawiasz ten atrybut za pomocą atrybutu gapi.sharetoclassroom.render, nie należy zmieniać znaczenia adresu URL.

Wskazówki dotyczące przycisku udostępniania w Classroom

Przycisk udostępniania w Classroom powinien być zgodny z naszymi wytycznymi dotyczącymi minimalnej i maksymalnej wielkości oraz odpowiednimi szablonami kolorów/przycisków. Przycisk obsługuje różne rozmiary, od 32 do 96 pikseli.

Motyw	Przykład
Klasyczna
Ciemny
Jasny

Personalizacja

Zalecamy, aby w żaden sposób nie zmieniać ani nie przerabiać ikony. Jeśli jednak wyświetlasz w swojej aplikacji wiele ikon społecznościowych innych firm, możesz dostosować ją do stylu swojej aplikacji. Jeśli to zrobisz, upewnij się, że wszystkie przyciski są dostosowane w podobnym stylu, a wszystkie dostosowania są zgodne ze wskazówkami dotyczącymi promowania marki Classroom. Jeśli chcesz w pełni kontrolować wygląd i działanie przycisku udostępniania, możesz zainicjować udostępnianie, korzystając z adresu URL o takiej strukturze: https://classroom.google.com/share?url={url-to-share}.

JavaScript API

Kod JavaScript przycisku udostępniania definiuje 2 funkcje renderujące przyciski w przestrzeni nazw gapi.sharetoclassroom. Jeśli wyłączysz automatyczne renderowanie, ustaw parametry analizy na explicit, aby wywołać jedną z tych funkcji.

Metoda	Opis
gapi.sharetoclassroom.render( container, parameters )	Renderuje określony kontener jako przycisk udostępniania. kontener Kontener do wyrenderowania jako przycisk udostępniania. Podaj identyfikator kontenera (ciągu znaków) lub samego elementu DOM. Parametry Obiekt zawierający atrybuty tagu w postaci par key=value. Na przykład: {"size": "300", "theme": "light"}.
gapi.sharetoclassroom.go( opt_container )	Renderuje wszystkie tagi i klasy przycisków udostępniania w określonym kontenerze. Tej funkcji należy używać tylko wtedy, gdy parsetags ma wartość explicit – możesz to zrobić ze względu na wydajność. opt_container Kontener zawierający tagi przycisków udostępniania do wyrenderowania. Podaj identyfikator kontenera (ciągu znaków) lub samego elementu DOM. Jeśli pominiesz parametr opt_container, renderowane będą wszystkie tagi przycisku udostępniania na stronie.

Przykłady

Strona podstawowa

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

Bezpośrednie wczytywanie tagów do podzbioru 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>

Renderowanie bezpośrednie

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

Najczęstsze pytania

W tych najczęstszych pytaniach znajdziesz kwestie techniczne i szczegóły dotyczące implementacji. Więcej informacji znajdziesz w ogólnych najczęstszych pytaniach.

Jak przetestować integrację przycisku udostępniania w Classroom?

Możesz poprosić o konta testowe Classroom, aby przetestować udostępnianie w Classroom z poziomu integracji.

Czy na jednej stronie mogę umieścić wiele przycisków, z których wszystkie mają różne adresy URL?

Tak. Użyj atrybutu url określonego w parametrach tagu udostępniania, aby wskazać adres URL do udostępnienia Classroom.

Gdzie na stronach należy umieścić przycisk udostępniania?

To Ty najlepiej znasz swoją stronę i swoich użytkowników, więc zalecamy umieszczenie przycisku w miejscu, które uznasz za najlepsze. Dobrymi lokalizacjami zwykle są część strony widoczna na ekranie, w pobliżu tytułu strony i w pobliżu linków do udostępniania. Dobrym pomysłem jest też umieszczenie przycisku udostępniania na końcu i na początku tworzonego materiału.

Czy pozycja tagu <script> na stronie ma wpływ na czas oczekiwania?

Nie. Umieszczenie tagu <script> nie ma znaczącego wpływu na czas oczekiwania. Jednak umieszczenie tagu na dole dokumentu tuż przed tagiem zamykającym </body> może przyspieszyć wczytywanie strony.

Czy przed tagiem udostępniania trzeba umieścić tag <script>?

Nie, tag <script> można umieścić w dowolnym miejscu strony.

Czy trzeba dodać tag <script>, zanim inny tag <script> wywoła jedną z metod w sekcji JavaScript API?

Tak. Jeśli korzystasz z metod interfejsu JavaScript API, musisz je umieścić na stronie po uwzględnieniu parametru <script>. Nie można też używać metody async defer z żadną metodą JavaScript API.

Czy muszę używać atrybutu url?

Atrybut url jest wymagany. Jeśli nie ustawisz zasady url, przycisk udostępniania nie będzie się renderował. Więcej informacji znajdziesz w sekcji Docelowy URL udostępniania.

Niektórzy użytkownicy mojej witryny widzą ostrzeżenie o zagrożeniu bezpieczeństwa, gdy otwierają strony z przyciskiem udostępniania. Jak temu zapobiec?

Kod przycisku udostępniania wymaga skryptu z serwerów Google. Ten błąd może się pojawić, jeśli umieścisz skrypt z http:// na stronie wczytanej przez https://. Zalecamy dodanie skryptu za pomocą https://:

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

Które przeglądarki są obsługiwane?

Przycisk udostępniania Classroom obsługuje te same przeglądarki co interfejs internetowy Classroom oraz przeglądarki takie jak Chrome, Firefox®, Internet Explorer® i Safari®. Uwaga: funkcje określone dla opcji onsharestart i onsharecomplete nie są wywoływane w przeglądarce Internet Explorer.

Jakie dane są wysyłane do Classroom, gdy klikniesz przycisk udostępniania w Classroom?

Gdy użytkownik kliknie przycisk udostępniania, zostanie poproszony o zalogowanie się na konto G Suite dla Szkół i Uczelni. Po uwierzytelnieniu konto użytkownika i atrybut url są wysyłane do Classroom w celu ukończenia publikowania.