Aggiungere un pulsante di condivisione in Classroom

Puoi aggiungere e personalizzare il pulsante di condivisione di Classroom in base alle esigenze del tuo sito web, ad esempio modificare le dimensioni del pulsante e la tecnica di caricamento. Se aggiungi il pulsante di condivisione di Classroom al tuo sito web, consenti agli utenti di condividere i tuoi contenuti con i propri corsi e indirizzare il traffico al tuo sito.

Come iniziare

Un pulsante semplice

Il metodo più semplice per includere un pulsante di condivisione Classroom nella tua pagina è includere la risorsa JavaScript necessaria e aggiungere un tag del pulsante di condivisione:

<script src="https://apis.google.com/js/platform.js" async defer></script>
<g:sharetoclassroom url="http://url-to-share" size="32"></g:sharetoclassroom>

Lo script deve essere caricato utilizzando il protocollo HTTPS e può essere incluso da qualsiasi punto della pagina senza limitazioni. Per ulteriori informazioni, consulta le Domande frequenti.

Puoi anche utilizzare un tag di condivisione valido per HTML5 impostando l'attributo class su g-sharetoclassroom e anteponendo a qualsiasi attributo del pulsante il prefisso data-.

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

Per impostazione predefinita, lo script incluso attraversa il DOM e esegue il rendering dei tag di condivisione come pulsanti. Puoi migliorare i tempi di rendering delle pagine di grandi dimensioni utilizzando la JavaScript API per attraversare un solo elemento all'interno della pagina o per eseguire il rendering di un elemento specifico come pulsante di condivisione.

Esecuzione differita con onLoad e parametri tag script

Imposta il parametro del tag script parsetags su onload (valore predefinito) oppure explicit per determinare quando viene eseguito il codice del pulsante. Per specificare i parametri tag script, utilizza la seguente sintassi:

<script >
  window.___gcfg = {
    parsetags: 'onload'
  };
</script>
<script src="https://apis.google.com/js/platform.js" async defer></script>

Configurazione

Impostazione dell'URL da condividere in Classroom

L'URL condiviso con Classroom è determinato dall'attributo url del pulsante. Questo attributo definisce esplicitamente l'URL di destinazione da condividere e deve essere impostato per visualizzare il pulsante di condivisione.

Parametri tag script

Questi parametri sono definiti all'interno di un elemento <script /> che deve essere eseguito prima di caricare lo script platform.js. I parametri controllano il meccanismo di caricamento dei pulsanti utilizzato nell'intera pagina web.

I parametri consentiti sono:

onload

Tutti i pulsanti di condivisione sulla pagina vengono visualizzati automaticamente al termine del caricamento. Vedi l'esempio di esecuzione differita onLoad.

esplicito

I pulsanti di condivisione vengono visualizzati solo con chiamate esplicite a gapi.sharetoclassroom.go o gapi.sharetoclassroom.render.

Quando utilizzi il caricamento esplicito in combinazione con chiamate go e rendering che rimandano a container specifici nella pagina, impedisci allo script di attraversare l'intero DOM, il che può migliorare il tempo di rendering del pulsante. Vedi gli esempi di gapi.sharetoclassroom.go e gapi.sharetoclassroom.render.

Condividi attributi dei tag

Questi parametri controllano le impostazioni di ogni pulsante. Puoi impostare questi parametri come coppie attribute=value sui tag del pulsante di condivisione o come coppie JavaScript key:value in una chiamata a gapi.sharetoclassroom.render.

Linee guida relative al pulsante di condivisione in Classroom

La visualizzazione del pulsante di condivisione di Classroom deve essere conforme alle nostre linee guida sulle dimensioni minime e massime e ai relativi modelli di colore/pulsante. Il pulsante supporta una varietà di dimensioni, da una dimensione minima di 32 pixel a un massimo di 96 pixel.

Tema	Esempio
Classico
Scuro
Leggero

Personalizzazione

