Cerca nel sito per parole chiave: inserisci argomento e cerca

mercoledì 16 maggio 2012

Non solo bdsm programmazione html e validazione codice w3c

Risolto un problemino che affliggeva la rete da diverso tempo. Soluzioni più o meno abbordabili ce n'erano in giro ma testate sul campo, alla fine quasi nessuna di queste funzionava o ci obbligava a fare dei salti mortali nella scrittura.
Il problema è nei famosi tasti di facebook mi piace ed invia che sono scritti in html 5 e che non entrano in pagine scritte nei linguaggi precedenti tipo xhtml 1.0 strict o transitional, xhtml 4.1 strict o transitional e via così.
Pensa che ti ripensa, l'altro giorno ho deciso di risolvere il problema e la soluzione è arrivata alla fine della giornata a forza di tentativi e di ragionamenti.
La deduzione finale che è sempre quella che ti fa trovare il modo è che seguendo la logica, il pulcino è sempre figlio della gallina che l'ha fatto quindi il pulsante base.
fb-like è in qualche modo ancora legato al pulsante principale preesistente nella sua pagina php di riferimento. Per ingannare il w3c ovviamente non si può scrivere il codice in modo tradizionale ma inzupparlo in un iframe e inserendo in una stringa unica i pulsanti di formattazione. Questo risultato:



si ottiene con la seguente istruzione:

<iframe src="http://www.facebook.com/plugins/like.php?href=miosito.com/&amp;
show_faces=false&amp;layout=button_count&amp;color_scheme=light&amp;width=400&amp;
action=like&amp;colorscheme=light" scrolling="no" frameborder="0"
style="border:none; overflow:hidden; width:400px" class="like_fb"></iframe>

si può modificare anche il color scheme sostituendo il light con il dark ma colora solo il pulsante mi piace ed il numero, non la scritta ampia al posto della finestrella con il nr.

Fino a qua, forse poco anche se "notevole". Il vero problema suvviene però con il bottone invia la pagina a:
<fb:send href="http://example.com"></fb:send> questo qua, rimediabile alla pagina https://developers.facebook.com/docs/reference/plugins/send/ insieme agli altri "pre codici".

Il punto è che href etc. etc.. viene letto come un errore, non esiste pagina di riferimento come con l'altro pulsante .php quindi non può essere inserito in un iframe e manco scritto in java con document.write.

Però si può bypassare il link href togliendolo e semplificando l'istruzione a un semplice <div class="fb-send"></div> che è scritto nelle versioni html precedenti così il pulcino è diventato la gallina rendendo inutili tutti i tentativi di fb di fare adeguare al proprio sistema di scrittura le proprie pagine.

Ovviamente si può inserire il tutto una tabella formattata in caselle sequenziali in questo modo:

<table width="254" border="0">
<tr>
<td width="120"><iframe src="http://www.facebook.com/plugins/like.php?href=http://www.mastrodesade.org/&amp;
layout=standard&amp;show_faces=true&amp;color_scheme=dark&amp;width=400&amp;
action=like&amp;colorscheme=light" scrolling="No" frameborder="0"
style="border:none; overflow:hidden; width:120px; height:20px" class="like_fb"></iframe></td>
<td width="118"><div class="fb-send"></div></td>
</tr>
</table>
Ovviamente dopo il tag body della medesima pagina, va scritto un piccolo java:

<div id="fb-root"></div>

<script type="text/javascript">(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/it_IT/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Il risultato che vedrete alla fine in una pagina web php o html di qualsiasi versione esattamente quello che vedrete in fondo a questo post solo che sarà validato w3c in modo assolutamente corretto.

Chi capisce un po' di programmazione credo che questo post sia di facile lettura e che il valore di questa semplice soluzione risolva una grossa, pesante parte delle validazioni w3c attuali D'altra parte solo un paio di siti dedicati italiani avevano tentato di risolvere il problema ma aggredendo solo la problematica del tasto  mi piace e non dell'altro. I siti americani ed inglesi, avevano tentato di fare la medesima cosa ma anche qui con soluzioni abbastanza complicate che andavano da una diversa dichiarazione DOCTYPE ad aggiunte di codici suppletivi incasinando di nuovo la stessa validazione.

2 commenti:

  1. Uh maaaammaaaa!! Ho capito soltanto che il pulcino è nato dalla gallina, ovvia! :)

    RispondiElimina
  2. Profilo.... muble, muble. E' un colore il tuo, niente mall, niente altro che un colore, pure bello ma profilo? O.o :P
    Completalo magari :) e per il resto ti rispondo in un nuovo post che è più semplice. :)

    RispondiElimina

Non offendete, usate un nick riconoscibile o sarebe bannati. :)