Ajouter un bouton de partage Classroom

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 ou gapi.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.

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.

gapi.sharetoclassroom.render(
 container,
 parameters
)

gapi.sharetoclassroom.go(
 opt_container
)

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.