Schaltfläche zum Teilen in Classroom hinzufügen

Sie können die Schaltfläche „Mit Classroom teilen“ hinzufügen und an die Anforderungen Ihrer Website anpassen, z. B. die Schaltflächengröße und das Ladeverfahren ändern. Wenn Sie die Schaltfläche „Mit Classroom teilen“ auf Ihrer Website einfügen, können Ihre Nutzer Ihre Inhalte in ihren Kursen teilen und so mehr Zugriffe auf Ihre Website generieren.

Erste Schritte

Eine einfache Schaltfläche

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

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

Du kannst auch ein für HTML5 gültiges Share-Tag verwenden. Dazu setzt du das Attribut „class“ auf g-sharetoclassroom und setzt allen Schaltflächenattributen das Präfix data- vor.

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

Standardmäßig durchsucht das enthaltene Script das DOM und rendert Share-Tags als Schaltflächen. Sie können die Renderingzeit auf großen Seiten verbessern, indem Sie mit der JavaScript API nur ein einzelnes Element auf der Seite durchsuchen oder ein bestimmtes Element als Schaltfläche zum Teilen rendern.

Aussetzung der Ausführung mit onLoad- und Script-Tag-Parametern

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

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

Konfiguration

In den folgenden Abschnitten werden die wichtigsten Werte einer Schaltfläche zum Teilen in Classroom beschrieben.

URL für die Freigabe in Classroom festlegen

Die URL, die in Classroom freigegeben wird, wird durch das url-Attribut der Schaltfläche bestimmt. Mit diesem Attribut wird die Ziel-URL für die Freigabe explizit definiert. Es muss festgelegt werden, damit die Schaltfläche „Teilen“ gerendert wird.

Parameter für Skript-Tags

Diese Parameter werden in einem script-Element definiert, das vor dem Laden des platform.js-Scripts ausgeführt werden muss. Mit den Parametern wird der Schaltflächenlademechanismus gesteuert, der auf der gesamten Webseite verwendet wird.

Zulässige Parameter:

onload

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

Explizit

Teilen-Schaltflächen werden nur mit expliziten Aufrufen von

gapi.sharetoclassroom.go oder gapi.sharetoclassroom.render.

Wenn Sie die explizite Ladefunktion in Verbindung mit „go“- und „render“-Aufrufen verwenden, die auf bestimmte Container auf Ihrer Seite verweisen, verhindern Sie, dass das Script das gesamte DOM durchläuft. Dadurch kann sich die Schaltflächen-Renderingzeit verbessern. Sehen Sie sich die Beispielegapi.sharetoclassroom.go und gapi.sharetoclassroom.render an.

Tag-Attribute teilen

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

Richtlinien für die Schaltfläche „Mit Classroom teilen“

Die Schaltfläche „Teilen“ in Classroom muss unseren Mindest- und Höchstgrößen sowie den zugehörigen Farb- oder Schaltflächenvorlagen entsprechen. Die Schaltfläche kann eine Vielzahl von Größen haben, von einer Mindestgröße von 32 Pixeln bis zu einer maximalen Größe von 96 Pixeln.

Design	Beispiel
Klassisch
Dunkel
Leicht

Anpassung

Wir empfehlen, das Symbol nicht zu ändern oder neu zu erstellen. Wenn Sie jedoch mehrere Symbole für soziale Netzwerke von Drittanbietern in Ihrer App anzeigen, können Sie das Classroom-Symbol an den Stil Ihrer App anpassen. Achten Sie dabei darauf, dass alle Schaltflächen im selben 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 steuern möchten, können Sie die Freigabe über eine URL mit der folgenden Struktur initiieren: https://classroom.google.com/share?url={url-to-share}.

JavaScript API

Im JavaScript-Code für die Schaltfläche „Teilen“ werden zwei Funktionen zum Rendern der Schaltfläche im Namespace gapi.sharetoclassroom definiert. Sie müssen eine dieser Funktionen aufrufen, wenn Sie das automatische Rendern deaktivieren, indem Sie „parsetags“ auf explicit festlegen.

gapi.sharetoclassroom.render(
 container,
 parameters
)

gapi.sharetoclassroom.go(
 opt_container
)

Beispiele

Im Folgenden finden Sie HTML-Beispiele für die Implementierung der Schaltfläche „Mit Classroom teilen“.

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 explizit in einer Teilmenge des DOM 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 Rendern

<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 FAQs geht es um technische Aspekte und Implementierungsdetails. Weitere Ressourcen finden Sie in den allgemeinen FAQs.

Wie teste ich die Integration der Schaltfläche „Teilen in Classroom“?

Sie können Classroom-Testkonten anfordern, um die Freigabe von Inhalten über Ihre Integration in Classroom 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 Share-Tag-Parametern angegeben, um die URL anzugeben, die in Classroom freigegeben werden soll.

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

Sie kennen Ihre Seite und Ihre Nutzer am besten. Wir empfehlen Ihnen daher, die Schaltfläche dort zu platzieren, wo sie Ihrer Meinung nach am effektivsten ist. Ein guter Ort ist oft „above the fold“, in der Nähe des Seitentitels 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 der erstellten Inhalte zu platzieren.

Hat die Position des script-Tags auf der Seite Auswirkungen auf die Latenz?

Nein, das Placement des script-Tags hat keine erheblichen Auswirkungen auf die Latenz. Wenn Sie das Tag jedoch unten im Dokument platzieren, kurz bevor das body-Tag geschlossen wird, lässt sich die Ladezeit der Seite möglicherweise 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 Abschnitt „JavaScript API“ aufruft?

Ja. Wenn Sie eine der JavaScript API-Methoden verwenden, müssen Sie sie auf der Seite nach der Einbindung von script platzieren. Außerdem können Sie async defer nicht mit den JavaScript API-Methoden verwenden.

Muss ich das url-Attribut verwenden?

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

Einigen Nutzern wird eine Sicherheitswarnung angezeigt, wenn sie Seiten mit der Schaltfläche „Teilen“ aufrufen. Wie kann ich diese Warnung beseitigen?

Der Code für die Schaltfläche „Teilen“ erfordert ein Script von den Google-Servern. Dieser Fehler kann auftreten, wenn du das Script mit http:// auf einer Seite einfügst, die mit https:// geladen wird. Wir empfehlen, https:// zu verwenden, um das Script einzufügen:

Welche Webbrowser werden unterstützt?

Die Schaltfläche „Teilen“ in Classroom wird von denselben Webbrowsern unterstützt wie die Weboberfläche von Classroom, z. B. Chrome, Firefox®, Internet Explorer® oder Safari®. Hinweis: Die für „onsharestart“ und „onsharecomplete“ angegebenen Funktionen werden für Nutzer des Internet Explorers nicht aufgerufen.

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

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