Posts Tagged: widget


21
jul 09

TwitterBadge: CSS-eando el widget

En un artículo anterior, expliqué cómo integrar Twitter con un blog, usando un Twitter Badge. Pues bien, como se trata de un gadget, lo más probable es que quede integrado de la misma forma como un agregador de RSS o una columna de categorías. Y ¿qué pasa si lo quiero arreglar un poco más?. Pues veamos.

¿Qué necesito?

Para esta demostración necesitarás:

  • un blog, preferentemente montado en un servidor propio, ya que algunos sistemas gratuítos como WordPress y LiveJournal restringen los derechos de modificar las hojas de estilo.
  • el código fuente del Twitter Badge (se obtiene tal como se explica en este post)
  • la hoja de estilos del blog, que para este caso será tomada directamente de un blog en WordPress en un servidor desconocido ;) .

Analizando el código del badge

Nota: para que esto funcione, debemos usar la versión en HTML. La versión en Flash no funciona con esto.

Para comenzar, obtenemos el código del badge, que debiera ser algo así:

<div id="twitter_div">
<h2>Mi Twitter</h2>
<ul id="twitter_update_list">
<a href="#topofpage" id="twitter-link" style="display:block;text-align:right;">follow me on Twitter</a>
</ul>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/mi_usuario.json?callback=twitterCallback2&amp;count=5"></script>

Dentro de este código tenemos tres etiquetas con identificador (id): <div id=”twitter_div”> (en verde, correspondiente al contenedor del badge), <ul id=”twitter_update_list”> (en rojo, correspondiente a la lista de actualizaciones) y <a … id=”twitter-link” …> (en azul, correspondiente al estilo del link).

TwitterBadge en normal

TwitterBadge en normal

Esto significa que debemos agregar a la hoja de estilos del blog tres identificadores más: #twitter_div, #twitter_update_list y #twitter_link.

Por cierto: en el código el nombre de usuario fue cambiado por “mi_usuario”, con el fin de proteger a los inocentes :D .

El resultado de la inserción del badge debiera ser como la imagen de la derecha.

Editando la hoja de estilos

Una vez detectado dónde tienes que intervenir para modificar la apariencia del badge, agregas el siguiente código al final de la misma:

/* Twitter Badge */

#twitter_div {
background-color: black;
padding: 10px 20px;
border: 2px grey solid;
color: white;
font-size: 10px;
}

#twitter_update_list ul {
padding: 5px;
}

Con esto agregamos color de fondo y modificamos el color de la tipografía. Debiera verse más o menos así:

TwitterBadge con CSS simple

TwitterBadge con CSS simple

¿Y eso no más se puede hacer?

Noooooo… es posible seguir haciendo modificaciones. En un próximo artículo te mostraremos cómo agregar un tapiz de fondo y dejarlo prácticamente con la misma apariencia de un widget hecho en Flash.

Stay tunned.


18
jul 09

TwitterBadge o ¿cómo llevo Twitter a mi blog?

Muestra de TwitterBadge

Muestra de TwitterBadge

En varios blogs es posible ver el estado de Twitter del usuario en algún sector de la página (barra lateral, header o footer, principalmente). Esto lo ví inicialmente en el blog de El Francotirador, y me pareció bastante simpático, ya que es una forma simple de integrar el microblogging con el blog propiamente tal. Así, si no tienes tiempo de publicar algo demasiado elaborado, puedes “actualizar tu blog” desde Twitter, con un posteo rápido y un link.

Un Twitter Badge es una porción de código XHTML que se agrega en la plantilla o en un widget de tu sistema de blogging favorito (en mi caso, WordPress). Lo que hace, básicamente, es leer tus post en Twitter y publicarlos en tu blog. Como es código, es posible cambiar su apariencia usando CSS, aplicando cambios en el fondo o el color de la letra. Además, puede ser instalada automáticamente en Blogger, MySpace, Facebook y TypePad.

