Google+ Platform

Pulsante +1

Documentazione

Puoi aggiungere e personalizzare il pulsante +1 per soddisfare i requisiti del tuo sito web, ad esempio per modificare le dimensioni del pulsante e la tecnica di load. Aggiungendo il pulsante +1 al tuo sito web, consenti ai tuoi utenti di consigliare i contenuti alle proprie cerchie e indirizzare il traffico al tuo sito. Il pulsante +1 può inoltre ottimizzare il tempo trascorso sul sito grazie ai consigli che invitano a continuare la lettura.

L'uso del pulsante +1 è soggetto alle norme relative al pulsante +1 di Google.

Guida introduttiva

Un semplice pulsante

Il metodo più facile per includere un pulsante +1 nella pagina è includere la risorsa JavaScript necessaria e aggiungere un tag di pulsante +1:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone></g:plusone>

Lo script deve essere caricato dal protocollo HTTPS e può essere incluso da qualsiasi punto della pagina senza restrizioni. Per ulteriori informazioni, consulta le Domande frequenti. Puoi anche caricare lo script in modo asincrono per ottimizzare le prestazioni.

Tag +1

Per il rendering di un tag +1 semplice:

<g:plusone size="tall"></g:plusone>

Puoi anche utilizzare un tag +1 valido per HTML5 impostando l'attributo di classe su g-plusone e aggiungendo prefissi agli attributi del pulsante con data-.

<div class="g-plusone" data-size="tall" ... ></div>
  

Per impostazione predefinita, lo script incluso attraversa il DOM e visualizza i tag +1 come pulsanti. Puoi migliorare il tempo richiesto dal rendering sulle pagine di grandi dimensioni utilizzando l'API JavaScript per attraversare solo un singolo elemento della pagina o per visualizzare un elemento specifico come pulsante +1.

Caricamento asincrono JavaScript

L'inclusione asincrona consente alla pagina web di continuare a caricare mentre il browser recupera il file JavaScript +1. Caricando questi elementi in parallelo, ti assicuri che il caricamento del file JavaScript per il pulsante +1 non aumenti il tempo necessario per caricare la pagina.

Per includere il JavaScript del pulsante +1 in modo asincrono, utilizza il codice seguente:

<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

Se desideri impostare i parametri dei tag di script, utilizza la sintassi seguente:

  window.___gcfg = {
    lang: 'zh-CN',
    parsetags: 'onload'
  };

Un esempio completo è incluso nella sezione Esempi.

Configurazione

Impostazione dell'URL di destinazione +1

L'URL di destinazione +1 viene determinato nell'ordine seguente:

1. Attributo href del pulsante
Questo attributo definisce in modo esplicito l'URL di destinazione +1.
2. Il tag <link rel="canonical" ... /> della pagina
Se l'attributo href del pulsante +1 non viene fornito, Google utilizza l'URL canonico della pagina. Per ulteriori informazioni sulla definizione dell'URL canonico per una pagina, consulta questo articolo della guida.
3. L'URL fornito da document.location.href (non consigliato)
Se nessuno di questi elementi è presente, Google utilizza l'URL della pagina come viene rilevato nel DOM. Poiché questo URL può contenere ID sessione, elementi di ancoraggio o altri parametri che non fanno parte dell'URL canonico, consigliamo vivamente di impostare l'attributo href per il pulsante +1 o aggiungere un tag <link rel="canonical" ...> alla pagina.

Parametri dei tag di script

Questi parametri sono definiti nell'ambito dell'elemento <script />. I parametri controllano la lingua e il meccanismo di caricamento del pulsante utilizzati in tutta la pagina web.

Chiave Valore Predefinito Descrizione
lang language code en-US Imposta la lingua da utilizzare per i pulsanti +1 sulla pagina. Per i valori language code disponibili, consulta l'elenco dei codici lingua supportati e unlang esempio.
parsetags explicit, onload onload Imposta il meccanismo di caricamento da utilizzare.
onload
Tutti i pulsanti +1 della pagina vengono automaticamente visualizzati dopo il caricamento della pagina. Vedi l'esempio di caricamento asincrono.
explicit
I pulsanti +1 vengono visualizzati solo con chiamate esplicite a gapi.plusone.go o gapi.plusone.render.

Se utilizzi il load explicit in combinazione con le chiamate go e render che indirizzano a contenitori specifici della pagina, puoi impedire allo script di attraversare tutto il DOM, migliorando i tempi di rendering dei pulsanti. Vedi gli esempi di gapi.plusone.go e gapi.plusone.render.

