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!
Tutorial brillante. Gracias.
¿Puedes decirme cómo hacer que el enlace "hace" se siente abajo a la derecha, alejado del texto, como lo tienes en tu sitio web?
Muchas gracias
Si hay alguien interesado en la traducción a otros idiomas del enlace "hace tiempo" les digo que acabo de descargar blogger.js, lo modifiqué y funciona.
Solo tienes que traducir los subtítulos, no te metas con el código, aquí tienes un ejemplo.
if (delta < 60) { return 'hace menos de un minuto'; } else if(delta < 120) { return 'hace aproximadamente un minuto'; } else if(delta < (60*60)) { return 'hace ' + (parseInt(delta / 60)).toString() + ' minutos'; } else if(delta < (120*60)) { return 'hace aproximadamente una hora'; } else if(delta < (24*60*60)) { return 'hace ' + (parseInt(delta / 3600)).toString() + ' horas'; } else if(delta < (48*60*60)) { return 'hace un día'; } else { return 'hace ' + (parseInt(delta / 86400)).toString() + ' días'; }
Por cierto, muchas gracias por el tutorial, me ayudó mucho.
Hola Leland,
¡Gracias por tu script! Casi lo tengo funcionando como quiero... ¿Hay alguna posibilidad de arreglar el tamaño de la lista? Quiero generar la lista dentro de una celda, pero cuando los tuits exceden la celda, ¡la celda explota!
Fantástico, pero no obtengo un resultado (.js novato). Mi sitio (callumflack.com) solo muestra "twitter feed loading" sin extraer realmente el feed de Twitter. He revisado todo en esta publicación, pero nada. ¿Qué me he perdido? Tu ayuda es muy apreciada.
gracias por esto 🙂 puedes cambiar los enlaces dentro de los tuits usando '#twitter_update list span', luego la hora de los tuits usando '#twitter_update list span a'. además, usar last-child elimina la línea horizontal debajo del último tuit. mira mi código a continuación.
#twitter_update_list { font-size: 10px; line-height: 15px; list-style: none; }
#twitter_update_list li { background: url(‘images/1px-grey.gif’) bottom left repeat-x; padding-bottom: 10px; margin-bottom: 10px; }
#twitter_update_list li:last-child { background: none; }
#twitter_update_list span { color: #856f6a; text-decoration: none; display: inline; }
#twitter_update_list span a { color: #fb3898; display: inline; }
#twitter_update_list a { color: #b3a39f; display: block; }
No te preocupes, lo resolví. Es esto:
http://api.twitter.com/1/favorites.json?screen_name=USERNAME&callback=twitterCallback2&count=5
Gracias por esto. Para aquellos que preguntaron…
Puedes cambiar esto a una lista cambiando la primera parte de la URL en el segundo script de:
http://twitter.com/statuses/user_timeline/USERNAME.json?
a
http://api.twitter.com/1/USERNAME/lists/LISTNAME/statuses.json?
Hola,
Buen tutorial. Sin embargo, mi sitio comenzó mostrando 3 tuits, ahora es muy esporádico y a veces decide mostrar 2 o 1.
¿Estoy siendo tonto aquí?
Rob
Esa es una buena pregunta. He notado que cuando retuiteas (como en el retuit oficial de Twitter) algo, no aparece, y en cambio solo muestra un tuit menos.
Odio la forma en que se ven los feeds oficiales de Twitter, así que me alegré de encontrar tu sitio. El tutorial fue muy informativo y fácil de seguir, y no puedo esperar a incorporar esto en el rediseño de mi sitio web.
Gran artículo.
Solo tuve que modificar el & top & para que el HTML validara.
¡Buen trabajo!
Sé que esto se publicó hace tiempo, pero ¿hay alguna forma de separar el tuit más reciente de los tuits anteriores para poder ponerles una etiqueta como "Último tuit" y "Tuits anteriores"?
¡Me encanta esto! ¿Hay alguna forma de forzar que los enlaces dentro de cada tuit se abran en una nueva ventana?
No estoy seguro de dónde va cada pieza de código en mi sitio wp – ¿puedes confirmar…
1ra parte – ¿dónde quiero el feed (p. ej. widget de texto)?
2da parte – ¿hoja de estilos?
3ra parte – ?
4ta parte – ?
5ta parte – ?
Gracias de antemano
Me siento tonto… Pero… ¿Dónde se escribe el nombre de usuario? No lo entiendo… Si copio y pego no funciona…
Este es un pequeño widget genial. Una nota: si agregaras un "position: relative;" al elemento HTML que tiene el "overflow: auto;", arreglarías un error que ocurría en IE7 (básicamente la caja de desplazamiento no funcionaba).
Muy buen tutorial, el único problema con esto es (a menos que haya hecho algo mal), que solo muestra tus tuits personales, no por ejemplo si retuiteas algo. Lo cual es una pena :/
Simplemente cambia
count=3porcount=6en el fragmento de Javascript.Hola,
Creo que si cambias tu Javascript para incluir “&include_rts=1” justo después de tu nombre de usuario, por ejemplo: http://api.twitter.com/1/statuses/user_timeline.json?screen_name=thelibzter&include_rts=1&callback=twitterCallback2&count=6.
Aquí hay una publicación que escribí sobre cómo incluir retweets en el feed personalizado de Twitter: http://icode4you.net/including-retweets-in-your-custom-twitter-feeds.
Hola,
Gracias por compartir y por tu gran trabajo. Estoy usando tu método de Twitter en mi página de inicio y me encanta.
Ahora mismo, muestra 3 tuits. ¿Puedo duplicar esto a 6?
¡Gracias de antemano!
felicidades
Xavier
¡Gracias por esto, es EXACTAMENTE lo que necesito para mi sitio web, funcionó a la perfección!
¿Hay alguna forma de usar este código con múltiples feeds de Twitter? Por ejemplo, si quisiera poner el feed de otra persona justo debajo del primero en la misma página, ¿cómo lo haría?
gracias.
Esa es una muy buena pregunta, pero no estoy seguro si es posible con este método, ya que el feed está directamente ligado a un solo nombre de usuario.
Tengo la sensación de que si agregaras múltiples líneas de
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/USERNAME.json?callback=twitterCallback2&count=3"></script>con diferentes nombres de usuario, se confundiría de alguna manera.Gran tutorial. Estaba buscando algo exactamente como esto.
Una pregunta, ¿es posible con este código cambiar el feed de un usuario específico a una lista de Twitter específica?
Buena pregunta, aunque hasta donde sé, este código solo funciona con usuarios específicos.
Tutorial verdaderamente excelente, ¡especialmente el truco del "hace tiempo"! ¡Muchas gracias por publicarlo!
justo lo que necesito para mi rediseño. gracias por esto.
¡Muchas gracias por este simple consejo! Funcionó en un sitio que ha deshabilitado JavaScript por alguna razón. No muestra gráficos, ¡pero funciona! ¡Y los enlaces (como twitpic & bit.ly) también funcionan!
¡Excelente trabajo, amigo!
Fantásticamente útil, gracias. Es interesante que http://twitter.com/javascripts/blogger.js y similares todavía estén ahí, sin enlaces obvios desde twitter.com.
Bueno, espero que lo mantengan compatible con fines heredados durante algún tiempo, mucha gente todavía lo usa.
No sé por qué Twitter eliminó estos widgets de su sitio web, pero antes, cuando lo usaba en mi sitio web de Blogger, funcionaba muy bien.
Creo que lo eliminaron en favor de sus widgets más "de marca", aunque el código que solían tener (el mismo código que estoy usando) todavía funciona.