Un 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:

Badge para Twitter 

  

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.

10 thoughts on “Un badge Javascript (mejor) para Twitter

  1. OMR

    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

  2. OMR

    Hola de nuevo

    desde mi ignorancia pregunto, puede ser que falte el javascrip donde agrega twitter.js?

    saludos

  3. jordisan Post author

    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.

  4. jordisan Post author

    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…

  5. edward

    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

  6. paola

    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

Leave a Reply

Your email address will not be published.