Ajouter un bouton de partage Classroom

Vous pouvez ajouter et personnaliser le bouton de partage Classroom en fonction des besoins de votre site Web, par exemple modifier la taille du bouton et la technique de chargement. En ajoutant le bouton de partage Classroom à votre site Web, vous permettez à vos utilisateurs de partager votre contenu avec leurs classes et de générer du trafic vers votre site.

Premiers pas

Un simple bouton

La méthode la plus simple pour inclure un bouton de partage Classroom sur votre page consiste à inclure la ressource JavaScript nécessaire et à ajouter une balise 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 le préfixe de tous les attributs de bouton à data-.

<div class="g-sharetoclassroom" data-size="32" data-url="..." ></div>

Par défaut, le script inclus parcourt le DOM et affiche les tags de partage sous forme de boutons. Vous pouvez améliorer le délai d'affichage sur les pages volumineuses en utilisant l'API JavaScript pour parcourir un seul élément de la page ou en affichant un élément spécifique en tant que bouton de partage.

Exécution différée avec les paramètres de tag onLoad et de tag de script

Définissez le paramètre de tag 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 dans Classroom

L'URL partagée dans 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 être exécuté avant le chargement du script platform.js. Ces 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 de la page s'affichent automatiquement après son chargement. 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 conjointement avec des appels go et rendu qui pointent vers des conteneurs spécifiques de votre page, vous empêchez le script de traverser le DOM complet, ce qui peut améliorer le délai d'affichage du bouton. Consultez les exemples pour 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 des tags de bouton de partage ou en tant que paires JavaScript key:value dans un appel à gapi.sharetoclassroom.render.

Consignes pour le bouton de partage Classroom

L'affichage du bouton de partage Classroom doit respecter nos consignes concernant la taille minimale et maximale, ainsi que les modèles de couleur et de bouton associés. Ce bouton accepte différentes tailles (de 32 à 96 pixels au minimum).

Thème	Exemple
Classique
Sombre
Clair

Personnalisation

Nous vous conseillons de ne pas modifier ni redéfinir l'icône de quelque manière que ce soit. Toutefois, si vous affichez plusieurs icônes de réseaux sociaux tierces ensemble dans votre application, vous pouvez personnaliser l'icône Classroom pour l'adapter au style de votre application. Dans ce cas, assurez-vous que tous les boutons sont personnalisés dans un style similaire et que toutes les personnalisations respectent les consignes relatives à la marque 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 de 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 des boutons 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 les 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>

Charger explicitement les tags 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>

Rendu 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 concernent les considérations techniques et les 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 test Classroom pour tester le partage avec Classroom depuis votre intégration.

Puis-je placer, sur une même page, plusieurs boutons associés à des URL différentes ?

Oui. Utilisez l'attribut url comme spécifié dans les paramètres de tag de partage pour indiquer l'URL à partager avec Classroom.

Où dois-je placer le bouton de partage sur mes pages ?

Vous connaissez mieux que quiconque votre page et vos utilisateurs. Nous vous recommandons donc de placer le bouton là où vous pensez qu'il sera le plus efficace. Dans la partie au-dessus de la ligne de flottaison, à proximité du titre de la page et à proximité des liens de partage, Vous pouvez aussi 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, l'emplacement du tag <script> n'a pas d'impact significatif sur la latence. Toutefois, en plaçant le tag au bas du document, juste avant le tag 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, la balise <script> peut être incluse n'importe où sur la page.

Le tag <script> doit-il être inclus avant qu'un autre tag <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 les pages contenant le 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 en incluant 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 de 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® et Safari®. Remarque: les fonctions spécifiées pour onsharestart et onsharecomplete ne sont pas appelées pour les utilisateurs d'Internet Explorer.

Quelles sont les données envoyées à Classroom lorsque vous cliquez sur le bouton de partage de 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 terminer la publication.