¿Cómo instalo un Twitter Badge?

…en MySpace

Twitter Badge en MySpace

  1. Entra y logueate en Twitter
  2. Entra en la página de badge: http://twitter.com/badges
  3. Elige MySpace en las opciones de badge y haz clic en Continue
  4. Selecciona interactive of display-only
  5. Haz clic en el enlace “Instructions for MySpace”
  6. Copia y pega el código generado en tu perfil de MySpace

Recuerda que para ver este badge, debes tener el plugin de Flash instalado y funcionando.

…en Blogger

TwitterBadge en Blogger

  1. Entra y logueate en Twitter
  2. Entra en la página de badge: http://twitter.com/badges
  3. Elige Blogger en las opciones de badge y haz clic en Continue
  4. Selecciona la cantidad de actualizaciones que se muestren en el blog
  5. Haz clic en el botón “Add to Blogger” si estas usando los nuevos diseños de Blogger. En caso contrario o si no estás seguro, haz clic en el botón “Grab the code”
  6. En este último caso, copia y pega el código en un widget HTML/Javascript en tu Blogger

El badge aparecerá en la barra lateral del blog.

…en Facebook

Agregar Twitter en Facebook
En un post anterior, Felipe explicó cómo sincronizar Twitter con Facebook. Aquí tenemos otro método para hacer lo mismo.

  1. Entra y logueate en Twitter
  2. Entra en la página de badge: http://twitter.com/badges
  3. Elige Facebook en las opciones de badge y haz clic en Continue
  4. Haz clic en “Install Twitter in Facebook”
  5. Entra y logueate en Facebook e instala la aplicación

Más información sobre cómo instalar la aplicación de Facebook aquí.

…y en otros sistemas

Selector de tipo de plataforma

Selector de tipo de plataforma

Sistemas como LiveJournal y WordPress no tienen soporte para agregar aplicaciones empotradas. Para estos casos, siempre es posible “copiar y pegar” el código en un widget. Para esto sigue estos pasos:

  1. Entra y logueate en Twitter
  2. Entra en la página de badge: http://twitter.com/badges
  3. Elige Other en las opciones de badge y haz clic en Continue
  4. Selecciona una de las dos opciones: Flash widget o HTML widget. Haz clic en “Continue”
  5. Selecciona la cantidad de actualizaciones que deseas mostrar en el badge, además del título. En el caso que le pongas título en tu sitio, activa la casilla “No title”. Copia el código generado y pégalo en un widget de tu blog.
Generador de codigo

Generador de codigo

Más adelante vamos a hacer un tutorial para personalizar la apariencia del badge en un blog.


17
jul 09

TwitterGadget: Twitter en tu Gmail y iGoogle

TwitterGadget es justamente lo que el nombre dice, un gadget o widget para Twitter, que puedes agregar a tu barra lateral de Gmail, tu página de inicio de iGoogle o usarlo directamente en su sitio, aunque esto último no tenga mucho sentido.

iGoogle_1247846968183

Lo he estado usando hace un poco menos de 1 semana en mi iGoogle y debo decir que es bastante bueno. Si han usado el cliente de escritorio Twhirl, van a encontrar que se parecen mucho.

TwitterGadget tiene un tamaño justo y provee acceso rápido a los replies, mensajes directos, favoritos, y todos tus contactos. Además te permite enviar tu tweet con un cuadro en la parte superior de manera rápida y acorta las URLs, además de expandir las que ya vienen acortadas. En el fondo, mucha funcionalidad en tamaño pequeño.

No es como usar un cliente de escritorio, pero para dejarlo vivir en iGoogle, es más que suficiente y cumple todo lo que debe hacer. Los invito a probarlo en TwitterGadget.com

A continuación les dejo un video donde pueden ver cómo funciona, antes de probarlo.

Imagen de previsualización de YouTube

Agradecimientos a @alejandroivan por sugerir este artículo.