Caricare i javascript nei nuovi modelli di Blogger e il metodo asincrono per il bottone Google +1.

Sono stato indeciso se pubblicare un aggiornamento al post sul Bottone di Google+ oppure se fare un articolo a sé stante visto che l'argomento riveste carattere generale. Come vedete è prevalsa la seconda ipotesi. Due giorni fa ho illustrato il metodo per ritornare a vedere il pulsante +1 di Google in quei modelli che lo avevano visto sparire. Ho anche affermato che non era possibile utilizzare lo script per inserire il bottone in modo asincrono perché non funzionava. In questo caso si trattava di una asserzione vera solo parzialmente come vedremo in seguito.

Navigando in rete mi ero accorto come solo in alcuni vecchi modelli il pulsante di Google Plus fosse scomparso e allora mi sono ricordato di un metodo per incollare i javascript direttamente nel modello di Blogger senza ricorrere a hosting esterni. Il sistema consiste nell'incollare il contenuto del file .js in mezzo a delle righe secondo questa sintassi 

<script type='text/javascript'>
//<![CDATA[
CODICE JAVASCRIPT COPIATO DAL FILE
//]]>
</script>

Nei nuovi template, quelli del Designer Modelli per intenderci, non occorre più utilizzare questo metodo ma si può semplicemente incollare il javascript senza righe supplementari in questo modo

<script type='text/javascript'>      
Incollare il codice javascript
</script>

o addirittura così

<script>      
 incollare il codice javascript
</script>

La ragione dell'inserimento del tag CDATA nei vecchi modelli risiedeva nel fatto che si trattava di un documento XHTML e certe caratteristiche come i tag > e < erano proibite; c'era inoltre la possibilità che il modello cambiasse per esempio le virgolette " con &quot;.

Per quello che riguarda il metodo asincrono per incollare per il bottone +1 di Google Plus, ci viene fornito questo codice

<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>

che però nei vecchi modelli smetteva di funzionare con alcuni browser visto che venivano modificate le virgolette. Per risolvere basta utilizzare la modalità illustrata all'inizio del post e aggiungere al precedente codice due righe per farlo diventare così

<!-- Google Plusone -->
<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>
<!-- Google Plusone -->

Le righe aggiunte sono state evidenziate di rosso. Ho anche inserito due commenti colorati di verde per ricordarci di che codice si tratti. Tale script asincrono può essere incollato sopra alla riga </body> al posto di quello standard. In questo modo le virgolette presenti nel codice rimarranno inalterate. Questo metodo di inserimento degli script nei vecchi modelli può risolvere anche molti problemi di mancato salvataggio da parte di Blogger o malfunzionamento di certi script inseriti nel modello.