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.goodergapi.sharetoclassroom.rendergerendert.
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.
|
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.
|
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.