Aggiungere un pulsante di condivisione Classroom

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

Per iniziare

Un pulsante di base

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

/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 data- a eventuali attributi del pulsante.

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

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

Esecuzione differita con i parametri onLoad e del tag script

Imposta il parametro del tag script parsetags su onload (valore predefinito) o su explicit per determinare quando viene eseguito il codice del pulsante. Per specificare i parametri del 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

Le sezioni seguenti descrivono i valori chiave di un pulsante Condividi con Classroom.

Impostare l'URL da condividere con 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 dei 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 del pulsante utilizzato nell'intera pagina web.

I parametri consentiti sono:

onload

Tutti i pulsanti di condivisione nella pagina vengono visualizzati automaticamente al caricamento della pagina. Consulta 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 le chiamate go e render che fanno riferimento a contenitori specifici nella pagina, impedisci allo script di attraversare l'intero DOM, il che può migliorare il tempo di rendering dei pulsanti. Consulta gli esempi gapi.sharetoclassroom.go e gapi.sharetoclassroom.render.

Condividere gli attributi dei tag

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

Linee guida per il pulsante di condivisione di Classroom

La visualizzazione del pulsante di condivisione di Classroom deve essere conforme alle nostre linee guida sulle dimensioni minime e massime e ai modelli di pulsanti o colori correlati. Il pulsante supporta una serie di dimensioni, da un minimo di 32 pixel a un massimo di 96 pixel.

Tema	Esempio
Classico
Scuro
Chiaro

Personalizzazione

Ti consigliamo di non modificare o rifare l'icona in alcun modo. Tuttavia, se nella tua app mostri più icone di social di terze parti, puoi personalizzare l'icona di Classroom in modo che corrisponda allo stile della tua app. In questo caso, assicurati che tutti i pulsanti siano personalizzati utilizzando uno stile simile e che le eventuali personalizzazioni rispettino le linee guida per il branding di Classroom. Se vuoi controllare completamente l'aspetto e il comportamento del pulsante di condivisione, puoi avviare la condivisione utilizzando 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 nello spazio dei nomi gapi.sharetoclassroom. Devi chiamare una di queste funzioni se disattivi il rendering automatico impostando parsetags su explicit.

gapi.sharetoclassroom.render(
 container,
 parameters
)

gapi.sharetoclassroom.go(
 opt_container
)

Esempi

Di seguito sono riportati esempi HTML di implementazioni del pulsante Condividi con Classroom.

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 ulteriori risorse, consulta le domande frequenti generali.

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

Puoi richiedere account di test di Classroom per testare la condivisione con Classroom dalla tua integrazione.

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

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

Dove devo inserire il pulsante di condivisione nelle mie pagine?

Sei tu a conoscere meglio la tua pagina e i tuoi utenti, quindi ti consigliamo di posizionare il pulsante dove ritieni che sia più efficace. Spesso una buona posizione è sopra la piega, vicino al titolo della pagina e vicino ai link di condivisione. Può essere utile anche posizionare il pulsante di condivisione sia alla fine che all'inizio dei contenuti creati.

La posizione del tag script nella pagina influisce sulla latenza?

No, il posizionamento del tag script non ha un impatto significativo sulla latenza. Tuttavia, posizionando il tag nella parte inferiore del documento, appena prima di chiudere il tag body, potresti 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 in qualsiasi punto della 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 uno dei metodi dell'API JavaScript, questi devono essere inseriti 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 Condividere l'URL di destinazione.

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

Il codice del pulsante di condivisione richiede uno script dei server di Google. Potresti visualizzare questo errore se includi lo script che utilizza http:// in una pagina caricata utilizzando https://. Ti consigliamo di utilizzare https:// per includere lo script:

Quali browser web sono supportati?

Il pulsante di condivisione di Classroom supporta gli stessi browser web dell'interfaccia web di Classroom, come Chrome, Firefox®, Internet Explorer® o Safari®. Nota: le funzioni specificate per onsharestart e onsharecomplete non vengono chiamate 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.