Pubblicato il 31/10/15e aggiornato il

Come mostrare un QR Code nei post di Blogger per far copiare o scannerizzare l'URL da cellulare.

Come mostrare per ogni articolo un codice QR da scannerizzare con una app del cellulare per ricavare l'indirizzo del post.
La navigazione da dispositivi mobili è sempre più importante ai fini del traffico anche per siti che fino a qualche tempo fa erano improbabili da consultare con il cellulare. Per questa ragione è imperativo avere un sito mobile friendly per sfruttare a pieno tutte le possibilità.

Gli utenti di Blogger possono usare la versione mobile già predisposta e eventualmente personalizzarla. Sono anche disponibili moltissimi modelli gratuiti Responsive che si adattano automaticamente alle diverse risoluzioni. Anche se nei cellulari più moderni si è fatto molto in tal senso è ancora piuttosto disagevole fare il copia e incolla di un indirizzo web per condividerlo in un post o in una email.

Può quindi essere utile mostrare accanto al titolo del post o a lato del contenuto un codice QR che, se scannerizzato, porti all'indirizzo della pagina. Tale codice dovrà essere funzione dell'URL. Si potrà mostrare solo nei dispositivi desktop, solo in quelli mobili o ovunque. La visualizzazione nella versione desktop serve per avvicinare il cellulare allo schermo, scannerizzare il codice QR con una app tipo QR Droid per aprire anche da cellulare la pagina del sito che si sta visitando da PC.
Per questa personalizzazione si utilizzano le API di Google Chart Tools e si utilizza il tag di Blogger data:post.url  che è la variabile dell'indirizzo del post di Blogger.  Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la riga 

<b:includable id='post' var='post'>

quindi si scorre il codice in basso fino a trovare la riga <data:post.body/> che è il tag di Blogger che indica tutto il contenuto del post. Se vogliamo visualizzare il QR Code subito prima del contenuto cioè più o meno sotto la linea del titolo dobbiamo incollarvi subito sopra questo codice

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='codice-qr'><img height='auto' src='https://lh5.googleusercontent.com/-DzyomyA9o-4/T0eiVOFp5zI/AAAAAAAAWuM/kBwIQ7LZQpg/s46/smartphone.png' width='30px' /><span><img expr:src='&quot;http://chart.apis.google.com/chart?chs=100x100&amp;cht=qr&amp;chld=|0&amp;chl=&quot; + data:post.url + &quot;?m=1&quot;' height='100' width='100' /></span></div>
</b:if>

Si cerca quindi la riga ]]></b:skin> e, subito sopra, si incolla quest'altro codice

/* CODICE QR */
.codice-qr{
position: relative;
float:right;
z-index: 0;
}
.codice-qr:hover {
z-index: 60;
}
.codice-qr img{
padding:0;
}
.codice-qr span{
background:#fff;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition:0.5s;
transition: 0.5s;
position: absolute;
visibility: hidden;
left: -80px;
bottom: -80px;
color: #2d2d2d;
font-size:18px;
font-weight:normal;
font-family: Georgia;
opacity:0;
text-align:center;
border:1px solid #d2d2d2;
padding:0;
}
.codice-qr:hover span {
visibility: visible;
opacity:1;
}

Si salva il modello. L'URL colorato di rosso rappresenta una icona di 30 pixel di larghezza che può essere modificato a piacere. Passando con il mouse sopra a quella icona o toccandola con il dito da dispositivo mobile si visualizzerà il QR Code collegato all'URL del post in oggetto.

codice-qr-indirizzo-post


MOSTRARE L'ICONA ANCHE NEI DISPOSITIVI MOBILI


Se si desidera mostrare l'icona anche nei dispositivi mobili basterà incollare il primo codice anche nella sezione per il mobile. Sempre su Modello > Modifica HTML si cerca stavolta la riga

<b:includable id='mobile-post' var='post'>

e si scorre il codice verso il basso fino a trovare lo stesso tag <data:post.body/> .  Subito sopra a questa va incollato il primo codice di questo post per poi salvare il template.
Si può scegliere anche un altro posizionamento per l'icona magari accanto al titolo del post seguendo e adattando le istruzioni del seguente articolo che tratta proprio questo tema 




2 commenti :

  1. Ciao Ernesto, questo post mi interessa molto tanto che l'ho aggiunto al mio codice su blogger ma ho un problema...Quando vado ad incollare la prima parte del codice sopra alla riga data:post.body/ messaggio come questo:Errore di analisi XML, riga 1548, colonna 161: Element type "img" must be followed by either attribute specifications, ">" or "/>". Ho copiato il codice senza modificarlo...non capisco l'errore...mi puoi aiutare?
    Grazie

    RispondiElimina
    Risposte
    1. Sembra che manchi una slash come questa / alla fine del tag img però nel codice c'è.Non capisco. La slash deve essere inserita prima del segno di maggiore in questo modo /> lasciando uno spazio prima della slash. Questo solo nei due tag img naturalmente. Forse manca lo spazio prima della prima slash. Ora modifico il codice
      @#

      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.