Pubblicato il 10/12/11e aggiornato il

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:

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

badge-pagina-business

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.

codice-pagina-business

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.





7 commenti :

  1. scusa Ernesto , riepilogando allora se io volessi mettere il gadget come quello tuo in colonna google plus (quello sopra a 'ultimi articoli' x capirci)devo fare tutti questi passaggi dal primo all'ultimo? o solo l ultimo descritto? io non sono pratica e ogni passaggio per me è da capire abbi pazienza....grazie.

    RispondiElimina
    Risposte
    1. @Fioredicollina
      Il passaggio di inserire il javascript, il primo codice con lo sfondo verde per intenderci, devi farlo comunque. Poi puoi aggiungere solo il bottone con contatore o anche il widget del profilo e il badge della pagina business se l'hai creata.

      Elimina
    2. fatto....pero' evidentemente non ho la pagina business (o meglio non so neppure cosa sia...) sono riuscita a mettere infatti il gadget come il tuo ma praticamente per metà ! il +1 con gli avatar di coloro che cliccano su non capisco come poterlo mettere....

      Elimina
    3. @Fioredicollina
      Devi aggiungere questo tag
      annotation='inline'
      dopo
      g:plusone
      Le pagine business nelle intenzioni di Google diventeranno come le pagine fan di FB. Ecco la mia pagina business
      https://plus.google.com/109971217617812630980/posts
      e qui sotto c'è la recensione completa di cosa rappresentino e di come crearle
      http://www.ideepercomputeredinternet.com/2011/11/su-google-plus-arrivano-le-pagine.html

      Elimina
    4. Paziente Ernesto il guaio di voi esperti è che non tenete presente che molti di noi, tipo me, siamo come alle elementari....io non ho capito affatto dove inserire il tag che dici....

      e se la pagina business è allora per me questa
      https://plus.google.com/u/0/108645547609311606657/posts

      io non vedo quando "si accede a detta pagina, si clicca su Inizia nella colonna di sinistra quindi su Scarica il badge a centro pagina"

      proprio perchè non vedo inizia

      o forse quella lì non è la pagina esatta e devo rifare tutto daccapo?

      scusa ma quel che per te è così semplice x me non lo è ....

      Elimina
    5. @Fioredicollina
      Prova a accedere a questo link
      https://plus.google.com/b/0/108645547609311606657/welcome
      quando sei loggata su Google

      Elimina
    6. fatto....mi si è aperta una pagina BIANCA !

      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.