Vous pouvez ajouter et personnaliser le bouton de partage Classroom pour répondre aux besoins de votre site Web, par exemple en modifiant la taille du bouton et la technique de chargement. En ajoutant le bouton de partage Classroom à votre site Web, vous permettez aux utilisateurs de partager votre contenu avec leurs classes et générez du trafic vers votre site.
Premiers pas
Un simple bouton
La méthode la plus simple pour inclure un bouton de partage Classroom à votre page consiste à inclure la ressource JavaScript nécessaire et un tag de bouton de partage:
<script src="https://apis.google.com/js/platform.js" async defer></script>
<g:sharetoclassroom url="http://url-to-share" size="32"></g:sharetoclassroom>
Le script doit être chargé via le protocole HTTPS et peut être intégré à partir de n'importe quel point de la page sans restriction. Pour en savoir plus, consultez les questions fréquentes.
Vous pouvez également utiliser une balise de partage valide HTML5 en définissant l'attribut de classe sur g-sharetoclassroom
et en ajoutant data-
au préfixe de tous les attributs du bouton.
<div class="g-sharetoclassroom" data-size="32" data-url="..." ></div>
Par défaut, le script inclus balaie le DOM et affiche les balises de partage sous forme de boutons. Pour réduire le délai d'affichage sur les pages volumineuses, utilisez l'API JavaScript pour parcourir un seul élément de la page ou pour afficher un élément spécifique sous forme de bouton de partage.
Exécution différée avec onLoad
et des paramètres de tag de script
Définissez le paramètre de balise de script parsetags
sur onload
(par défaut) ou explicit
pour déterminer quand le code du bouton est exécuté. Pour spécifier les paramètres de tag de script, utilisez la syntaxe suivante:
<script >
window.___gcfg = {
parsetags: 'onload'
};
</script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
Configuration
Définir l'URL à partager avec Classroom
L'URL partagée avec Classroom est déterminée par l'attribut url
du bouton.
Cet attribut définit explicitement l'URL cible à partager et doit être défini pour afficher le bouton de partage.
Paramètres de tag de script
Ces paramètres sont définis dans un élément <script />
qui doit s'exécuter avant de charger le script platform.js
. Les paramètres contrôlent le mécanisme de chargement des boutons utilisé sur l'ensemble de la page Web.
Les paramètres autorisés sont les suivants:
- Lors du chargement
- Tous les boutons de partage d'une page s'affichent automatiquement une fois celle-ci chargée. Consultez l'exemple d'exécution différée onLoad.
- Explicite
- Les boutons de partage ne s'affichent qu'avec des appels explicites à
gapi.sharetoclassroom.go
ougapi.sharetoclassroom.render
.
Lorsque vous utilisez le chargement explicite avec des appels go et d'affichage qui pointent vers des conteneurs spécifiques de votre page, vous empêchez le script de parcourir l'intégralité du DOM, ce qui peut réduire le délai d'affichage du bouton. Consultez les exemples gapi.sharetoclassroom.go
et gapi.sharetoclassroom.render
.
Partager les attributs de la balise
Ces paramètres contrôlent les paramètres de chaque bouton. Vous pouvez définir ces paramètres en tant que paires attribute=value
sur les balises de bouton de partage ou en tant que paires key:value
JavaScript dans un appel à gapi.sharetoclassroom.render
.
Attribut | Valeur | Par défaut | Description |
---|---|---|---|
body |
string | nul | Définit le corps du texte de l'élément à partager dans Classroom. |
courseid |
string | nul | S'il est spécifié, définit l'ID du cours sur "Présélection" dans le menu "Sélectionner un cours" qui s'affiche lorsque l'utilisateur clique sur le bouton de partage. Si nécessaire, l'utilisateur peut modifier cette valeur présélectionnée. |
itemtype |
announcement , assignment , material ou question |
nul | La boîte de dialogue de création s'affiche automatiquement lorsque l'utilisateur sélectionne un cours pour la première fois (ou immédiatement si courseid est également spécifié). Si un élève choisit un cours ou qu'un enseignant choisit un cours dans lequel il est élève, cette valeur est ignorée. |
locale |
Balise de langue conforme à la norme RFC 3066 | en-US |
Définit la langue du bouton aria-label pour des raisons d'accessibilité. Cela n'a aucune incidence sur la langue de la boîte de dialogue de partage qui s'affiche lorsque l'utilisateur clique sur le bouton, car elle dépend des préférences de son navigateur. |
onsharecomplete |
string | nul | Si une valeur est spécifiée, elle définit le nom d'une fonction dans l'espace de noms global qui est appelée lorsque l'utilisateur a terminé de partager votre lien. Si vous transmettez vos arguments via des paramètres à gapi.sharetoclassroom.render , vous pouvez également utiliser une fonction elle-même. Cette fonctionnalité n'est pas disponible dans Internet Explorer (voir ci-dessous). |
onsharestart |
string | nul | Si spécifié, définit le nom d'une fonction dans l'espace de noms global appelée à l'ouverture de la boîte de dialogue de partage. Si vous transmettez vos arguments via des paramètres à gapi.sharetoclassroom.render , vous pouvez également utiliser une fonction elle-même. Cette fonctionnalité n'est pas disponible dans Internet Explorer (voir ci-dessous). |
size |
int | nul | Définit la taille en pixels du bouton de partage. Si la taille est omise, le bouton utilise 32. |
theme |
classic , dark ou light |
classic |
Définit l'icône du bouton pour le thème sélectionné. |
title |
string | nul | Définit le titre de l'élément à partager dans Classroom. |
url |
URL à partager | nul | Définit l'URL à partager avec Classroom. Si vous définissez cet attribut à l'aide de gapi.sharetoclassroom.render , vous ne devez pas échapper l'URL. |
Consignes concernant le bouton de partage Classroom
L'affichage du bouton de partage Classroom doit respecter nos consignes de taille minimale et maximale et les modèles de couleur et de bouton associés. Le bouton est compatible avec différentes tailles, d'une taille minimale de 32 pixels à un maximum de 96 pixels.
Thème | Exemple |
---|---|
Classique | |
Sombre | |
Faible |
Personnalisation
Nous vous recommandons de ne pas la modifier ni la refaire de quelque manière que ce soit. Toutefois, si vous affichez plusieurs icônes de réseaux sociaux tierces dans votre application, vous pouvez personnaliser l'icône Classroom pour qu'elle corresponde au style de votre application. Dans ce cas, assurez-vous que tous les boutons sont personnalisés dans un style similaire et que les personnalisations respectent les consignes relatives à la marque de Classroom. Si vous souhaitez contrôler entièrement l'apparence et le comportement du bouton de partage, vous pouvez lancer le partage via une URL ayant la structure suivante : https://classroom.google.com/share?url={url-to-share}
.
API JavaScript
Le code JavaScript du bouton de partage définit deux fonctions de rendu du bouton sous l'espace de noms gapi.sharetoclassroom
. Vous devez appeler l'une de ces fonctions si vous désactivez l'affichage automatique en définissant parsetags sur explicit
.
Méthode | Description |
---|---|
gapi.sharetoclassroom.render( container, parameters ) |
Affiche le conteneur spécifié en tant que bouton de partage.
|
gapi.sharetoclassroom.go( opt_container ) |
Affiche toutes les balises et classes du bouton de partage dans le conteneur spécifié.
Cette fonction ne doit être utilisée que si parsetags est défini sur explicit , ce qui peut être utile pour des raisons de performances.
|
Exemples
Page de base
<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>
Chargez explicitement des balises dans un sous-ensemble du DOM.
<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>
Affichage explicite
<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>
Questions fréquentes
Les questions fréquentes suivantes traitent des considérations techniques et des détails de mise en œuvre. Pour accéder à des ressources supplémentaires, consultez les questions fréquentes générales.
Comment tester l'intégration du bouton de partage Classroom ?
Vous pouvez demander des comptes de test Classroom pour tester le partage dans Classroom à partir de votre intégration.
Puis-je placer sur une même page plusieurs boutons partageant des URL différentes ?
Oui. Utilisez l'attribut url
comme spécifié dans les paramètres de balise de partage pour indiquer l'URL à partager avec Classroom.
Où dois-je placer le bouton de partage sur mes pages ?
Vous connaissez mieux que personne votre page et vos utilisateurs. Nous vous recommandons donc de placer le bouton là où vous le jugez le plus efficace. La partie au-dessus de la ligne de flottaison, à côté du titre de la page et à proximité des liens de partage est un bon emplacement. Il peut également être utile de placer le bouton de partage à la fin et au début d'un contenu créé.
La position de la balise <script>
sur la page a-t-elle un impact sur la latence ?
Non, le placement de la balise <script>
n'a pas d'impact significatif sur la latence. Toutefois, en plaçant la balise au bas du document, juste avant la balise de fermeture </body>
, vous pouvez améliorer la vitesse de chargement de la page.
La balise <script>
doit-elle être incluse avant la balise de partage ?
Non, vous pouvez inclure la balise <script>
n'importe où sur la page.
La balise <script>
doit-elle être incluse avant qu'une autre balise <script>
appelle l'une des méthodes de la section de l'API JavaScript ?
Oui. Si vous utilisez l'une des méthodes de l'API JavaScript, vous devez la placer sur la page après l'inclusion de <script>
. Vous ne pouvez pas non plus utiliser async defer
avec les méthodes de l'API JavaScript.
Dois-je utiliser l'attribut url
?
L'attribut url
est obligatoire. Si vous ne définissez pas explicitement url
, le bouton de partage ne s'affichera pas.
Pour en savoir plus, consultez Partager l'URL cible.
Certains de mes utilisateurs reçoivent un avertissement de sécurité lorsqu'ils consultent des pages à l'aide du bouton "Partager". Que puis-je faire pour y remédier ?
Le code du bouton de partage nécessite un script des serveurs Google. Vous pouvez obtenir cette erreur si vous incluez le script via http://
sur une page chargée via https://
. Nous vous recommandons d'utiliser https://
pour inclure le script:
<script src="https://apis.google.com/js/platform.js" async defer></script>
Quels sont les navigateurs Web compatibles ?
Le bouton de partage Classroom est compatible avec les mêmes navigateurs Web que l'interface Web de Classroom, ainsi que les navigateurs tels que Chrome, Firefox®, Internet Explorer® ou Safari®. Remarque: les fonctions spécifiées pour onsharestart et onsharecomplete ne sont pas appelées pour les utilisateurs d'Internet Explorer.
Quelles données sont envoyées à Classroom lorsque vous cliquez sur le bouton de partage Classroom ?
Lorsqu'un utilisateur clique sur le bouton de partage, il est invité à se connecter avec son compte G Suite for Education. Une fois l'authentification effectuée, le compte utilisateur et l'attribut url
sont envoyés à Classroom pour finaliser la publication.