Dodaj przycisk udostępniania w Classroom

Możesz dodać i dostosowywać przycisk Udostępnij w Classroom, aby spełniał potrzeby Twojej witryny, np. zmienić rozmiar przycisku i metodę wczytywania. Dodając do swojej witryny przycisk udostępniania w Classroom, umożliwisz użytkownikom udostępnianie Twoich treści w ramach zajęć i zwiększysz ruch w Twojej witrynie.

Pierwsze kroki

Podstawowy przycisk

Najprostszym sposobem na umieszczenie na stronie przycisku udostępniania Classroom jest dodanie niezbędnego zasobu JavaScriptu i tagu przycisku udostępniania:

/g:sharetoclassroom

Skrypt musi być wczytywany za pomocą protokołu HTTPS i może być dołączany w dowolnym miejscu na stronie bez ograniczeń. Więcej informacji znajdziesz w najczęstszych pytaniach.

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

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

Domyślnie dołączony skrypt przemierza DOM i renderuje tagi udostępniania jako przyciski. Czas renderowania dużych stron możesz skrócić, używając interfejsu API JavaScriptu do przejścia tylko przez jeden element na stronie lub do wyrenderowania konkretnego elementu jako przycisku udostępniania.

Opóźnione wykonanie z parametrami onLoad i tagu skryptu

Aby określić, kiedy ma być wykonywany kod przycisku, ustaw parametr parsetags tagu skryptu na onload (domyślnie) lub explicit. 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

W poniższych sekcjach opisano kluczowe wartości przycisku Udostępnij w Classroom.

Ustawianie adresu URL do udostępniania w Classroom

Adres URL udostępniany w Classroom jest określany przez atrybut urlprzycisku. Ten atrybut określa docelowy adres URL do udostępnienia i musi być ustawiony, aby można było wyświetlić przycisk udostępniania.

Parametry tagu skryptu

Parametry te są definiowane w elemencie script, który musi zostać uruchomiony przed załadowaniem skryptu platform.js. Parametry te kontrolują mechanizm wczytywania przycisku, który jest używany na całej stronie internetowej.

Dozwolone parametry:

onload

Po załadowaniu strony wszystkie przyciski udostępniania na stronie są renderowane automatycznie. Zobacz przykład opóźnionego wykonania onLoad.

wulgaryzmy

Przyciski udostępniania są renderowane tylko przy wyraźnych wywołaniach

gapi.sharetoclassroom.go lub gapi.sharetoclassroom.render.

Gdy używasz jawnego wczytywania w połączeniu z wywołaniami go i render, które wskazują na konkretne kontenery na stronie, uniemożliwiasz skryptowi przeglądanie całego DOM, co może skrócić czas renderowania przycisku. Zapoznaj się z przykładami gapi.sharetoclassroom.go i gapi.sharetoclassroom.render.

Udostępnianie atrybutów tagu

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

Wytyczne dotyczące przycisku udostępniania w Classroom

Wyświetlanie przycisku udostępniania w Classroom powinno być zgodne z naszymi wytycznymi dotyczącymi minimalnego i maksymalnego rozmiaru oraz powiązanymi z nimi szablonami kolorów lub przycisków. Przycisk może mieć różne rozmiary: od minimum 32 pikseli do maksimum 96 pikseli.

Motyw	Przykład
Klasyczny
Ciemny
Jasny

Dostosowywanie

Nie zalecamy zmiany lub ponownego tworzenia ikony. Jeśli jednak wyświetlasz w aplikacji kilka ikon mediów społecznościowych innych firm, możesz dostosować ikonę Classroom, aby pasowała do stylu aplikacji. Jeśli tak zrobisz, upewnij się, że wszystkie przyciski są spersonalizowane w podobny sposób i że wszelkie zmiany są zgodne z wytycznymi dotyczącymi marki Classroom. Jeśli chcesz mieć pełną kontrolę nad wyglądem i działaniem przycisku Udostępnij, możesz rozpocząć udostępnianie za pomocą adresu URL o tej strukturze: https://classroom.google.com/share?url={url-to-share}.

