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.

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.

gapi.sharetoclassroom.render(
 container,
 parameters
)

gapi.sharetoclassroom.go(
 opt_container
)

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.