Come in un precedente articolo nel quale mi sono occupato della convalida W3c del sito dopo che si è inserita l’implementazione del bottone +1 di Google, anche per il bottone Mi Piace di Facebook è necessario procedere a qualche aggiustamento per poter ottenere una convalida del proprio sito. Queste brevi indicazioni prescindono dall’ottenimento di un codice Applicazione che dovrete comunque richiedere nella sezione Developer di Facebook.

Dunque … cominciamo con lo script principale che Facebook vi chiede di inserire nella pagina. Quello che vi rilasciano inizia così :

1

<script>(function(d, s, id) {

Tuttavia questa impostazione non è convalidabile perchè manca l’attributo type. Dovrete quindi modificare la riga in questo modo :

1

<script type="text/javascript">(function(d, s, id) {

Per ottimizzare poi l’esecuzione dello script, in modo che non blocchi il render della pagina durante il caricamento, è consigliabile attivare la modalità asincrona aggiungendo una sola riga di codice:

1
2

js.src = "//connect.facebook.net/it_IT/all.js#xfbml=1&amp;appId=xxxxxxxxxxxxxx";
js.async = true; /* Aggiungere questa */

Ora è necessario specificare dove si desidera che vengano emessi i bottoni. A questo proposito Facebook vi fa inserire un elemento div tipo il seguente:

1

<div class="fb-like" data-href="......" data-layout="standard" data-send="true" data-width="450" data-show-faces="false"></div>

Questo elemento, così impostato, non può essere validato perchè attributi come data-href, data-send ecc. non sono validi per l’elemento DIV. Il problema è aggirabile facendo in modo che questi elementi siano iniettati nell’html tramite uno script mediante una normale istruzione document.write. A questo punto però dovremo fare attenzione a racchiudere il contenuto da scrivere all’interno di una sezione CDATA perchè per gli script Java il carattere “< ” indica un reindirizzamento. Al termine il codice deve risultare così.

1
2
3

<script type="text/javascript" language="javascript">
document.write('<div data-href="<?php the_permalink() ?>" data-layout="standard" data-send="true" data-width="450" data-show-faces="false"></div>');
</script>

Al termine, ancora una volta, avrete la vostra convalida.