Come inserire il badge della Pagina Business, il bottone +1 e il Profilo di Google Plus in Blogger.

Credo di fare cosa gradita nell'unificare tre personalizzazioni tutte relative a Google Plus ma che riguardano aspetti diversi. Se abbiamo inserito questi widget separatamente, c'è la possibilità che alcuni di questi non funzionino perché utilizzano degli script diversi. Google li ha infatti aggiornati più volte. Inoltre è probabile che abbiamo caricato sul modello gli stessi javascript più di una volta appesantendo il template senza che ce ne fosse la necessità.

I tutorial per queste tre personalizzazioni sono rispettivamente in questi tre articoli:

1. Come creare un bottone con link al Profilo di Google Plus -
2. Come installare il bottone +1 di Google in modo asincrono -
3. Come inserire il badge delle Pagine Business di Google Plus -

Vediamo come queste tre operazioni possano essere unificate inserendo solo il codice essenziale. Andare su Modello > Modifica HTML > Procedi e cercare la riga </body> e, immediatamente sopra, incollare questo codice

<!-- Google Plusone -->
<script type='text/javascript'>
  window.___gcfg = {lang: &#39;it&#39;};
  (function() {
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
<!-- Google Plusone -->

Salvare il modello. Quello appena inserito sarà l'unico javascript che sarà caricato nel template. Per inserire il bottone +1 si incolla il suo codice nel punto in cui si vuole visualizzare. Si va per esempio su Layout > Aggiungi un gadget > HTML/Javascript e si incolla semplicemente

<g:plusone size="tall" annotation='inline'  expr:href='data:post.url' width='292' /></g:plusone>

se si vuole il bottone più grande, altrimenti la parte in rosso può essere tolta per il bottone standard o sostituita con size="medium" o size="small" per i pulsanti più piccoli. Il bottone può anche essere inserito nel modello per esempio allineato a quello di Facebook e Twitter. Con annotation='inline' si mostrano anche gli avatar di chi ha cliccato sul bottone +1 mentre width='292' determina la larghezza del widget; questi due parametri possono anche essere tolti.

In futuro sarà molto importante mettere l'icona ufficiale che colleghi il nostro sito al nostro Profilo Google Plus. Questo servirà per visualizzare nei risultati di ricerca relativi al nostro blog anche un estratto del nostro profilo su Google Plus per dare più rilevanza all'autore della pagina.

Il codice da incollare sempre in un elemento pagina HTML/Javascript potrà essere ottenuto da Webmaster Profile Button. Occorre selezionare l'icona che più ci piace tra small, medium, standard e tall e inserire l'URL del nostro Profilo Google Plus. Il codice ottenuto sarà simile a questo

<a rel="author" href="https://plus.google.com/111056841635962157738/">
  <img src="http://www.google.com/images/icons/ui/gprofile_button-32.png" width="32" height="32" />
</a>

dove i dati colorati di rosso rappresentano rispettivamente l'indirizzo del profilo e le dimensioni della icona. L'attributo rel="author" serve per far capire a Google che siamo gli autori del sito. Per il momento su Blogger non ho ancora trovato un modo per completare l'operazione in modo da poter visualizzare i risultati di ricerca su Google collegati al nostro Profilo su Google Plus ma tale opzione è già possibile realizzarla per siti Wordpress. La difficoltà di Blogger risiede nel fatto che il nostro Profilo non è una pagina dal sito. Probabilmente la recente opzione di unificare i due profili di Blogger e Google Plus era dettata da questa esigenza. Staremo a vedere se sarà possibile ovviare senza dover per forza eliminare il Profilo di Blogger e lasciare quello su Google Plus.

Per inserire il widget di una nostra pagina Business si accede a detta pagina, si clicca su Inizia nella colonna di sinistra quindi su Scarica il badge a centro pagina. Si potrà scegliere il tipo di widget tra badge standard, badge piccolo, icona piccola, icona media, icona grande e nessuna icona

Il codice da copiare sarà suddiviso in due parti. Il primo da incollare nella sezione <head> e il secondo nel punto esatto in cui visualizzare il widget.

La parte del codice evidenziata di giallo nello screenshot è però già stata incollata nel modello subito sopra al tag </body> quindi è inutile inserirla. E' sufficiente incollare la riga evidenziata di rosa immediatamente sopra al tag </head> e quella evidenziata di celeste nella sidebar andando su Layout > Aggiungi un gadget > HTML/Javascript. Saranno due righe simili a queste

<link href="https://plus.google.com/109971217617812630980" rel="publisher" />  nella sezione <head>

<g:plus href="https://plus.google.com/109971217617812630980" size="badge"></g:plus>  nella sidebar

dove l'URL colorato di rosso non rappresenta altro che l'indirizzo della nostra pagina Business.