Come installare il javascript di Google Plus nel modello una sola volta per poi aggiungere bottone, profilo e widget dei followers.
Poche ore fa Google ha annunciato su Inside Adsense e su Google Operating System che il bottone Google Plusone è stato reso tre volte più veloce. Oltre a questo è stato anche reso disponibile un nuovo codice per caricare il pulsante in modo asincrono. Questo comporta un ulteriore aumento della velocità di caricamento del sito a tutto beneficio del posizionamento degli articoli visto che questo parametro è entrato a far parte dei più di duecento presi in esame da Google per stilare le SERP dei risultati delle ricerche.
Ricordo che il caricamento asincrono di un oggetto serve per fare in modo che questo avvenga solo alla fine per non incidere sulla rapidità di visualizzazione del resto degli elementi presenti nella pagina. Il codice asincrono esisteva già per Google Analytics, anzi consiglio a chi abbia quello vecchio di provvedere al suo aggiornamento. E' anche possibile da qualche tempo installare tutti i plugin di Facebook in modo asincrono sempre per velocizzare l'apertura del sito. Vediamo nel dettaglio come procedere per la modifica del codice del Google Plusone.
L'installazione del bottone di Google era stata fatta in due fasi. La prima prevedeva l'inserimento nella sezione <head> del blog dello script
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'it'} </script>
e la seconda l'inserimento vero e proprio del bottone mediante un codice come questo
<g:plusone size="medium"></g:plusone>
dove al posto di medium ci poteva essere anche tall o small. Il bottone si poteva inserire in una sidebar con il link al Profilo di Google+, accanto al plugin di Facebook e al pulsante di Twitter oppure in una barra flottante. In ogni caso questa seconda parte va lasciata così com'è. Per aggiornare il bottone alla versione asincrona, occorre cancellare la precedente riga di script dal modello e andare su Google Plusone Code Generator. Si tratta di selezionare la lingua italiana e di acquisire questo codice
<!-- Place this tag after the last plusone 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>
<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>
Secondo le istruzioni va incollato dopo l'ultimo bottone di Google Plusone presente nel modello. Per essere sicuri che sia sotto a tutti i bottoni presenti nel template si inserisce in fondo al codice. Si va quindi su Design > Modifica HTML (vecchia Bacheca) oppure su Modello > Modifica Modello (nuova Bacheca) e si incolla il precedente HTML subito sopra la riga </body> . Si salva il modello. La maggiore velocità nel caricamento del bottone è immediatamente percepibile così come il fatto che appaia dopo tutti gli altri elementi del blog. Se si ha un blog su Wordpress e si utilizza un plugin occorre aspettare che questo venga aggiornato con questo nuovo codice. Se invece si è installato il pulsante Google Plusone manualmente, si effettua la stessa procedura usata con Blogger. In questo caso la riga </body> si troverà su Bacheca > Aspetto > Editor > Footer.
non ho capito, devo tenere il vecchio bottone presente nel modello e incollare subito sotto quello e prima di /body quello nuovo?
RispondiEliminacredo di esserci riuscito ...
RispondiEliminaha fatto come hai scritto ma non ci sono differenze e con Safari il caricamento è sempre lentissimo come prima a causa del +1
RispondiElimina@ivabellini
RispondiEliminaNon conosco Safari. Ma il fatto che il bottone +1 venga caricato per ultimo non vuol dire che sia la causa della lentezza della pagina.
Ciap Parsifal. Sto provando a inserire il pulsante di google+ nel blog di prova. Prima mi sono letto il tuo articolo su come inserire il pulsante, poi sono finito su quest'altro per renderlo asincrono.
RispondiEliminaIl codiche che mi viene fuori è lo stesso del primo 8e diverso da quello che indichi tu).
Forse adesso l'inserimento asincrono è automatico da parte di google.
Anche perché ho notato che effettivamente è l'ultima cosa che viene caricata.
@Alessio
RispondiEliminaPuò darsi che lo abbiano reso asincrono nativamente. Stanno ancora in fase beta sia con il pulsante +1 sia con G+ e le modifiche sono non dico giornaliere ma quasi.