Attributi del tag +1

Questi parametri controllano le impostazioni per ogni pulsante. Puoi impostare questi parametri come coppie attributo=valore nei tag dei pulsanti +1 o come coppie JavaScript key:value in una chiamata a gapi.plusone.render.

Questa funzionalità al momento è nella visualizzazione in anteprima della piattaforma.
Attributo Valore Predefinito Descrizione
href URL to +1 current page URL Imposta l'URL su +1. Imposta questo attributo quando hai un pulsante +1 accanto alla descrizione di un elemento per un'altra pagina e desideri che il pulsante faccia +1 per la pagina di riferimento e non per la pagina corrente. Se imposti questo attributo mediante gapi.plus.render, non uscire dall'URL.
size
  • small
  • medium
  • standard
  • tall
standard Imposta le dimensioni del pulsante +1 da visualizzare. Per ulteriori informazioni, vedi la sezione relativa alle dimensioni dei pulsanti.
annotation
  • none
  • bubble
  • inline
bubble Imposta l'annotazione da visualizzare accanto al pulsante.
none
Non visualizza annotazioni aggiuntive.
bubble
Visualizza il numero di utenti che hanno fatto +1 per la pagina in un grafico accanto al pulsante.
inline

Visualizza le immagini del profilo degli utenti collegati che hanno fatto +1 per la pagina e un conteggio degli utenti che hanno fatto +1 per la pagina.

width int Se annotation viene impostato su "inline", il parametro imposta la larghezza in pixel da utilizzare per il pulsante e le relative annotazioni in linea. Se la larghezza viene omessa, il pulsante e la relativa annotazione in linea utilizzano 450px.

Consulta la sezione sulla larghezza delle annotazioni in linea per gli esempi di visualizzazione delle annotazioni con varie impostazioni della larghezza.

align
  • left
  • right
left Imposta l'allineamento orizzontale degli asset del pulsante nel relativo frame.
expandTo comma-separated list of
  • top
  • right
  • bottom
  • left
empty list

Imposta le posizioni preferite per visualizzare i fumetti di passaggio del mouse e di conferma relativi al pulsante. Imposta questo parametro quando la pagina contiene determinati elementi, ad esempio oggetti Flash, che possono interferire con la visualizzazione dei fumetti.

Ad esempio, top visualizzerà i fumetti di passaggio del mouse e di conferma sopra il pulsante.

Se il parametro viene omesso, la logica di rendering indovinerà la posizione migliore, in genere adottando l'impostazione predefinita, ovvero sotto il pulsante, utilizzando il valore bottom.

callback function(jsonParam) Se il parametro viene specificato, la funzione viene chiamata dopo che l'utente fa clic sul pulsante +1. La funzione di callback deve essere presente nello spazio dei nomi globale e accettare un singolo parametro, ovvero un oggetto JSON con la seguente struttura:
{
  "href": target URL,
  "state": "on"|"off"
}

La proprietà state viene impostata su "on" per un +1 e "off" per la rimozione di un +1.

onstartinteraction function(jsonParam)

Se il parametro viene specificato, la funzione viene chiamata quando appare un fumetto di passaggio del mouse, ovvero quando l'utente passa con il mouse sul pulsante +1, o quando appare un fumetto di conferma, ovvero quando l'utente sta facendo +1 per la pagina. Puoi utilizzare questa funzione di callback per modificare la pagina, ad esempio per mettere in pausa un video, quando il fumetto viene visualizzato.

Questa funzione deve essere presente nello spazio dei nomi globale e accettare un singolo parametro, ovvero un oggetto JSON con la seguente struttura:

{
  "id": target URL,
  "type": hover|confirm
}
onendinteraction function(jsonParam)

Se il parametro viene specificato, questa funzione viene chiamata quando scompare un fumetto di passaggio del mouse o di conferma. Puoi utilizzare questa funzione di callback per modificare la pagina, ad esempio per riprendere la riproduzione di un video, quando il fumetto si chiude.

Questa funzione accetta un singolo parametro, identico nella struttura al parametro passato a onstartinteraction.

recommendations true, false true Per disattivare la visualizzazione dei consigli all'interno del fumetto di passaggio del mouse sul +1, imposta recommendations su false.
count true, false true Obsoleto: per disattivare la visualizzazione del conteggio, utilizza annotation="none".

Dimensioni del pulsante

