Verwenden Ihre Nutzer Classroom mit Google Meet? Weitere Informationen finden Sie unter Apps Script – Kurzanleitung.

Schaltfläche zum Teilen von Classroom hinzufügen

Die Classroom-Schaltfläche zum Freigeben

Sie können die Schaltfläche zum Teilen in Classroom hinzufügen und anpassen, damit sie den Anforderungen Ihrer Website entspricht, z. B. durch Änderung der Schaltflächengröße und des Ladeverfahrens. Wenn Sie Ihrer Website die Schaltfläche zum Freigeben in Classroom hinzufügen, können Nutzer die Inhalte in ihren Kursen teilen und so die Zugriffe auf Ihre Website steigern.

Erste Schritte

Eine einfache Schaltfläche

Die einfachste Methode zum Einfügen einer Classroom-Freigabeschaltfläche auf Ihrer Seite besteht darin, die erforderliche JavaScript-Ressource einzufügen und ein Tag für die Freigabeschaltfläche hinzuzufügen:

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

Das Skript muss mit dem HTTPS-Protokoll geladen werden und kann von jedem Punkt der Seite aus ohne Einschränkung eingeschlossen werden. Weitere Informationen finden Sie in den häufig gestellten Fragen.

Sie können auch ein gültiges HTML5-Freigabe-Tag verwenden. Dazu legen Sie das Klassenattribut auf g-sharetoclassroom fest und stellen allen Schaltflächenattributen das Präfix data- voran.

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

Standardmäßig durchläuft das enthaltene Skript das DOM und rendert freigegebene Tags als Schaltflächen. Sie können die Renderingzeit auf großen Seiten verbessern, wenn Sie mit der JavaScript API nur ein einzelnes Element auf der Seite durchlaufen oder ein bestimmtes Element als Schaltfläche zum Teilen rendern.

Nachträgliche Ausführung mit onLoad- und Skript-Tag-Parametern

Legen Sie den Skript-Tag-Parameter parsetags auf onload (Standardeinstellung) oder explicit fest, um festzustellen, wann der Schaltflächencode ausgeführt wird. Verwenden Sie die folgende Syntax, um Skript-Tag-Parameter anzugeben:

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

Konfiguration

URL für Classroom freigeben

Die URL, die mit Classroom geteilt wird, wird durch das Attribut url der Schaltfläche bestimmt. Mit diesem Attribut wird explizit die zu teilende Ziel-URL definiert. Sie muss festgelegt werden, damit die Schaltfläche shareTeilen“ gerendert werden kann.

Skript-Tag-Parameter

Diese Parameter werden in einem <script />-Element definiert, das vor dem Laden des Skripts platform.js ausgeführt werden muss. Die Parameter steuern den Mechanismus zum Laden von Schaltflächen, der auf der gesamten Webseite verwendet wird.

Folgende Parameter sind zulässig:

onload
Alle Schaltflächen zum Teilen werden automatisch gerendert, nachdem die Seite geladen wurde. Beispiel für verzögerte Ausführung in onLoad
Explizit
Freigabeschaltflächen werden nur mit expliziten Aufrufen von gapi.sharetoclassroom.go oder gapi.sharetoclassroom.render gerendert.

Wenn Sie das explizite Laden zusammen mit go- und Render-Aufrufen verwenden, die auf bestimmte Container auf Ihrer Seite verweisen, verhindern Sie, dass das Skript das gesamte DOM durchläuft. Dadurch wird das Rendern von Schaltflächen verkürzt. Beispiele für gapi.sharetoclassroom.go und gapi.sharetoclassroom.render ansehen

Tag-Attribute teilen

Mit diesen Parametern werden die Einstellungen für die einzelnen Schaltflächen gesteuert. Sie können diese Parameter als attribute=value-Paare in Teilen-Schaltflächen-Tags oder als JavaScript-key:value-Paare in einem Aufruf von gapi.sharetoclassroom.render festlegen.