Preferiamo che non modifichi o ricrei l'icona in nessun modo. Tuttavia, se nell'app mostri più icone di social media di terze parti, puoi personalizzare l'icona di Classroom in base allo stile dell'app. In questo caso, assicurati che tutti i pulsanti siano personalizzati con uno stile simile e che le eventuali personalizzazioni siano conformi alle linee guida per il branding di Classroom. Se vuoi avere il controllo completo dell'aspetto e del comportamento del pulsante di condivisione, puoi avviare la condivisione tramite un URL con la seguente struttura: https://classroom.google.com/share?url={url-to-share}.

API JavaScript

Il codice JavaScript del pulsante di condivisione definisce due funzioni di rendering del pulsante all'interno dello spazio dei nomi gapi.sharetoclassroom. Devi chiamare una di queste funzioni se disattivi il rendering automatico impostando analyticstag su explicit.

gapi.sharetoclassroom.render(
 container,
 parameters
)

gapi.sharetoclassroom.go(
 opt_container
)

Esempi

Pagina di 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>

Carica esplicitamente i tag in un sottoinsieme del 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>

Rendering esplicito

<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>

Domande frequenti

Le seguenti domande frequenti riguardano considerazioni tecniche e dettagli di implementazione. Per risorse aggiuntive, consulta le Domande frequenti generali.

Come faccio a testare l'integrazione del pulsante di condivisione in Classroom?

Puoi richiedere gli account di prova di Classroom per testare la condivisione in Classroom dalla tua integrazione.

Posso inserire più pulsanti in una singola pagina che condividono URL diversi?

Sì. Utilizza l'attributo url come specificato nei parametri del tag di condivisione per indicare l'URL da condividere in Classroom.

Dove devo inserire il pulsante di condivisione nelle mie pagine?

Nessuno conosce la tua pagina e i tuoi utenti meglio di chiunque altro, quindi ti consigliamo di inserire il pulsante dove ritieni che sia più efficace. Spesso una buona posizione è above the fold, vicino al titolo della pagina e ai link di condivisione. Può essere utile anche posizionare il pulsante di condivisione alla fine e all'inizio di un contenuto creato.

La posizione del tag <script> nella pagina influisce sulla latenza?

No, il posizionamento del tag <script> non ha alcun impatto significativo sulla latenza. Tuttavia, posizionando il tag nella parte inferiore del documento, subito prima del tag di chiusura </body>, puoi migliorare la velocità di caricamento della pagina.

Il tag <script> deve essere incluso prima del tag di condivisione?

No, il tag <script> può essere incluso ovunque nella pagina.

Il tag <script> deve essere incluso prima che un altro tag <script> chiami uno dei metodi nella sezione dell'API JavaScript?

Sì, se utilizzi i metodi dell'API JavaScript, devi inserirli nella pagina dopo l'inclusione di <script>. Inoltre, non puoi utilizzare async defer con nessuno dei metodi dell'API JavaScript.

Devo utilizzare l'attributo url?

L'attributo url è obbligatorio. Se non imposti esplicitamente url, il pulsante di condivisione non verrà visualizzato. Per ulteriori informazioni, consulta l'articolo relativo alla condivisione dell'URL di destinazione.

Alcuni dei miei utenti ricevono un avviso di sicurezza quando visualizzano pagine con il pulsante di condivisione. Come faccio a impedirlo?

Il codice del pulsante di condivisione richiede uno script dai server di Google. Potresti ricevere questo errore includendo lo script tramite http:// in una pagina caricata tramite https://. Consigliamo di utilizzare https:// per includere lo script:

<script src="https://apis.google.com/js/platform.js" async defer></script>

Quali browser web sono supportati?

Il pulsante di condivisione di Classroom supporta gli stessi browser web dell'interfaccia web di Classroom, nonché browser come Chrome, Firefox®, Internet Explorer® o Safari®. Nota: le funzioni specificate per onsharestart e onsharecomplete non vengono richiamate per gli utenti di Internet Explorer.

Quali dati vengono inviati a Classroom quando fai clic sul pulsante di condivisione di Classroom?

Quando un utente fa clic sul pulsante di condivisione, gli viene chiesto di accedere con il proprio account G Suite for Education. Dopo l'autenticazione, l'account utente e l'attributo url vengono inviati a Classroom per completare il post.