DaCh

Twitter es una red social de microblogin y es una de las mas usadas en la web 2.0.
se puede considerar como un grito de la moda en internet, muchos sitios web y/o blog usan a twitter como una herramienta de comunicacion entre sus clientes, suscriptores, amigos, etc. y en cierta forma se ha hecho de mucha importancia mostrar tus últimos estados ( tweets ) desde el sitio web, para esto existen una gran cantidad de widgets y plugin que te permiten mostrar las ultimas actualizaciones de tu estado ( tweets ), pero muchos de estos widgets/plugin hacen mas lenta la carga de la pagina o no se acomoda al diseño del sitio o simplemente no son al gusto de quien lo usa.

Buscando en internet me encontré con el blog @line25blog en el cual presenta una simple solucion con la Wiki de la API de Twitter.

Lo que vamos a desarrollar: un diseño simple que muestre los últimos tweets de un feed en particular. Si bien en esta demostración se utiliza un diseño de página completa, el mismo enfoque puede utilizarse para mostrar hasta 20 tweets en cualquier lugar de tu sitio web.

Empecemos por dar contenido al concepto para tener una buena idea de cómo los cambios se deben mostrar. Aquí hemos utilizado un fondo determinado, expusimos el nombre de usuario @line25blog como un encabezado general, utilizado una pequeña y tierna mascota de Twitter desde Blog.SpoonGraphics para introducir el mensaje y darle estilo a cada Tweet en un contenedor redondo.

El HTML

<div id="twitter">
  <h1><a href="http://twitter.com/line25blog">@line25blog</a></h1>
  <ul id="twitter_update_list"></ul>
</div>
<script src="http://twitter.com/javascripts/blogger.js"type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/line25blog.json?callback=twitterCallback2&count=1"type="text/javascript"></script>

Las dos opciones son para editar, el nombre del usuario para obtener los tweets, y el número de tweets, en el script, que quieres mostrar. Así pues, usted puede mostrar su último tweet, o una lista de mensajes recientes.

Viendo el HTML en un navegador, debe mostrar que todo funciona correctamente. El siguiente codigo es para personalizar el estilo visual con un toque de CSS.

El CSS

body {
	background: #909ca6 url(http://line25.s3.amazonaws.com/wp-content/themes/line25/images/body-bg.png);
}

#twitter {
	width: 500px; margin: 130px auto;
}

	#twitter h1 a {
		display: block; margin: 0 0 15px 0;
		font: 90px Helvetica, Arial, Sans-Serif; color: rgba(255,255,255,0.2);
		text-decoration: none;
	}
		#twitter h1 a:hover { color: rgba(255,255,255,0.3); }

	#twitter ul {
		list-style: none; padding: 0 0 0 140px;
		background: url(bird.png) 0 0 no-repeat;
	}
		#twitter ul li {
			padding: 20px;
			background: rgba(255,255,255,0.1);
			border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;
		}
			#twitter ul li a {
				font: italic 14px/30px Georgia, Times, Serif;
				color: #555b6e;
			}
				#twitter ul li a:hover { color: #1b2f6f; }

		#twitter ul li span {
			font: 22px/30px Helvetica, Arial, Sans-Serif; color: #fff;
		}
			#twitter ul li span a {
				font: 22px/30px Helvetica, Arial, Sans-Serif;
			}

Unas pocas líneas de CSS pronto pueden transformar la apariencia del HTML. Hemos usado RGBA para especificar no sólo los canales rojo, verde y azul, sino también un canal alfa para determinar la opacidad del elemento. Usando esto sobre el título, el estado hover y list-background se pueden añadir una mejora visual muy atractiva.

ver el ejemplo

Fuente: http://www.elwebmaster.com

Post Original: http://line25.com