Integrare pulsanti "Like" e "+1" con la validazione W3C

Giovanni Canella

29/10/2013

2987

Durante la realizzazione di un sito, certi designer, ma non tutti, hanno la precauzione di scrivere codice che sia valido secondo gli standard del W3C (World Wide Web Consortium), l'organizzazione a cui a capo c'è Tim Berners Lee (fondatore di Internet) che dirige lo sviluppo dell'HTML, ma quando si prova a inserire in un articolo per esempio i famosi pulsanti "Like" di Facebook, o "+1" di Google+, ci ritroveremo con una pagina non conforme. In questo articolo vediamo come risolvere!

Ecco un esempio di errore che ci verrà mostrato:

Errori pagina non conforme agli standard W3C

Procedimento

Il concetto che c'è dietro a questo sistema è molto semplce: quando la pagina viene caricata con i pulsanti social, conterrà dei tag non riconosciuti come standard e pertanto gli segnerà come errore, noi invece andremo a inserire questi elementi a caricamento ultimato, tramite un po' di Javascript, così in modo da passare correttamente la validazione. Capito? Vediamolo in pratica!

Questo è il normale codice utilizzato:

<g:plusone size='medium' href='http://ginho.it'></g:plusone>
<fb:like href="http://ginho.it" layout="button_count" send="true" show_faces="false" width="450" font=""></fb:like>

Dopo naturalmente avere incluso prima i file necessari:

<script type="text/javascript" src="http://apis.google.com/js/plusone.js" gapi_processed="true"></script>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>

Ora dobbiamo creare un tag script nel punto in cui vogliamo compaiano i pulsanti, e al suo interno con, una fra le prime funzioni che si impara con lo studio di Javascript, document.write(), andiamo a "iniettarli" in questo modo:

document.write("<g:plusone size='medium' href='http://ginho.it'></g:plusone>");
document.write("<fb:like href='http://ginho.it' layout='button_count' send="true" show_faces="false" width="450" font=""></fb:like>");

Se riproviamo a controllare la pagina con il validatore, otteremo un risultato positivo!

Pagina che ha passato il controllo del validatore W3C

Questo piccolo trucchetto, non è valido solo in questo campo, ma anche con altri strumenti che implicano l'utilizzo di tag non standardizzati.

I più letti

Ti potrebbero interessare