Se viene specificata un'altezza inferiore all'altezza minima supportata, viene visualizzato il pulsante con l'altezza minima supportata. Selezionando altre altezze, viene visualizzato il pulsante con le massime dimensioni, che verrà adattato e centrato verticalmente l'icona nello spazio richiesto. Se è disponibile spazio a sufficienza orizzontalmente, i pulsanti piccoli e standard visualizzano il numero totale di +1 per quella pagina.

Tipo di pulsante (annotazione) Esempio Larghezza (px) Larghezza massima (px) Altezza (px)
Piccolo (nessuno) 24 15
Piccolo (fumetto) 70 15
Medio (nessuno) 32 20
Medio (fumetto) 90 20
Standard (nessuno) 38 24
Standard (fumetto) 106 24
Alto (nessuno) 50 20
Alto (fumetto) 50 60

Larghezza delle annotazioni in linea

La visualizzazione delle annotazioni in linea varia in base al valore del parametro width.

  • Se il parametro della larghezza non è specificato, un pulsante +1 e la relativa annotazione in linea utilizzano una larghezza di 450px.
  • L'annotazione in linea richiede un minimo di 120px per la visualizzazione. I valori inferiori vengono automaticamente ridimensionati. La larghezza minima consigliata è 250px.
  • Per altre larghezze, la visualizzazione delle immagini dei profili in linea e il testo varieranno in base alla larghezza definita, come indicato negli esempi che seguono.
Larghezza Pulsante +1 (www.google.com)
250px
300px
350px
non specificata (450px)

Popolamento dello snippet di Google+

Dopo aver fatto clic sul pulsante +1, viene data all'utente l'opzione di condividere la pagina su Google+ tramite un fumetto di condivisione visualizzato. Il fumetto di condivisione, con il post generato sulle attività di Google+, include un'anteprima o Snippet di Google+, che contiene il titolo della pagina, una breve descrizione della pagina e un'immagine in miniatura. Questi dati vengono estratti dai contenuti rilevati in corrispondenza dell'URL di destinazione e possono essere specificati dal publisher dei contenuti.

Per le informazioni dettagliate e per personalizzare il tuo snippet, consulta la documentazione sugli snippet.

API JavaScript

Il codice JavaScript del pulsante +1 definisce due funzioni di rendering dei pulsanti nell'ambito dello spazio dei nomi gapi.plusone. Devi chiamare una di queste funzioni se disattivi il rendering automatico impostando parsetags su "explicit".

Metodo Descrizione
gapi.plusone.render(
container,
parameters
)
Visualizza il contenitore specificato come widget del pulsante +1.
container
Il contenitore da visualizzare come pulsante +1. Specifica l'ID del contenitore (stringa) o lo stesso elemento DOM.
parameters
Un oggetto contenente attributi del tag +1 come coppie chiave=valore (ad esempio, {"size": "tall", "callback": myCallbackFunction}).
gapi.plusone.go(
opt_container
)
Visualizza tutti i tag e le classi +1 nel contenitore specificato. Questa funzione deve essere utilizzata solo se parsetags è impostato su explicit, operazione da eseguire per motivi di rendimento.
opt_container
Il contenitore che contiene i tag del pulsante +1 da visualizzare. Specifica l'ID del contenitore (stringa) o lo stesso elemento DOM. Se il parametro opt_container viene omesso, vengono visualizzati tutti i tag +1 presenti sulla pagina.

Esempi

Pagina di base

<html>
  <head>
    <title>+1 demo: Basic page</title>
    <link rel="canonical" href="http://www.example.com" />
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
    </script>
  </head>
  <body>
    <g:plusone></g:plusone>
  </body>
</html>

Load explicit

<html>
  <head>
    <title>+1 demo: Explicit load</title>
    <link rel="canonical" href="http://www.example.com" />
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
      {"parsetags": "explicit"}
    </script>
  </head>
  <body>
    <div id="content">
      <g:plusone></g:plusone>
    </div>
    <script type="text/javascript">
      gapi.plusone.go("content");
    </script>
  </body>
</html>

Render explicit

<html>
  <head>
    <title>+1 Demo: Explicit render</title>
    <link rel="canonical" href="http://www.example.com" />
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
      {"parsetags": "explicit"}
    </script>
    <script type="text/javascript">
      function renderPlusone() {
        gapi.plusone.render("plusone-div");
      }
    </script>
  </head>
  <body>
    <a href="#" onClick="renderPlusone();">Render the +1 button</a>
    <div id="plusone-div"></div>
  </body>
