Pubblicato il 26/09/13e aggiornato il

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-profilo-google-plus

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

googleplus-pagina-badge

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.

badge-pagina-brand

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.




4 commenti :

  1. Molto più convincente è adesso, speriamo che aiuti ad invogliare più persone a cliccare su +1 per aggiungersi alla cerchia. Anche se non capisco perché per quanto riguarda il codice delle pagine devo incollare anche un codice all'interno dell'head se in realtà funziona anche senza.

    RispondiElimina
    Risposte
    1. Se il badge e il bottone funzionano significa che comunque da qualche parte è già presente lo script. Per un sacco di motivi conviene metterlo una sola volta, asincrono e solo nel modello
      @#

      Elimina
  2. Ciao Ernesto, sono contento di aver trovato nel tuo blog tutte queste spiegazioni chiare anche a un neofita come me. Ma in riferimento a 'Come configurare il badge della Pagina G+ su blogger' potresti dirmi la prima parte del codice dove effettivamente si incolla?

    RispondiElimina
    Risposte
    1. Il primo codice quello con div class="g-page" per intendersi si incolla su Layout > Aggiungi un gadget > HTML/Javascript > Sezioni del sito (se hai un blog su Blogger) quindi lo posizioni con il cursore sempre su Layout.
      Il seocndo codice, quello con
      script type="text/javascript
      si incolla subito sopra la riga </body>

      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.