Crea un widget personalizado de Twitter sin un plugin

Me han preguntado varias veces qué plugin de WordPress uso para generar la lista de "Feed de Twitter" en el pie de página de mi sitio. En realidad, no uso ningún plugin, es un fragmento de Javascript de Twitter que muestra una lista de mis tuits recientes que he estilizado con CSS. En este tutorial, te mostraré:

• El código HTML y Javascript necesario para obtener los últimos tuits
• Una descripción general del marcado HTML y los selectores CSS asociados
• Dos ejemplos de widgets personalizados de Twitter que he usado 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 eliminaron en favor de estos widgets mucho menos flexibles. Necesitarás dos fragmentos de código.

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

<ul id="twitter_update_list"><li>Twitter feed loading</li></ul>

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

Segundo, necesitarás 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. Deberías mantener estas líneas de Javascript lo más abajo posible en la página porque en caso de que Twitter no se cargue, todo lo que esté debajo de ese código se detendrá (lo cual no es gran cosa si ya está al final).

Descripción general del marcado HTML y los selectores CSS

Ahora no puedes ver el marcado HTML que genera el widget de Twitter sin usar algo como la Barra de herramientas de desarrollador web. Por suerte para ti, yo lo he hecho por ti. Aquí tienes una lista de ejemplo con solo un tuit como ejemplo.

<ul id="twitter_update_list">
<li><span>RT @<a href="http://twitter.com/Screenr">Screenr</a>: Cool Screenr update: Now your screencasts publish twice as fast. <a href="http://screenr.com/aDp">http://screenr.com/aDp</a></span> <a style="font-size: 85%;" href="http://twitter.com/themelab/statuses/14229492866">46 minutes ago</a></li>
</ul>

• #twitter_update_list – Selecciona la lista completa
• #twitter_update_list li – Selecciona elementos individuales de la lista
• #twitter_update_list li span – Selecciona la parte del “tweet” del elemento de la lista, no el enlace de hace cuánto tiempo
• #twitter_update_list li span a – Selecciona el enlace dentro de la parte del “tweet” del elemento de la lista
• #twitter_update_list a[style="font-size: 85%;"] – Selecciona el enlace de “hace cuánto tiempo”, de una manera un tanto improvisada (ver nota a continuación).

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

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

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

Ejemplo en vivo

Para un ejemplo en vivo, revisa el pie de página de Theme Lab. O si estás leyendo esto en tu lector de feeds o en un sitio rascador no autorizado, revisa la captura de pantalla a continuación.

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

#twitter_update_list {
	font-size: 13px;
	line-height: 21px;
	list-style: none;
	}
#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 fuente, la altura de línea y se asegura de que no aparezcan puntos de viñeta.
• La segunda línea hace que una pequeña imagen de 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 tweet, 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 de “hace cuánto tiempo”.

¡Y eso es todo! Si tuviera que cambiar algo, diferenciaría los enlaces dentro del tweet de alguna manera, y tal vez agregaría efectos de pasar el ratón sobre los enlaces también.

Esto se puede usar en cualquier sitio

A diferencia de todas las otras publicaciones de cómo hacer XYZ sin un plugin que existen, no se utiliza ningún código de WordPress real en este tutorial.

Dado que no utiliza código de WordPress, no está clasificado en la colección de Tutoriales de WordPress. Se puede usar en prácticamente cualquier tipo de sitio, asumiendo que puedes editar el código fuente HTML y CSS.

Si quieres usarlo dentro de WordPress, te sugiero 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 a 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 les haya gustado el tutorial, me encantaría saber sus opiniones en los comentarios. Si tienen alguna solicitud de consejos rápidos de WordPress o CSS, no duden en hacérmelo saber. ¡Podría aparecer en una futura publicación de Tutorial Tuesday en Theme Lab!