CSS: risolvere i problemi nel layout dei bottoni di Twitter creati con gli iframe

  • CSS
  • Gabriele Romanato
CSS: risolvere i problemi nel layout dei bottoni di Twitter creati con gli iframe

Se usate un elemento iframe per visualizzare un bottone di retweet di Twitter vi trovate sicuramente di fronte a dei problemi di rendering. Il layout di questo tipo di bottoni, infatti, funziona al meglio con JavaScript, specie dopo le ultime modifiche apportate da Twitter al layout dei suoi widget. Spesso il bottone occupa un'area troppo alta, o è troppo largo, o su alcuni browser compare una fastidiosa barra di scorrimento verticale. Vediamo come risolvere questi problemi.

Dato il seguente bottone di Twitter (layout orizzontale):


<iframe class="tweet-b" src="http://platform.twitter.com/widgets/tweet_button.html?url=http://test.com/&amp;text=Test&amp;count=horizontal&amp;via=gabromanato&amp;size=medium"></iframe>

Possiamo specificare questi stili:


iframe.tweet-b {
	display: inline-block;
	height: 25px;
	overflow: hidden;
}

Se il bottone ha un layout di tipo vertical (specificato dal parametro count), dovete specificare anche una larghezza:


iframe.tweet-b {
	display: inline-block;
	height: 80px;
	width: 85px;
	overflow: hidden;
}

Se non specificate alcuna dimensione, nel caso di un layout orizzontale l'area del bottone sarà troppo alta, mentre con un layout di tipo verticale il bottone sarà troppo largo. La proprietà overflow impedisce ai browser (come Firefox) di visualizzare una barra di scorrimento.

Torna su