</html>

Carico asincrono

<html>
  <head>
    <title>+1 Demo: Async load</title>
    <link rel="canonical" href="http://www.example.com" />
  </head>
  <body>
    <g:plusone></g:plusone>

    <script type="text/javascript">
      window.___gcfg = {
        lang: 'en-US'
      };

      (function() {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
      })();
    </script>
  </body>
</html>

Domande frequenti

Le domande frequenti presentate di seguito riguardano considerazioni di carattere tecnico e dettagli relativi all'implementazione. Per le risorse aggiuntive, consulta le domande frequenti generali e il forum di discussione sulla piattaforma.

Posso inserire in una sola pagina più pulsanti che fanno tutti +1 su URL diversi?
Sì. Utilizza l'attributo href come specificato nei parametri del tag +1 per indicare l'URL su cui fare +1.
Dove posso inserire il pulsante +1 nelle mie pagine?
Tu conosci bene sia la tua pagina che i tuoi utenti, quindi ti consigliamo di inserire il pulsante nei punti in cui pensi che sia più efficace. Sopra il fold, accanto al titolo della pagina e vicino ai link di condivisione spesso è una buona posizione. Può essere efficace anche posizionare il pulsante +1 alla fine o all'inizio di un articolo o una storia.
Ha qualche impatto sulla latenza la posizione del tag <script> nella pagina?
No, il posizionamento del tag <script> non influisce in modo significativo sulla latenza. Tuttavia, se posizioni il tag in fondo al documento, appena prima del tag di chiusura del corpo, puoi ottimizzare la velocità di caricamento della pagina.
Il tag <script> deve essere incluso prima del tag +1?
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 della sezione API JavaScript?
Sì, se utilizzi uno dei metodi API JavaScript, devi inserirli nella pagina, dopo l'inclusione di <script>.
Che cosa accade se faccio +1 su un URL privato?
Il pulsante non funzionerà. I +1 funzionano solo per gli URL pubblici.
Devo utilizzare l'attributo href?
L'attributo href non è necessario. Per ulteriori informazioni, vedi URL di destinazione +1
Tutte le mie pagine devono avere un tag rel="canonical"?
No, anche se è consigliabile. Se l'attributo href non è impostato, Google cercherà il tag rel="canonical" successivo sulla pagina. Se non lo trova, utilizzerà document.location.href. Questo valore finale in alcuni casi è fuorviante a causa delle variabili di stato spesso contenute nell'URL. Quindi, l'utilizzo di un tag rel="canonical" può essere utile per specificare l'URL esatto su cui fare +1.
Alcuni dei miei utenti ricevono un avviso relativo alla sicurezza quando visualizzano pagine con il pulsante +1. Come posso evitarlo?
Il codice del pulsante +1 richiede uno script dei server di Google. Puoi ricevere questo errore se includi uno script tramite http:// su una pagina caricata tramite https://. Ti consigliamo di utilizzare https:// per includere lo script:
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
Se la tua pagina web utilizza https://, alcuni browser e strumenti di verifica visualizzeranno un errore quando uno degli asset della pagina viene chiamato via http://. Se il sito serve le pagine tramite https://, assicurati che anche il codice del pulsante +1 su queste pagine utilizzi https://. Di fatto è preferibile utilizzare https:// nel codice del pulsante per tutte le pagine, anche se sono servite solo tramite http://.
Posso tenere traccia delle interazioni del pulsante +1 con Google Analytics?
Sì, la versione più recente di Google Analytics tiene automaticamente traccia di tutte le interazioni del pulsante +1 senza alcuna modifica del codice di monitoraggio esistente. Puoi visualizzare i parametri correlati alle attività sociali con i rapporti in Visitatori > Social. Ulteriori informazioni sul plug-in social di Analytics sono disponibili nella pagina del Centro assistenza.
Perché il fumetto del passaggio del mouse viene tagliato dai contenuti di Adobe Flash?

Per impostazione predefinita, i contenuti Flash vengono visualizzati sopra tutti gli altri contenuti HTML. Sono inclusi i fumetti di passaggio del mouse e altri contenuti visualizzati dal pulsante +1. Per questo motivo, è possibile che alcuni contenuti del pulsante +1 appaiano troncati dagli elementi di Adobe Flash nella pagina.

