Crear un widget de Twitter personalizado sin un plugin

Me han preguntado varias veces qué plugin de WordPress utilizo para generar la lista “Twitter Feed” en el pie de página de mi sitio. En realidad no uso un plugin en absoluto, es un fragmento de Javascript de Twitter que muestra una lista de mis tweets recientes que me estilo con CSS. En este tutorial, te mostraré:

• El código HTML y Javascript necesario para obtener los últimos tweets
• Una visión general del marcado HTML y los selectores CSS asociados
• Dos ejemplos de widgets personalizados de Twitter que he utilizado yo mismo

Sigue leyendo para ver el resto del tutorial…

El HTML y Javascript

Twitter solía proporcionar este código en su sitio, pero por alguna razón lo eliminó en favor de estos widgets mucho menos flexibles. Necesitarás dos trozos de código.

Primero, coloca el siguiente código donde quieras que aparezca la lista:

<ul id="twitter_update_list"><li>Carga del feed de Twitter</li></ul>

Nota: El <li>Twitter feed loading</li> no forma parte del código original proporcionado por Twitter, pero es necesario para que el HTML se valide. También puede proporcionar un mensaje útil mientras se carga el feed, ya que podría tardar unos segundos en un día lento.

En segundo lugar, tendrás que colocar las siguientes líneas de Javascript lo más cerca posible de la etiqueta </body>.

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/USERNAME.json?callback=twitterCallback2&count=3"></script>

Actualmente lo tengo justo encima de mi código de Google Analytics.  Debes mantener estas líneas de Javascript lo más abajo posible en la página porque en el caso de que Twitter no cargue, todo lo que esté por debajo de ese código se colgará (lo cual no es un gran problema si ya está en la parte inferior).

Visión general del marcado HTML y los selectores CSS

Ahora no puedes ver el código HTML que genera el widget de Twitter sin usar algo como la Web Developer Toolbar. Por suerte para ti, lo he hecho por ti. Aquí tienes una lista de muestra con un solo tweet como ejemplo.

<ul id="twitter_update_list">
<li><span>RT @<a href="http://twitter.com/Screenr">Screenr</a>: Genial actualización de Screenr: ahora tus screencasts se publican el doble de rápido <a href="http://screenr.com/aDp">http://screenr.com/aDp</a></span> <a style="font-size: 85%;" href="http://twitter.com/themelab/statuses/14229492866">hace 46 minutos</a></li>.
</ul>

• #twitter_update_list – Selecciona toda la lista.
• #twitter_update_list li – Selecciona elementos individuales de la lista
• #twitter_update_list li span – Selecciona la parte “tweet” del elemento de la lista, no el enlace de hace tiempo
• #twitter_update_list li span a – Selecciona el enlace dentro de la parte “tweet” del elemento de la lista
• #twitter_update_list a[style="font-size: 85%;" ] – Selecciona el enlace "hace tiempo", de una forma un tanto complicada (véase la nota siguiente).

Nota: Dado que hay un estilo en línea en el enlace “hace tiempo” que establece el tamaño de la fuente en 85%, hace que sea un poco difícil de anular sin un hacky pieza de código. He utilizado esto antes para restablecer el tamaño de la fuente al mismo que el resto de la lista:

#twitter_update_list a[style="font-size: 85%;"] { font-size: 1em !important; }

Esto probablemente no funcione en las primeras versiones de IE debido a la parte “!important”. También puedes usar display: block; para mover ese enlace a la siguiente línea.

Ejemplo en vivo

Para ver un ejemplo en vivo, echa un vistazo al pie de página de Theme Lab. O si estás leyendo esto en tu lector de feeds o en un sitio de scraper no autorizado, echa un vistazo a la siguiente captura de pantalla.

Aquí está el código que utilizo para la lista:

#twitter_update_list {
	font-size: 13px;
	altura de línea: 21px;
	estilo de la lista: ninguno;
	}
#twitter_update_list li {
	background: url('images/twitter-divider.gif') bottom left repeat-x;
	padding-bottom: 7px;
	margin-bottom: 9px;
	}
#twitter_update_list span, #twitter_update_list span a {
	color: #ababab;
	text-decoration: none;
	}
#twitter_update_list a {
	color: #6f7276;
	}

• La primera línea selecciona toda la lista. Establece el tamaño de la fuente, la altura de la línea y se asegura de que no aparezcan viñetas.
• La segunda línea hace que una pequeña imagen 2×1 se repita debajo de cada elemento de la lista como una especie de divisor. El relleno establece el espacio entre el tweet y el borde superior del divisor. El margen establece el espacio entre el borde inferior del divisor y el siguiente tweet.
• La tercera línea establece el color del tuit, incluidos los enlaces, y se asegura de que no aparezcan líneas debajo de los enlaces.
• La última línea establece el color del enlace “hace tiempo”.

Y ya está. Si tuviera que cambiar algo, diferenciaría los enlaces dentro del tuit de alguna manera, y tal vez añadiría también efectos hover en los enlaces.

Se puede utilizar en cualquier sitio

A diferencia de todos los demás cómo hacer XYZ sin un plugin de mensajes por ahí, no hay código de WordPress real utilizado en este tutorial.

Dado que no utiliza código de WordPress, no está archivado en la colección de tutoriales de WordPress. Puede ser utilizado en casi cualquier tipo de sitio, suponiendo que puede editar código HTML y CSS.

Si quieres usarlo dentro de WordPress, te sugeriría editar manualmente los archivos de tu tema para insertar las dos líneas de Javascript en el pie de página de tu sitio, o incluso engancharlo en tu hook wp_footer().

En cuanto al widget en sí, puedes pegar el código dentro de un widget de texto o codificarlo manualmente en tu barra lateral (o donde sea).

Conclusión

Espero que os haya gustado el tutorial, me encantaría escuchar vuestras opiniones en los comentarios. Si tenéis alguna petición de consejos rápidos sobre WordPress o CSS, no dudéis en hacérmelo saber. Es posible que aparezca en una futura entrada del martes de tutoriales en Theme Lab.