Attribut Wert Default Beschreibung
body String Null Legt den Textkörper des Elements fest, das in Classroom geteilt werden soll.
courseid String Null Wenn angegeben, wird die Kurs-ID vorab im Menü "Kurs auswählen" ausgewählt, nachdem ein Nutzer auf die Schaltfläche "Teilen" geklickt hat. Der Nutzer kann diesen vorab ausgewählten Wert bei Bedarf ändern.
itemtype announcement, assignment, material oder question Null Es wird automatisch das Dialogfeld für die Erstellung angezeigt, nachdem der Nutzer zuerst einen Kurs ausgewählt hat (oder sofort, wenn auch courseid angegeben ist). Wenn ein Schüler oder Student einen Kurs auswählt oder ein Kursleiter einen Kurs auswählt, wird dieser Wert ignoriert.
locale RFC 3066-kompatibles Sprach-Tag en-US Legt die Sprache der Schaltfläche aria-label aus Gründen der Barrierefreiheit fest. Das hat keinen Einfluss auf die Sprache des Freigabedialogs, der angezeigt wird, wenn er auf die Schaltfläche klickt. Dies betrifft die Browsereinstellungen des Nutzers.
onsharecomplete String Null Legt den Namen einer Funktion im globalen Namespace fest, die aufgerufen wird, wenn der Nutzer den Link freigegeben hat. Wenn Sie Ihre Argumente über Parameter an gapi.sharetoclassroom.render übergeben, können Sie auch eine Funktion selbst verwenden. Diese Funktion ist im Internet Explorer nicht verfügbar (siehe unten).
onsharestart String Null Wenn dieses Flag angegeben ist, wird der Name einer Funktion im globalen Namespace festgelegt, die aufgerufen wird, wenn das Freigabedialogfeld geöffnet wird. Wenn Sie Ihre Argumente über Parameter an gapi.sharetoclassroom.render übergeben, können Sie auch eine Funktion selbst verwenden. In Internet Explorer ist diese Funktion nicht verfügbar (siehe unten).
size int Null Legt die Größe der Schaltfläche "Teilen" in Pixeln fest. Wenn die Größe weggelassen wird, verwendet die Schaltfläche den Wert 32.
theme classic, dark oder light classic Legt das Schaltflächensymbol für das ausgewählte Design fest.
title String Null Legt den Titel des Elements fest, das in Classroom geteilt werden soll.
url Zu teilende URL: Null Legt die URL fest, die in Classroom geteilt werden soll. Wenn Sie dieses Attribut mit gapi.sharetoclassroom.render festlegen, sollten Sie die URL nicht maskieren.

Richtlinien für die Schaltfläche "Teilen" in Classroom

Die Schaltfläche zum Teilen von Classroom sollte unseren Richtlinien für Mindestgröße und den zugehörigen Farb-/Schaltflächenvorlagen entsprechen. Die Schaltfläche unterstützt verschiedene Größen, von einer Mindestgröße von 32 Pixeln bis maximal 96 Pixel.

Theme Beispiel
Klassisch
Dunkel
Hell

Wir raten davon ab, das Symbol zu verändern oder neu zu erstellen. Wenn Sie in Ihrer App jedoch mehrere soziale Symbole von Drittanbietern anzeigen lassen, können Sie das Classroom-Symbol an den Stil Ihrer App anpassen. Voraussetzung ist, dass alle Schaltflächen ähnlich gestaltet sind.

Weitere Informationen finden Sie in den Markenrichtlinien für Classroom.

JavaScript API

Im JavaScript-Code der Freigabeschaltfläche werden unter dem Namespace gapi.sharetoclassroom zwei Funktionen zum Rendern von Schaltflächen definiert. Wenn Sie das automatische Rendering deaktivieren, müssen Sie eine dieser Funktionen aufrufen, indem Sie parse-Tags auf explicit setzen.

Methode Beschreibung
gapi.sharetoclassroom.render(
 container,
 parameters
)
Gibt den angegebenen Container als Schaltfläche zum Teilen aus.
Container
Der Container, der als Schaltfläche zum Teilen gerendert werden soll. Gib entweder die ID des Containers (String) oder das DOM-Element selbst an.
Parameter
Ein Objekt, das Tag-Attribute als key=value-Paare enthält. Beispiel: {"size": "300", "theme": "light"}
gapi.sharetoclassroom.go(
 opt_container
)
Erstellt alle Tags der entsprechenden Schaltfläche und Klassen im angegebenen Container. Diese Funktion sollte nur verwendet werden, wenn parsetags auf explicit gesetzt ist, was aus Leistungsgründen möglich ist.
Opt_Container
Der Container mit den Tags der Schaltfläche "Teilen", die gerendert werden sollen. Geben Sie entweder die ID des Containers (String) oder das DOM-Element selbst an. Wird der Parameter opt_container weggelassen, werden alle Tags der Freigabeschaltfläche auf der Seite gerendert.

