Sie können die Schaltfläche zum Teilen von Inhalten in Classroom hinzufügen und anpassen, um die Anforderungen Ihrer Website zu erfüllen, z. B. um die Größe der Schaltfläche und die Lademethode zu ändern. Wenn Sie die Schaltfläche zum Teilen von Inhalten in Classroom auf Ihrer Website einfügen, ermöglichen Sie es Ihren Nutzern, Ihre Inhalte für ihre Kurse freizugeben und so die Zugriffe auf Ihre Website zu erhöhen.
Erste Schritte
Einfache Schaltfläche
Die einfachste Methode zum Einbinden einer Classroom-Freigabeschaltfläche auf Ihrer Seite ist das Hinzufügen der erforderlichen JavaScript-Ressource und das Hinzufügen eines Tags für die Freigabeschaltfläche:
<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 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 Freigabe-Tags als Schaltflächen. Du kannst die Renderingzeit auf großen Seiten verbessern, indem du mithilfe 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
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 Classroom festlegen
Die URL, die mit Classroom geteilt wird, wird durch das Attribut url der Schaltfläche bestimmt.
Dieses Attribut definiert die zu teilende Ziel-URL explizit und muss festgelegt werden, damit die Schaltfläche „Teilen“ gerendert wird.
Skript-Tag-Parameter
Diese Parameter sind in einem <script />-Element definiert, das vor dem Laden des Skripts platform.js ausgeführt werden muss. Mit den Parametern wird der Mechanismus für das Laden von Schaltflächen gesteuert, der auf der gesamten Webseite verwendet wird.
Zulässige Parameter sind:
- onload
- Nach dem Laden der Seite werden alle Freigabeschaltflächen auf der Seite automatisch gerendert. Weitere Informationen finden Sie im 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, können Sie verhindern, dass das Skript das gesamte DOM durchläuft. Dies kann die Renderingzeit der Schaltfläche verbessern. Siehe die Beispiele gapi.sharetoclassroom.go und gapi.sharetoclassroom.render.
Tag-Attribute teilen
Mit diesen Parametern werden die Einstellungen für die einzelnen Schaltflächen festgelegt. Du kannst diese Parameter als attribute=value-Paare für Tags der 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 mit Classroom geteilt werden soll. |
courseid |
String | null | Wenn diese Option festgelegt ist, wird die Kurs-ID im Menü „Kurs auswählen“ vorab ausgewählt, 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 | Dadurch wird automatisch das Dialogfeld zur Erstellung angezeigt, nachdem der Nutzer einen Kurs ausgewählt hat (oder sofort, wenn auch courseid angegeben ist). Wenn ein Schüler oder Student ein Kurs oder eine Lehrkraft einen Kurs auswählt, in dem er ein Student ist, wird dieser Wert ignoriert. |
locale |
RFC 3066-konformes Sprach-Tag | en-US |
Legt die Sprache für die Schaltfläche aria-label für Bedienungshilfen fest. Dies hat keinen Einfluss auf die Sprache des Freigabedialogs, der angezeigt wird, wenn der Nutzer auf die Schaltfläche klickt. Sie ist von den Browsereinstellungen des Nutzers betroffen. |
onsharecomplete |
String | null | Wenn dieses Flag angegeben ist, wird der Name einer Funktion im globalen Namespace festgelegt, der aufgerufen wird, wenn der Nutzer die Freigabe Ihres Links abgeschlossen hat. Wenn Sie Ihre Argumente über Parameter an gapi.sharetoclassroom.render übergeben, können Sie auch eine Funktion verwenden. Diese Funktion funktioniert nicht im Internet Explorer (siehe unten). |
onsharestart |
String | null | Wenn dieses Flag angegeben ist, wird der Name einer Funktion im globalen Namespace festgelegt, der beim Öffnen des Freigabedialogs aufgerufen wird. Wenn Sie Ihre Argumente über Parameter an gapi.sharetoclassroom.render übergeben, können Sie auch eine Funktion verwenden. Diese Funktion funktioniert nicht im Internet Explorer (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 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 für Classroom freigegeben werden soll. Wenn Sie dieses Attribut mit gapi.sharetoclassroom.render festlegen, sollten Sie die URL nicht maskieren. |
Richtlinien für die Schaltfläche „Mit Classroom teilen“
Die Schaltfläche zum Teilen von Inhalten in Classroom sollte unseren Richtlinien für die Mindest- und Mindestgröße sowie den zugehörigen Farb-/Schaltflächenvorlagen entsprechen. Die Schaltfläche unterstützt verschiedene Größen, von einer Mindestgröße von 32 bis maximal 96 Pixeln.
| Design | Beispiel |
|---|---|
| Klassisch |  |
| Dunkel |  |
| Leicht |  |
Anpassen
Wir möchten, dass Sie das Symbol in keiner Weise verändern oder neu erstellen. Wenn Sie jedoch in Ihrer App mehrere Social-Media-Symbole von Drittanbietern zusammen anzeigen lassen, können Sie das Classroom-Symbol an den Stil Ihrer App anpassen. Achten Sie in diesem Fall darauf, dass alle Schaltflächen ähnlich formatiert sind und dass alle Anpassungen den Branding-Richtlinien für Classroom entsprechen. Wenn Sie die Darstellung und das Verhalten der Schaltfläche zum Teilen 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 der Freigabeschaltfläche werden zwei Funktionen zum Rendern von Schaltflächen im Namespace gapi.sharetoclassroom definiert. 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 „Teilen“ wieder.
|
gapi.sharetoclassroom.go( opt_container ) |
Gibt alle Tags und Klassen der Freigabeschaltfläche im angegebenen Container wieder.
Diese Funktion sollte nur verwendet werden, wenn parsetags auf explicit gesetzt ist, was Sie möglicherweise 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 der Schaltfläche zum Teilen in Classroom?
Sie können Classroom-Testkonten anfordern, um die Integration mit Classroom zu testen.
Kann ich auf einer Seite mehrere Schaltflächen platzieren, die alle unterschiedliche URLs haben?
Ja. Verwenden Sie das Attribut url, das in den Freigabe-Tag-Parametern angegeben ist, um die URL anzugeben, die für Classroom freigegeben werden soll.
Wo sollte ich die Schaltfläche zum 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 du deiner Meinung nach am effektivsten bist. Oft ist „above the fold“ (ohne Scrollen sichtbar), in der Nähe des Titels und der Freigabelinks ein guter Ort. Es kann auch effektiv sein, die Schaltfläche „Teilen“ sowohl am Ende als auch am Anfang eines erstellten Inhalts zu platzieren.
Hat die Position des <script>-Tags auf der Seite Auswirkungen auf die Latenz?
Nein, die Platzierung des <script>-Tags hat keine signifikanten Auswirkungen auf die Latenz. Wenn Sie das Tag jedoch am unteren Rand des Dokuments, unmittelbar vor dem schließenden Tag </body>, platzieren, verbessern Sie unter Umständen die Ladegeschwindigkeit der Seite.
Muss das <script>-Tag vor dem Freigabe-Tag eingefügt werden?
Nein, das <script>-Tag kann überall 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 <script>-Einbindung in die Seite eingefügt 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 über die Schaltfläche „Teilen“ aufrufen. Wie kann ich diese Warnung beseitigen?
Der Code der Schaltfläche zum Teilen erfordert ein Skript von den Google-Servern. Dieser Fehler kann auftreten, wenn Sie das Skript über http:// auf eine Seite einfügen, die über https:// geladen wird. Wir empfehlen https://, um das Skript einzubinden:
<script src="https://apis.google.com/js/platform.js" async defer></script>
Welche Webbrowser werden unterstützt?
Die Schaltfläche zum Teilen von Inhalten in Classroom 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 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 Schaltfläche zum Teilen 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.