JavaScript API

Kod JavaScript przycisku udostępniania definiuje 2 funkcje renderowania przycisku w przestrzeni nazw gapi.sharetoclassroom. Jeśli wyłączysz automatyczne renderowanie, ustawiając parametr parsetags na wartość explicit, musisz wywołać jedną z tych funkcji.

gapi.sharetoclassroom.render(
 container,
 parameters
)

gapi.sharetoclassroom.go(
 opt_container
)

Przykłady

Poniżej znajdziesz przykłady implementacji przycisku Udostępnij w Classroom w kodzie HTML.

Podstawowa strona

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

Wyraźne wczytywanie tagów w podzbiorze 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>

Wyraźne renderowanie

<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

Poniższe odpowiedzi na najczęstsze pytania dotyczą kwestii technicznych i szczegółów implementacji. Więcej informacji znajdziesz w Najczęstszych pytaniach.

Jak przetestować integrację z przyciskiem udostępniania w Classroom?

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

Czy mogę umieścić na jednej stronie kilka przycisków, które mają różne adresy URL?

Tak. Użyj atrybutu url zgodnie z parametrami tagu udostępniania, aby wskazać adres URL do udostępnienia w Classroom.

Gdzie na stronach powinien znajdować się przycisk udostępniania?

To Ty najlepiej znasz swoją stronę i użytkowników, dlatego zalecamy umieszczenie przycisku w miejscu, w którym Twoim zdaniem będzie on najbardziej skuteczny. Dobrym miejscem jest często obszar powyżej linii łamu, w pobliżu tytułu strony i linków do udostępniania. Może być też skuteczne umieszczenie przycisku udostępniania na początku i na końcu treści.

Czy pozycja tagu script na stronie ma wpływ na opóźnienie?

Nie, umieszczenie znacznika script nie ma znaczącego wpływu na opóźnienie. Jednak umieszczenie tagu na dole dokumentu, tuż przed zamknięciem tagu body, może przyspieszyć wczytywanie strony.

Czy tag script musi być umieszczony przed tagiem udostępniania?

Nie, tag script może znajdować się w dowolnym miejscu strony.

Czy tag script musi być uwzględniony przed wywołaniem przez inny tag script jednej z metod w sekcji interfejsu JavaScript API?

Tak, jeśli używasz którejkolwiek z metod interfejsu JavaScript API, muszą one znajdować się na stronie po uwzględnieniu script. Nie możesz też używać async defer w żadnej metodzie interfejsu JavaScript API.

Czy muszę używać atrybutu url?

Atrybut url jest wymagany. Jeśli nie ustawisz wartości url, przycisk udostępniania nie zostanie wyświetlony. Więcej informacji znajdziesz w artykule Udostępnianie adresu docelowego URL.

Niektórzy użytkownicy otrzymują ostrzeżenie dotyczące bezpieczeństwa, gdy wyświetlają strony z przyciskiem udostępniania. Jak się tego pozbyć?

Kod przycisku udostępniania wymaga skryptu z serwerów Google. Ten błąd może wystąpić, jeśli dodasz skrypt za pomocą funkcji http:// na stronie wczytywanej za pomocą funkcji https://. Zalecamy użycie https://, aby uwzględnić skrypt:

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

Przycisk udostępniania w Classroom obsługuje te same przeglądarki internetowe co interfejs internetowy Classroom, czyli Chrome, Firefox®, Internet Explorer® i Safari®. Uwaga: funkcje określone dla onsharestart i onsharecomplete nie są wywoływane w przypadku użytkowników Internet Explorera.

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

Gdy użytkownik kliknie przycisk udostępniania, zostanie poproszony o zalogowanie się na konto G Suite for Education. Po uwierzytelnieniu konto użytkownika i atrybut url zostają wysłane do Classroom w celu dokończenia publikowania.