La soluzione dipende dalla situazione. Se puoi modificare il codice sorgente HTML per l'oggetto Flash nella pagina, puoi semplicemente aggiungere una proprietà all'elemento oggetto. Tuttavia, se l'elemento Flash viene aggiunto alla pagina da uno script (è il caso tipico per gli annunci), dovrai adottare una soluzione più sofisticata.

Per prima cosa, se hai accesso al codice sorgente HTML per l'oggetto Flash nella pagina, devi impostare il parametro wmode su 'transparent'. Per fare questo puoi aggiungere un parametro all'elemento oggetto Flash:

<object ... >
<param name="wmode" value="transparent">
... </object>

Negli altri casi, se l'elemento Flash viene aggiunto tramite script, può essere comunque possibile risolvere questo problema. Puoi aggiungere il parametro descritto sopra a livello di codice utilizzando JavaScript. FlashHeed è un esempio di questa tecnica. Questa procedura funziona purché l'oggetto Flash non sia incorporato in un iframe. Se l'elemento Flash è all'interno di un iframe, devi riposizionare i contenuti Flash o il pulsante +1 per evitare una sovrapposizione.

Ho inserito il codice del pulsante +1 in un iframe. Perché la finestra di condivisione risulta troncata in alcuni browser web?

Quando fai clic sul pulsante +1 Google visualizza una finestra di dialogo di condivisione. Tale finestra è molto più grande del pulsante +1. Per questo motivo, se inserisci il codice del pulsante +1 in un iframe più piccolo della finestra di condivisione, parti della finestra possono essere tagliate e diventare inaccessibili per gli utenti.

Per aggirare il problema, è preferibile includere il codice sorgente del pulsante +1 direttamente nelle pagine. Se devi utilizzare un iframe per racchiudere il pulsante +1, assicurati di avere a disposizione molto spazio per la finestra di condivisione.

Ho impostato l'allineamento del pulsante su right, ma il pulsante non è allineato a destra sulla pagina.
Se align="right" è impostato, Google allinea a destra gli asset del pulsante nel relativo frame. Tuttavia, per allineare correttamente il pulsante sulla pagina, devi impostare l'allineamento del contenitore del pulsante. Ad esempio:
<div style="float: right">
  <g:plusone align="right"></g:plusone>
</div>
I consigli che appaiono passando il mouse su +1 non sono appropriati per il mio sito web. Posso rimuoverli?
Indica a Google perché i consigli non funzionano sul tuo sito web in modo tale che sia migliorare il prodotto e l'esperienza sul tuo sito web. Se devi disattivare i consigli, puoi impostare l'attributo dei consigli su false nel tag +1.
Quali sono i browser web supportati?
Tutti i plug-in di Google+ supportano gli stessi browser web dell'interfaccia web di Google+:
  • Windows: Chrome, Firefox 3.6 e successive, Internet Explorer 8 e successive
  • Linux : Chrome, Firefox 3.6 e successive
  • Mac: Chrome, Firefox 3.6 e successive, Safari 4 e successive

Codici lingua

Lingua Valore
Afrikaans af
Amarico am
Arabo ar
Basco eu
Bengalese bn
Bulgaro bg
Catalano ca
Cinese (Hong Kong) zh-HK
Cinese (semplificato) zh-CN
Cinese (tradizionale) zh-TW
Croato hr
Ceco cs
Danese da
Olandese nl
Inglese (Regno Unito) en-GB
Inglese (US) en-US
Estone et
Filippino fil
Finlandese fi
Francese fr
Francese (Canadese) fr-CA
Lingua Valore
Gallego gl
Tedesco de
Greco el
Gujarati gu
Ebraico iw
Hindi hi
Ungherese hu
Islandese is
Indonesiano id
Italiano it
Giapponese ja
Kannada kn
Coreano ko
Lettone lv
Lituano lt
Malay ms
Malayalam ml
Marathi mr
Norvegese no
Persiano fa
Polacco pl
Lingua Valore
Portoghese (Brasile) pt-BR
Portoghese (Portogallo) pt-PT
Rumeno ro
Russo ru
Serbo sr
Slovacco sk
Sloveno sl
Spagnolo es
Spagnolo (America Latina) es-419
Swahili sw
Svedese sv
Tamil ta
Telugu te
Thailandese th
Turco tr
Ucraino uk
Urdu ur
Vietnamita vi
Zulu zu

Autenticazione richiesta

Devi aver eseguito l'accesso a Google+ per svolgere questa operazione.

Accesso tra...

Google Developers richiede la tua autorizzazione per svolgere questa operazione.