Come installare il +1 di Google+ in Blogger o Wordpress.

Come installare il bottone del +1 di Google+ in un blog di Blogger e di Wordpress e come personalizzarlo nelle dimensioni e nella forma.

Google rilasciò il pulsante +1 nel lontano 2011 quando ancora l'azienda di Mountain View pensava di fare concorrenza alla pari a Facebook. Google+ poi è rimasta una incompiuta ma il pulsante +1 è ancora utile non solo per la condivisione su Google Plus ma soprattutto in ottica SEO.

Gli utenti di Wordpress possono scegliere tra molti plugin per implementare tale pulsante mentre gli quelli di Blogger debbono usare un codice apposito che comunque può essere utilizzato non solo nei blog Wordpress ma anche nei siti statici e in una pagina HTML qualsiasi.

Per rendere il caricamento del nostro sito più veloce innanzitutto dobbiamo verificare che tipo di javascript abbiamo implementato nel modello nel caso lo avessimo già fatto. Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca questa riga di codice

https://apis.google.com/js/platform.js

che è una stringa comune a tutte le versioni del javascript di Google+. Potrebbe essere presente solo la parte colorata di blu.  Il codice del javascript di Google Plus servirà non solo per il bottone ma anche per il widget della Pagina Brand e quello dei follower su Google+. In tale codice è particolarmente importante la stringa po.async = true; oppure quella async defer che servono per caricare in modo asincrono  e più velocemente tutti i widget di Google+. Vi posto due codici che possono essere incollati a piacere subito sopra alla riga </head> o subito sopra alla riga </body>.

PRIMO CODICE DI GOOGLE+

<!-- Google Plusone Inizio -->
    <script type='text/javascript'>
      //<![CDATA[
      window.___gcfg = {lang: 'it'};
      (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>
    <!-- Google Plusone Fine -->

SECONDO CODICE DI GOOGLE+

<!-- Google Plusone Inizio -->
<script src="https://apis.google.com/js/platform.js" async defer>
  {lang: 'it'}
</script>
<!-- Google Plusone Fine -->

INSTALLARE IL BOTTONE DI GOOGLE+

Dopo aver inserito uno dei javascript precedenti si deve aprire la pagina di configurazione +1 Button in cui scegliere lo stile del bottone, la sua dimensione e la forma delle annotazioni 

Basterà copiare solo la seconda parte del codice che potrebbe essere come questa

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

per poi incollarla su Layout > Aggiungi un gadget > Base > HTML/Javascript > Sezioni del sito per poi posizionare l'elemento in una sidebar o nel footer. Si può usare anche il codice precedente come base e aggiungere data-size="medium" oppure data-size="small" o ancora data-size="tall" per un pulsante rispettivamente di dimensione media, piccola o grande.

Se si preferiscono le annotazioni a fumetto a quelle incorporate si toglie data-annotation="inline" mentre per nessuna annotazione tale tag si sostituisce con data-annotation="none".