Sie können die Schaltfläche zum Teilen in Classroom hinzufügen und anpassen, um sie an die Anforderungen Ihrer Website anzupassen. Beispielsweise können Sie die Schaltflächengröße und die Ladetechnik ändern. Wenn Sie Ihrer Website die Schaltfläche „Classroom teilen“ hinzufügen, können Ihre Nutzer die Inhalte mit ihren Klassen teilen und so mehr Zugriffe auf Ihre Website generieren.
Erste Schritte
Eine einfache Schaltfläche
Die einfachste Methode zum Einbinden einer Classroom-Schaltfläche zum Teilen auf Ihrer Seite besteht darin, die erforderliche JavaScript-Ressource einzubinden und ein Tag für die Schaltfläche zum Teilen 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 HTML5-gültiges Freigabe-Tag verwenden, indem Sie das Klassenattribut auf g-sharetoclassroom festlegen 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 gibt Freigabe-Tags als Schaltflächen wieder. Du kannst die Renderingzeit auf großen Seiten verbessern, indem du mit der JavaScript API ein einzelnes Element auf der Seite durchsuchst oder ein bestimmtes Element als Schaltfläche zum Teilen renderst.
Ausgesetzte Ausführung mit onLoad und Skript-Tag-Parametern
Setze den Skript-Tag-Parameter parsetags auf onload (Standard) oder explicit, um zu bestimmen, 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 zum Teilen mit Classroom festlegen
Die URL, die mit Classroom geteilt wird, wird durch das Attribut url der Schaltfläche bestimmt.
Dieses Attribut definiert die Ziel-URL explizit, die geteilt werden soll, und muss festgelegt werden, um die Schaltfläche zum 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. Mit den Parametern wird der Mechanismus zum Laden von Schaltflächen gesteuert, der auf der gesamten Webseite verwendet wird.
Folgende Parameter sind zulässig:
- onload
- Nach dem Laden der Seite werden automatisch alle Freigabeschaltflächen auf der Seite gerendert. Siehe das Beispiel für die verzögerte Ausführung von onLoad.
- Explizit
- Freigabeschaltflächen werden nur mit expliziten Aufrufen von
gapi.sharetoclassroom.goodergapi.sharetoclassroom.rendergerendert.
Wenn Sie das explizite Laden in Verbindung 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 Darstellungszeit der Schaltfläche verbessert werden. Beispiele für gapi.sharetoclassroom.go und gapi.sharetoclassroom.render.
Tag-Attribute freigeben
Mit diesen Parametern werden die Einstellungen für die einzelnen Schaltflächen festgelegt. Du kannst diese Parameter als attribute=value-Paare bei Tags für die Schaltfläche „Teilen“ oder als JavaScript-key:value-Paare in einem Aufruf von gapi.sharetoclassroom.render festlegen.
| Attribut | Wert | Standard | Beschreibung |
|---|---|---|---|
body |
String | Null | Legt den Textkörper des Elements fest, das für Classroom freigegeben werden soll. |
courseid |
String | Null | Wenn diese Option angegeben ist, wird die Kurs-ID im Menü „Kurs auswählen“ vorab ausgewählt und angezeigt, wenn ein Nutzer auf die Schaltfläche zum Teilen klickt. Der Nutzer kann diesen vorab ausgewählten Wert bei Bedarf ändern. |
itemtype |
announcement, assignment, material oder question |
Null | Das Dialogfeld für die Erstellung wird automatisch angezeigt, sobald der Nutzer einen Kurs auswählt (oder sofort, wenn courseid ebenfalls angegeben ist). Wenn ein Schüler oder Student eine Klasse oder eine Lehrkraft auswählt, in der er Schüler oder Student ist, wird dieser Wert ignoriert. |
locale |
RFC 3066-konformes Sprach-Tag | en-US |
Legt die Sprache für die Schaltfläche aria-label als Bedienungshilfe fest. Dies wirkt sich nicht auf die Sprache des Dialogfelds für die Freigabe aus, das erscheint, wenn der Nutzer auf die Schaltfläche klickt. Diese Einstellung ist von den Browsereinstellungen des Nutzers abhängig. |
onsharecomplete |
String | Null | Wenn dieses Flag angegeben ist, wird der Name einer Funktion im globalen Namespace festgelegt, der aufgerufen wird, wenn der Nutzer die Linkfreigabe beendet 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 | Legt den Namen einer Funktion im globalen Namespace fest, der 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. Diese Funktion ist im Internet Explorer nicht verfügbar (siehe unten). |
size |
int | Null | Legt die Größe der Schaltfläche „Teilen“ in Pixeln fest. Wird die Größe weggelassen, 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 mit Classroom geteilt werden soll. |
url |
Zu teilende URL: | Null | Legt die URL fest, die mit Classroom geteilt werden soll. Wenn Sie dieses Attribut mit gapi.sharetoclassroom.render festlegen, sollten Sie die URL nicht maskieren. |
Richtlinien für die Classroom-Schaltfläche zum Teilen
Die Anzeige der Schaltfläche zum Teilen in Classroom sollte unseren Richtlinien für die Mindestgröße und den zugehörigen Farb-/Schaltflächenvorlagen entsprechen. Die Schaltfläche unterstützt verschiedene Größen, von einer Mindestgröße von 32 bis maximal 96 Pixel.
| Theme | Beispiel |
|---|---|
| Classic |  |
| Dunkel |  |
| Hell |  |
Das Symbol darf nicht verändert oder neu erstellt werden. Wenn Sie jedoch mehrere Social-Media-Symbole von Drittanbietern in Ihrer App gemeinsam anzeigen lassen, können Sie das Classroom-Symbol an den Stil Ihrer App anpassen. Voraussetzung ist, dass alle Schaltflächen auf ähnliche Weise angepasst sind.
Weitere Informationen finden Sie in den Branding-Richtlinien für Classroom.
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.
| Methode | Beschreibung |
|---|---|
gapi.sharetoclassroom.render( container, parameters ) |
Gibt den angegebenen Container als Schaltfläche zum Teilen wieder
|
gapi.sharetoclassroom.go( opt_container ) |
Gibt alle Schaltflächen und Tags der Freigabeschaltfläche im angegebenen Container wieder.
Diese Funktion sollte nur verwendet werden, wenn parsetags auf explicit gesetzt ist, was Sie aus Leistungsgründen tun können.
|
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 explizit in einem Teil des DOMs 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 FAQs werden technische Überlegungen und Implementierungsdetails behandelt. Weitere Ressourcen finden Sie in den allgemeinen FAQs.
Wie teste ich die Einbindung meiner Classroom-Schaltfläche zum Teilen?
Sie können Classroom-Testkonten anfordern, um die 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 Parametern für das Freigabe-Tag angegeben, um die URL anzugeben, die für Classroom freigegeben 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, die Schaltfläche dort zu platzieren, wo sie deiner Meinung nach am effektivsten ist. Oft ist es sinnvoll, „above the fold“ (ohne Scrollen sichtbar), in der Nähe des Titels der Seite und in der Nähe von Links zu platzieren. Es kann auch effektiv sein, die Schaltfläche „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, das Placement des Tags <script> hat keine signifikanten Auswirkungen auf die Latenz. Wenn Sie das Tag jedoch unten im Dokument unmittelbar vor dem schließenden Tag </body> platzieren, können Sie die Ladegeschwindigkeit der Seite verbessern.
Muss das <script>-Tag vor dem Freigabe-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 du eine der JavaScript API-Methoden verwendest, müssen diese nach der Aufnahme <script> auf der Seite platziert werden. Sie können async defer auch nicht mit einer der JavaScript API-Methoden verwenden.
Muss ich das Attribut „url“ 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.
Einige meiner Nutzer erhalten eine Sicherheitswarnung, wenn sie Seiten mit der Schaltfläche „Teilen“ aufrufen. Wie kann ich diese Warnung beseitigen?
Der Code für die Schaltfläche zum Teilen erfordert ein Skript von den Google-Servern. Dieser Fehler kann auftreten, wenn Sie das Skript über http:// in eine Seite einfügen, die über https:// geladen wird. Wir empfehlen die Verwendung von https:// zum Einbinden des Skripts:
<script src="https://apis.google.com/js/platform.js" async defer></script>
Welche Webbrowser werden unterstützt?
Die Classroom-Schaltfläche zum Freigeben unterstützt dieselben Webbrowser wie die Classroom-Weboberfläche, Browser wie Chrome, Firefox®, Internet Explorer® oder Safari®. Hinweis: Die für „onstartstart“ und „onsharecomplete“ angegebenen Funktionen werden für Nutzer von Internet Explorer nicht aufgerufen.
Welche Daten werden an Classroom gesendet, wenn Sie auf die Schaltfläche zum Teilen von Inhalten 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 url-Attribut an Classroom gesendet, um den Beitrag abzuschließen.