Come inserire il pulsante +1 di Google Plus sul sito web

Il social network G+ mette a disposizione dei webmaster il pulsante +1

A cosa serve il pulsante +1? Consente agli utenti di esprimere il proprio gradimento sul contenuto di una pagina o di un articolo. E' molto simile al pulsante Like di Facebook.

Perché inserire il pulsante +1 di Google Plus sul sito web?
Come creare il pulsante +1 di Google+
Copio e incollo lo script del pulsante +1

Perché inserire il pulsante +1 di Google Plus sul sito web?

Nel momento in cui un utente clicca +1 su una pagina web, il suo gesto viene registrato da Google sull'account dell'utente.

Questa informazione modifica la ricerca personalizzata dell'utente su Google.

Esempio. Se clicco molti +1 su un sito web A, quest'ultimo comparirà nelle mie query con una frequenza maggiore.

Pertanto, molti +1 influenzano il traffico organico in entrata sul website e creano indirettamente segnali sociali positivi in termini di good user experience.

Come creare il pulsante +1 di Google+

Vado sulla pagina ufficiale dei tool di Google.

Seleziono la dimensione ( size ) del pulsante +1 tra small, medium e standard.

Sono tutti formati orizzontali.

selezionare la dimensione del bottone +1

C'è anche un formato Tall. A differenza degli altri è un pulsante che si estende in verticale.

Quale dimensione scegliere?

La scelta della dimensione del pulsante dipende dalla zona del sito web dove andrà visualizzato.

Nota. In genere, il formato più grande è più visibile e funziona meglio. Il formato Tall è invece molto efficace nelle colonne laterali di un sito.

Seleziono l'annotazione del pulsante

Poi seleziono l'annotazione del pulsante +1 scegliendo tra.

Incorporata. L'annotazione incorporata aggiunge al pulsante il contatore e una scritta con il numero degli utenti che hanno cliccato sulla pagina.
Fumetto. L'annotazione fumetto visualizza il pulsante in verticale con il contatore numerico dei click.
Nessuno. L'annotazione nessuno mostra soltanto il pulsante senza contatore.

A questo punto devo soltanto selezionare la lingua desiderata.

Copio e incollo lo script del pulsante +1

Nella sezione più a destra posso già vedere l'anteprima del pulsante +1.

A questo punto evidenzio il codice html e clicco sui tasti CTRL+C per copiarlo.

selezionare lo script e premere CTRL+C per copiarlo

Poi vado sul sito web e incollo lo script nella sezione BODY del documento HTML premendo i tasti CTRL+V.

<HTML>
<HEAD>
<TITLE>titolo del documento html</TITLE>
</HEAD>
<BODY>

<div class="g-plusone" data-annotation="inline" data-width="300"></div>

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

</BODY>
</HTML>

La prima parte del codice ( arancione ) la inserisco dove voglio visualizzare il pulsante.

La seconda parte del codice va, invece, inserita una sola volta.

Nota. Se devo visualizzare due pulsanti +1 nella stessa pagina web, posso inserire la seconda parte del codice una sola volta, perché vale per entrambi i pulsanti.