Beispiele

Einfache Seite

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

Tags in einer Teilmenge des DOMs explizit laden

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

Explizite Darstellung

<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

In den folgenden FAQ werden technische Überlegungen und Implementierungsdetails behandelt. Weitere Ressourcen finden Sie in den allgemeinen FAQ.

Wie kann ich die Integration der Teilen-Schaltfläche in Classroom testen?

Sie können Classroom-Testkonten anfordern, um die Freigabe in Classroom über die Integration zu testen.

Kann ich mehrere Schaltflächen auf einer Seite platzieren, die alle unterschiedliche URLs haben?

Ja. Verwenden Sie das Attribut url wie in den Freigabe-Tag-Parametern angegeben, um die URL anzugeben, die mit Classroom geteilt werden soll.

Wo sollte ich die Schaltfläche "Teilen" auf meinen Seiten platzieren?

Sie kennen Ihre Seite und Ihre Nutzer am besten. Deshalb empfehlen wir, die Schaltfläche dort zu platzieren, wo sie Ihrer Meinung nach am effektivsten ist. Oft befindet sich der Bereich "above the fold" (ohne Scrollen sichtbar), in der Nähe des Titels und in der Nähe von Links zum Teilen. Es kann auch effektiv sein, die Schaltfläche zum Teilen sowohl am Ende als auch am Anfang eines erstellten Inhalts zu platzieren.

Beeinflusst die Position des <script>-Tags auf der Seite die Latenz?

Nein, die Platzierung des <script>-Tags hat keine wesentlichen Auswirkungen auf die Latenz. Wenn Sie das Tag jedoch am Ende des Dokuments direkt vor dem Schließen-Tag </body> platzieren, können Sie die Ladezeit der Seite verbessern.

Muss das <script>-Tag vor dem Freigabe-Tag stehen?

Nein, das Tag <script> kann überall auf der Seite eingefügt werden.

Muss das <script>-Tag eingefügt werden, bevor ein anderes <script>-Tag eine der Methoden im JavaScript API-Abschnitt aufruft?

Ja. Wenn du eine der JavaScript API-Methoden verwendest, müssen sie auf der Seite nach der <script>-Aufnahme platziert werden. Außerdem können Sie async defer nicht mit einer der JavaScript API-Methoden verwenden.

Muss ich das Attribut url verwenden?

Das Attribut url ist erforderlich. Wenn Sie url nicht explizit festlegen, wird die Schaltfläche "Teilen" nicht gerendert. Weitere Informationen finden Sie unter Ziel-URL teilen.

Einige meiner Nutzer erhalten eine Sicherheitswarnung, wenn sie Seiten mit der Schaltfläche shareFreigeben“ aufrufen. Wie kann ich diese Warnung beseitigen?

Der Code der Schaltfläche shareTeilen“ erfordert ein Skript von den Google-Servern. Dieser Fehler kann auftreten, wenn Sie das Skript über http:// auf einer Seite einfügen, die über https:// geladen wird. Wir empfehlen, https:// zum Einbinden des Skripts zu verwenden:

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

Welche Webbrowser werden unterstützt?

Die Classroom-Freigabeschaltfläche unterstützt dieselben Webbrowser wie die Weboberfläche von Classroom, Browser wie Chrome, Firefox®, Internet Explorer® oder Safari®. Hinweis: Die für onsharestart und onsharecomplete angegebenen Funktionen sind für Nutzer von Internet Explorer aufgerufen.

Welche Daten werden an Classroom gesendet, wenn Sie auf die Schaltfläche "Mit Classroom teilen" klicken?

Wenn ein Nutzer auf die Schaltfläche zum Freigeben klickt, wird er aufgefordert, sich mit seinem G Suite for Education-Konto anzumelden. Nach der Authentifizierung werden das Nutzerkonto und das Attribut url an Classroom gesendet, um den Beitrag abzuschließen.