En realidad, se puede usar estas líneas de código en cualquier html pero en base a una duda en ForoBloggers se me ocurrió precisarlo puntualmente para que los que utilizan plataformas de blogging (precisamente WP) puedan hacerlo. Hay plugins, pero no me parecen necesarios sobre todo con el consumo que generan los plugins siendo poquísimas líneas de código simple.
¿Cómo comenzar?
Primero, tenemos que identificar el lugar exacto donde queremos pegar el cuadrado de updates. En Wordpress, todas las plantillas (wp-content/themes/nombredeltheme) tienen un archivo llamado sidebar.php que corresponde -generalmente- a la barra lateral. En mi caso lo agregué ahí pero pueden hacerlo en cualquier lado pegando el código.
El código
<div id="novedades">
<img src="http://sergiomelzner.com.ar/media/avatar.jpg" align="left">
Cargo el <div id=”novedades”> para después darle estilo al contenido, sobre todo para darle padding a la imagen y demás. Además incluyo la imagen y la alineo a la izquierda, pero de más está decir que esa imagen corresponde a mi caripela y ustedes deberían buscar la suya.
<ul id="twitter_update_list"></ul>
<script type="text/javascript"
src="http://twitter.com/javascripts/blogger.js"></script>
<script text="text/javascript"
src="http://twitter.com/statuses/user_timeline/sergiomelzner.json
?callback=twitterCallback2&count=1″></script>
</div>
Con negrita van a ver el único atributo que deberían modificar reemplazándolo por su propio usuario de Twitter. Personalmente me parece que solo habría que listar el último update, así que puse el contador a 1 con la especificación “count=1″ que lo que indica es que busque los últimos X (en mi caso 1) updates. Si quisieramos los últimos 5 lo cambiaríamos por “count=5″, etc. Al final cierro el div que abrí al principio.
Mejorar el aspecto con CSS
Podría parecer inútil cargar ese código dentro de un div, pero en realidad es necesario para personalizarlo. Si le damos align=left a la imagen veremos que se tira a la izquierda pero pegada al texto (que se ubicaría a la derecha de la imagen). Para optimizar eso deberíamos armar en la hoja de estilo (generalmente style.css) un #id que explico a continuación:
#novedades le doy el mismo nombre que el div en que encajoné el contenido
{ abro…
color: #000000; color hex de la letra, en este caso negro
background-color: #FFFFFF; color hex del fondo, en este caso blanco
font-size: 14px; el tamaño de letra
height: 100px; especifico el alto entonces ningún texto se mete abajo por el align de img
} cierro…
#novedades img armo estilo para las imágenes dentro del div novedades
{ abro…
padding-right: 10px; le pongo padding para que la imagen no se pegue al texto
} cierro…
En bordó negrita lo que tienen que usar, en texto común algunas explicaciones para que puedan adaptarlo a sus necesidades. Si alguien lo implementa me cuenta cómo le fue, y si tienen alguna duda en los comentarios voy a tratar en los 3 o 4 minutos libres por día de darles una mano.
Charlando con algunos bloggers de Corrientes (1, 2, 3, 4, 5 y 6) me entero que organizaron una reunión el sábado a la tarde. Tarde como siempre llegué y me encontré con gente muy copada, grababan una reflexión de Joa y como siempre interrumpí sin querer.
