¿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.
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
Hola de nuevo
desde mi ignorancia pregunto, puede ser que falte el javascrip donde agrega twitter.js?
saludos
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.
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! 😉
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…
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
ya kedo muxas grax por el codigo, desde hoy esta pag esta agregada a mis favoritos!! good luck!!
excelente, me funcionó de inmediato, gracias!
http://blog.felipebarrientos.cl
Solo para comentar que esta entendible el código ya que lo pude implementar en una página web que pronto subire,, solo cambie las unidades de medida de Ems por Px, saludos
Hola! Hace un tiempo utilicé el badge de javascript para twitter y ahora mismo ha dejado de funcionar, no carga los twits… habéis necesitado hacer alguna actualización?
un saludo y gracias!
esta es la web donde la implementé
hortacetaceos.com