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.googapi.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.
| Attributo | Valore | Predefinito | Descrizione |
|---|---|---|---|
body |
stringa | null | Imposta il corpo del testo dell'elemento da condividere in Classroom. |
courseid |
stringa | null | Se specificato, imposta l'ID corso in modo che venga preselezionato nel menu "Scegli corso" visualizzato dopo che un utente fa clic sul pulsante di condivisione. L'utente può modificare questo valore preselezionato, se necessario. |
itemtype |
announcement, assignment, material o question |
null | La finestra di dialogo di creazione verrà visualizzata automaticamente dopo che l'utente avrà selezionato un corso per la prima volta (o immediatamente se è specificato anche courseid). Se uno studente sceglie un corso o un insegnante sceglie un corso di cui è studente, questo valore viene ignorato. |
locale |
Tag lingua conforme a RFC 3066 | en-US |
Imposta la lingua per il pulsante aria-label per motivi di accessibilità. Questo non influisce sulla lingua della finestra di dialogo di condivisione visualizzata quando l'utente fa clic sul pulsante, che dipende dalle preferenze del browser dell'utente. |
onsharecomplete |
stringa | null | Se specificato, imposta il nome di una funzione nello spazio dei nomi globale che viene richiamata quando l'utente termina la condivisione del collegamento. Se trasmetti gli argomenti tramite parametri a gapi.sharetoclassroom.render, puoi anche utilizzare una funzione stessa. Questa funzionalità non è supportata su Internet Explorer (vedi sotto). |
onsharestart |
stringa | null | Se specificato, imposta il nome di una funzione nello spazio dei nomi globale che viene chiamato all'apertura della finestra di dialogo di condivisione. Se trasmetti gli argomenti tramite parametri a gapi.sharetoclassroom.render, puoi anche utilizzare una funzione stessa. Questa funzionalità non è supportata su Internet Explorer (vedi sotto). |
size |
int | null | Imposta le dimensioni in pixel del pulsante di condivisione. Se la dimensione viene omessa, il pulsante utilizza 32. |
theme |
classic, dark o light |
classic |
Imposta l'icona del pulsante per il tema selezionato. |
title |
stringa | null | Imposta il titolo dell'elemento da condividere in Classroom. |
url |
URL da condividere | null | Imposta l'URL da condividere in Classroom. Se imposti questo attributo utilizzando gapi.sharetoclassroom.render, non devi eseguire l'escape dell'URL. |
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.
| Metodo | Descrizione |
|---|---|
gapi.sharetoclassroom.render( container, parameters ) |
Visualizza il contenitore specificato come pulsante di condivisione.
|
gapi.sharetoclassroom.go( opt_container ) |
Visualizza tutti i tag e le classi del pulsante di condivisione nel contenitore specificato.
Questa funzione deve essere utilizzata solo se parsetags è impostato su
explicit, cosa che potresti fare per motivi di prestazioni.
|
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.