Come configurare il badge del Profilo e della Pagina Brand su Google+.

Come configurare i nuovi badge del Profilo, delle Pagine Brand e delle Community di Google Plus.

Se possedete un sito web avrete certamente installato anche il bottone per la condivisione dei post su Google Plus. Probabilmente avrete anche creato una pagina brand per fare da supporto al sito così come avviene per le pagine fan di Facebook. Nella piattaforma Blogger ci sono anche dei widget ufficiali al riguardo. Google sta cambiando qualcosa nel codice dei bottoni e dei badge e molti di voi avranno ricevuto delle email in tal senso. Se i vostri gadget sono quelli ufficiali di Blogger potete anche attendere gli eventi. Tra 30 giorni verrà anche modificato il design di badge e bottoni e il cambio dovrebbe tener conto delle dimensioni che erano state configurate in precedenza. Google consiglia comunque di aggiornare il badge prima di questa data in base alle nostre specifiche esigenze.

I nuovi tipi di badge sono attualmente visibili e configurabili solo nella pagina in inglese ma non ci sono difficoltà particolari da affrontare. È probabile che tra qualche giorno anche la versione italiana permetta la configurazione ma se non volete aspettare procedete come segue. Si accede a Google Badge per configurare Profilo e Pagina Brand. In ciascuna configurazione occorre scegliere la lingua e altri parametri. Ammettiamo per brevità che venga selezionato l'italiano. Il codice da incollare sarà formato da due parti. La prima da incollare nel punto in cui si vuole visualizzare il badge e la seconda da inserire nel modello "alla fine dei tag di tutti i widget". Il secondo codice sarà lo stesso per tutti i badge e sarà funzione solo della lingua prescelta. Conviene quindi installarlo nel template una volta soltanto.

Il secondo codice per gli italiani sarà il seguente

<!-- Place this tag after the last widget tag. -->
<script type="text/javascript">
  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>

La riga colorata di verde è un commento che può anche essere tralasciato. Visto che dobbiamo inserirlo dopo tutti i widget occorre incollare questo codice subito sopra alla riga </body> che rappresenta la fine dei tag visibili nella pagina web. Si va quindi su Modello > Modifica HTML, si cerca tale riga, si incolla il codice e dopo si salva il template.

Il codice incollato così com'è dopo che è stato salvato cambierà in qualche tag per una conversione automatica da HTML a XML. Usando la tecnica per incollare i javascript nel template di Blogger possiamo modificarlo in questo modo

<!-- Google Plus Badge -->
    <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>

con l'aggiunta delle due righe in viola per mantenere invariato il codice e di un nuovo commento colorato di verde. Questo codice è alternativo al precedente e va sempre subito sopra a </body>.

BADGE DEL PROFILO SU GOOGLE+

Dopo aver installato lo script nel modello si va su Layout > Aggiungi un gadget > HTML/Javascript e si incolla il codice del nostro Profilo su questo social che può essere il seguente

<div class="g-person" data-href="https://plus.google.com/111056841635962157738" showtagline="true" layout="landscape" width="273" /></div>

L'unica modifica obbligatoria è quella che riguarda l'ID del nostro Profilo su Google Plus colorato di rosso. I tag colorati di blu sono invece opzionali e permettono di selezionare l'aspetto:

1. layout="portrait" con larghezza width="180"
2. layout="landscape" con larghezza width="273"
3. showtagline="true" oppure showtagline="false" per mostrare o meno la tag line degli utenti
4. theme="light" oppure theme="dark" per blog con sfondo chiaro o scuro

Se un tag non viene inserito viene rilevato quello di default

BADGE PAGINE BRAND SU GOOGLE+

Anche per le pagine brand o business si deve incollare lo script prima del tag </body> . Se questo fosse già presente basterà incollare la prima parte del codice su Layout > Aggiungi un gadget > HTML/ Javascript per poi salvare e posizionare. Si accede a Google Badge e si seleziona la pagina se ne possediamo più di una. Dopo aver scelto la lingua si potranno configurare gli altri parametri

In Advanced Options è bene lasciare la spunta a Asynchronous per una maggiore velocità di caricamento. A destra si vedrà l'Anteprima e in basso si potrà copiare il codice. Come già detto se la seconda parte è già presente nel nostro template basterà copiare la prima che sarà del tipo

<div class="g-page" data-href="//plus.google.com/109971217617812630980" data-rel="publisher"></div>

con il numero in rosso che è l'ID della nostra pagina brand. Tale codice andrà incollato su Layout > Aggiungi un gadget > HTML/Javascript in Sezioni del sito quindi si va su Salva e si posiziona.

Anche in questo caso si possono aggiungere opzionalmente gli stessi tag già visti per il Profilo. Concludo ricordando che con lo stesso sistema si possono creare Badge per le Community di Google+, con la classe g-community, e installare il pulsante Share e il bottone Follow.