David Barredo

Diseño web, gráfico y maquetación

Twitter en tu blog sin usar ningun plugin

Publicado el 6 Octubre

Otro post rescatado, aunque aun sobrevive en la cache de google.

Si quieres agregar Twitter a tu blog, puedes encontrar multitud de plugins que te permitirán hacerlo fácilmente, sin embargo lo que mucha gente desconoce es que es igualmente sencillo (si no más) y bastante más rápido hacerlo mediante código HTML.

El código en cuestión nos lo facilitan en la propia web de Twitter.

La parte de código que se muestra a continuación debemos colocarla en el lugar de nuestro blog/web donde deseamos que aparezcan nuestros tuiteos.

1
2
3
4
<div id="twitter_div">
    <h2 class="twitter-title">Twitter</h2>
    <ul id="twitter_update_list"></ul>
</div>

Con esto, estamos creando una capa (div) que contiene una cabecera (h2) y una lista con nuestros tuiteos (ul), por lo que podremos personalizar fácilmente su apariencia mediante CSS.

Pero el código anterior no funcionara correctamente sin incluir esta otra parte:

1
2
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/USER.json?callback=twitterCallback2&count=X"></script>

Esta última parte es un javascript que recoge los datos de nuestro perfil en Twitter y los coloca en la lista de antes (ul). Aquí debemos configurar 2 parámetros:

  1. USER: nuestro nombre de usuario en Twitter
  2. count=X: sustituyendo la X por el número de actualizaciones que queramos mostrar

Por último añadir que esta parte del código es recomendable ponerla al final del todo de nuestra página, justo antes de la etiqueta </body> para evitar retrasar el tiempo de carga de nuestra web y posibles errores si Twitter se encuentra caído.

Archivado en: WebSin comentarios




El blog funciona con: WordPress | Javascript: jQuery, IE PNG Fix, ColorBox | Iconos usados: Fugue, Office Space, Moskis | Diseñado por: David Barredo

↑ Ir arriba | Esta web se publica bajo la licencia Creative Commons (Reconocimiento-No comercial-Compartir igual) | XHTML 1.0 Strict y CSS válidos