Schaltfläche zum Teilen von Classroom hinzufügen

Sie können die Schaltfläche zum Teilen in Classroom hinzufügen und anpassen, um die Anforderungen Ihrer Website zu erfüllen, z. B. die Größe der Schaltfläche und die Ladetechnik ändern. Wenn Sie die Schaltfläche zum Teilen auf Ihrer Website hinzufügen, können Nutzer Ihre Inhalte für ihre Kurse freigeben und die Zugriffe auf Ihre Website steigern.

Erste Schritte

Eine einfache Schaltfläche

Am einfachsten ist es, eine Schaltfläche zum Teilen von Classroom in Ihre Seite einzubinden, indem Sie die erforderliche JavaScript-Ressource und ein Tag für die Schaltfläche "Teilen" hinzufü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 FAQs.

Sie können auch ein gültiges HTML5-Freigabe-Tag verwenden, indem Sie das Klassenattribut auf g-sharetoclassroom setzen und allen Schaltflächenattributen das Präfix data- voranstellen.

<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 das Rendering auf großen Seiten verbessern, indem Sie mit der JavaScript API nur ein einzelnes Element auf der Seite durchlaufen oder ein bestimmtes Element als Schaltfläche zum Teilen rendern.

Verzögerte Ausführung mit onLoad und Skript-Tag-Parametern

Legen Sie den Skript-Tag-Parameter parsetags auf onload (Standardeinstellung) oder explicit fest, um festzulegen, 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 die Freigabe in Classroom festlegen

Welche URL mit Classroom geteilt wird, hängt vom Attribut url der Schaltfläche ab. Dieses Attribut definiert explizit die Ziel-URL, die geteilt werden soll, und muss festgelegt werden, um die Schaltfläche „Teilen“ zu rendern.

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 Lademechanismus der Schaltfläche, der auf der gesamten Webseite verwendet wird.

Folgende Parameter sind zulässig:

onload

Alle Teilen-Schaltflächen auf der Seite werden automatisch gerendert, nachdem die Seite geladen wurde. Weitere Informationen finden Sie im Beispiel für verzögerte Ausführung onLoad.

Explizit

Die Schaltflächen zum Teilen werden nur mit expliziten Aufrufen von gapi.sharetoclassroom.go oder gapi.sharetoclassroom.render gerendert.

Wenn Sie die explizite Last 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 kann die Renderingzeit der Schaltfläche verbessert werden. Sehen Sie sich die Beispiele für gapi.sharetoclassroom.go und gapi.sharetoclassroom.render an.

Tag-Attribute freigeben

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

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

Die Anzeige der Schaltfläche zum Teilen von Classroom sollte unseren Richtlinien für Mindestgrößen und den zugehörigen Vorlagen für Farben und Schaltflächen entsprechen. Die Schaltfläche unterstützt verschiedene Größen, von einer Mindestgröße von 32 bis maximal 96 Pixeln.

Design	Beispiel
Klassisch
Dunkel
Leicht

Anpassung

Das Symbol sollte in keiner Weise verändert oder umgestaltet werden. Wenn in Ihrer App jedoch mehrere Symbole von Drittanbietern angezeigt werden, können Sie das Classroom-Symbol an den Stil Ihrer App anpassen. Achten Sie in diesem Fall darauf, dass alle Schaltflächen in einem ähnlichen Stil angepasst sind und dass alle Anpassungen den Branding-Richtlinien für Classroom entsprechen. Wenn Sie das Aussehen und Verhalten der Schaltfläche „Teilen“ vollständig selbst steuern möchten, können Sie das Teilen über eine URL mit der folgenden Struktur initiieren: https://classroom.google.com/share?url={url-to-share}.

JavaScript API

Das JavaScript der Schaltfläche zum Teilen definiert zwei Funktionen zum Rendern von Schaltflächen unter dem Namespace gapi.sharetoclassroom. Sie müssen eine dieser Funktionen aufrufen, wenn Sie das automatische Rendering deaktivieren, indem Sie Parsetags auf explicit setzen.

gapi.sharetoclassroom.render(
 container,
 parameters
)

gapi.sharetoclassroom.go(
 opt_container
)

Beispiele

Basisseite

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

Explizites Rendering

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

Häufig gestellte Fragen

In den folgenden häufig gestellten Fragen werden technische Überlegungen und Details zur Implementierung behandelt. Zusätzliche Ressourcen finden Sie in den allgemeinen FAQs.

Wie teste ich die Einbindung meiner Classroom-Schaltfläche zum Teilen von Inhalten?

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

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

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

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

Du kennst deine Seite und deine Nutzer am besten. Daher empfehlen wir dir, die Schaltfläche dort zu platzieren, wo sie deiner Meinung nach am effektivsten ist. Eine gute Platzierung befindet sich in der Nähe des Seitentitels und der Freigabelinks. Es kann auch sinnvoll sein, die Schaltfläche zum Teilen sowohl am Anfang als auch am Ende eines erstellten Inhalts zu platzieren.

Wirkt sich die Position des <script>-Tags auf der Seite auf die Latenz aus?

Nein, die Platzierung des <script>-Tags hat keine signifikanten Auswirkungen auf die Latenz. Wenn Sie das Tag jedoch am unteren Rand des Dokuments platzieren, direkt vor dem schließenden </body>-Tag, können Sie möglicherweise die Ladegeschwindigkeit der Seite verbessern.

Muss das <script>-Tag vor dem Share-Tag eingefügt werden?

Nein, das <script>-Tag kann an einer beliebigen Stelle 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 Sie eine der JavaScript API-Methoden verwenden, müssen diese nach dem Einbinden von <script> auf der Seite platziert werden. Außerdem kann async defer nicht mit einer der JavaScript API-Methoden verwendet werden.

Muss ich das Attribut url verwenden?

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

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

Für den Code der Teilen-Schaltfläche ist ein Skript von den Google-Servern erforderlich. Dieser Fehler kann auftreten, wenn Sie das Skript über http:// auf einer Seite einfügen, die über https:// geladen wird. Wir empfehlen die Verwendung von https://, um das Skript einzubinden:

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

Welche Webbrowser werden unterstützt?

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

Welche Daten werden an Classroom gesendet, wenn Sie auf die Schaltfläche zum Teilen in Classroom klicken?

Wenn ein Nutzer auf die Freigabeschaltfläche 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.