RSS
Ingeniero en Informática que usa en ocasiones el alias RamSys y que está interesado en todo lo que relacione lo humano con lo tecnológico: usabilidad, diseño, interfaces, psicología, ...
Menú de OperaciónUn badge Javascript (mejor) para Twitter
Aquí tienes un badge (widget) HTML/Javascript para mostrar tus updates de Twitter. ¡Mucho mejor que el de la página de Twitter!
¿Así que quieres mostrar tus últimos updates de Twitter en tu página web? Puedes usar el badge de Twitter, pero su aspecto no es demasiado bueno, y ni las URLs ni los @replies en los updates son enlaces.
Si quieres un badge mejor, incluyendo URLs y @replies enlazados (como el que aparece en la columna izquierda de esta página), simplemente sigue estos pasos:
1. Descarga y enlaza los ficheros .js y .css
Descarga twitter.css y twitter.js de este sitio. Colócalos en tu propio servidor, y modifica el código HTML de tu página o plantilla para enlazarlos; tienes que incluir algo similar a esto dentro de la sección <head>:
<link rel="stylesheet" type="text/css" media="screen" href="twitter.css" /> <script type="text/javascript" src="twitter.js" />
Puedes modificar el fichero css para conseguir el aspecto que desees. También puedes modificar algunas cadenas de texto en el fichero .js (por ejemplo, para adaptarlos a un idioma diferente).
2. Incluye el código para insertar el badge
Modifica tu plantilla o página HTML para insertar este código donde quieras que aparezca el badge:
<div id="twitter_div"><ul id="twitter_update_list"><li>cargando…</li></ul> </div> <div> <a class="twitter_follow" href="http://twitter.com/YOUR_USERNAME">sígueme en http://twitter.com</a> </div>
No olvides incluir tu propio usuario de Twitter. También puedes modificar los textos 'cargando…' o 'sígueme'.
3.Incluye la llamada al API de Twitter
Incluye este código al final de tu plantilla o página HTML, justo antes de la etiqueta </body> (de este modo tu página se mostrará correctamente incluso si la llamada falla, por ejemplo, si el sitio de Twitter está caído):
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/YOUR_USERNAME.json?callback=twitterCallback2&count=10"></script>
No olvides incluir tu propio usuario de Twitter. También puedes modificar el número de updates que se mostrarán.
Y eso es todo
Por favor, avísame si estás usando este badge, o si tienes algún error o mejora que comentarme.
Miércoles, 3 Junio 2009 @ 09:10
Hola RamSys, es justo lo que estaba buscando.
Pero no me funciona :S
Hago todo, descargo el .css y .js, los pongo en la misma carpeta del html
copio los codigos tal cual estan en los 3 pasos y cambio YOUR_USERNAME por mi nombre de usuario en twitter
pero no pasa nada, no muestra los twits ni tampoco errores
no faltara algo?
Un saludo y gracias
Miércoles, 3 Junio 2009 @ 09:20
Hola de nuevo
desde mi ignorancia pregunto, puede ser que falte el javascrip donde agrega twitter.js?
saludos
Miércoles, 3 Junio 2009 @ 09:35
OMR,
el JavaScript se agrega en el paso 1; ¿no te da ningún error de JavaScript?
Si me das la URL donde lo has puesto (si es pública), le echo un vistazo.
Miércoles, 3 Junio 2009 @ 23:20
jordisan, aca subi lo que hice en mi pc:
http://omr6.brinkster.net/index.html
http://omr6.brinkster.net/twitter.css
http://omr6.brinkster.net/twitter.js
puedes ver el codigo fuente, creo que puse todo
gracias!
Miércoles, 29 Julio 2009 @ 15:48
OMR,
el código fuente de tu index.html no es correcto; tienes que cerrar el tag <script> del header y alguna cosa más…
Jueves, 20 Agosto 2009 @ 21:41
Hola, e inkluido los kodigos en mi web y no me funciona y me manda el sig error:
Mensaje: Object expected
Línea: 1
Carácter: 1
Código: 0
URI: http://twitter.com/statuses/user_timeline/adanra.json?callback=twitterCallback2&count=10
sabes kual puede ser el problema?, gracias de antemano
Jueves, 20 Agosto 2009 @ 21:57
ya kedo muxas grax por el codigo, desde hoy esta pag esta agregada a mis favoritos!! good luck!!