Oggi Twitter ha deciso di cambiare il layout predefinito del suo bottone con cui ogni giorno vengono diffuse su Twitter un'infinità di pagine e siti web. Ogni cambiamento porta con sè delle novità, e nel caso del bottone "Tweet" anche dei problemi nel rendering predefinito di questo elemento. Nello specifico, è cambiato il modo con cui la larghezza e l'altezza del bottone vengono rese all'interno di un elemento iframe. Vediamo insieme i dettagli e la soluzione.
Il bottone di Twitter ha ora una larghezza e altezza incrementate quando l'elemento iframe è privo di dimensioni specificate. Nel codice di esempio che segue, inseriremo prima un bottone senza dimensioni (uncostrained) e quindi un bottone con dimensioni (constrained):
<!--senza dimensioni-->
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.html?url=http://test.it&text=Test&count=vertical&via=gabromanato"></iframe>
<!--con dimensioni-->
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.html?url=http://test.it&text=Test&count=vertical&via=gabromanato" style="width: 60px; height: 70px"></iframe>
E questo è il risultato:
Assegnando degli stili CSS inline all'elemento iframe forziamo il computo delle dimensioni degli elementi all'interno del documento esterno in esso contenuto in modo che il bottone sia interamente visibile in tutte le sue parti (numero di tweet e pulsante "Tweet").