Clicky

Tutorial: Hacer un Widget de Twitter personalizado

widget de Twitter personalizado

Twitter ofrece una herramienta para crear cronologías (timelines) personalizadas

Twitter es una de las mayores redes sociales que existen, y sin duda puede manejar una gran cantidad de tráfico que ofrece un montón de exposición y buenas tasas de conversión. Si no eres un desarrollador puedes hacer uso de las herramientas de Twitter para interactuar con los usuarios de tu propio sitio. Lo puedes hacer con estas cuatro herramientas que ofrece Twitter:

1. Líneas de tiempo embebidas - Es decir Widgets, que es lo que vamos a ver hoy.
2. Tarjetas Twitter - Igual que la herramienta "share" de Facebook, donde se puede incluir contenido externo, citas e imágenes.
3. Tweets embebidos - Permite añadir un solo tweet en tu propio sitio como una cita fresca y con estilo.
4. API de Twitter - Esta es la manera potente y avanzada para interactuar más allá de mostrar simplemente los Tweets.

Hoy vamos a echar un rápido vistazo a algunos métodos para añadir a tu sitio web Widgets con un estilo personalizado, llevando las cosas más allá del nivel básico y los cinco últimos Tweets. Porque al fin y al cabo todos queremos destacar entre la multitud, ¿no es así?

Calentando motores...

La manera más fácil de empezar es usando las herramientas propias de Twitter. La mayoría de las personas no saben realmente que Twitter ofrece una herramienta para crear cronologías (timelines) personalizadas.

Si estás conectado verás una pantalla con las funcionalidades más comunes, así:

Herramienta de Twitter para crear Widget personalizado

La versión actual ofrece 4 tipos de controles:

1. Cronología de usuario - El Widget más común que vemos casi en cualquier lugar. Se muestran los últimos tweets.
2. Favoritos - Esto creará un timeline personalizado de tus propios favoritos. Los que utilizan para compartir las herramientas de Google Readers han visto antes esta función (donde puedes compartir tus propios favoritos como un feed RSS).
3. Lista - Es bueno para la gente del grupo con cosas en común, como el campo de actividad, el tipo de tweets, compañía.
4. Buscar - Puedes mostrar los resultados de tus propias búsquedas o hashtags.

En este enlace un Widget creado con las herramientas de Twitter y debajo otro creado con las indicaciones de este tutorial

Este es el código que se obtiene:

<a  href="https://twitter.com/apanados"  data-widget-id="319885543854964736">Tweets por @apanados</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Son bastante sencillos, pero eso no significa poca o ninguna personalización. Eso es un comercio justo, ya que no se puede tener todo en la vida, ¿no? Bueno, en realidad se puede.

Ensuciarse las manos

¿Te sientes hoy con ganas de codificar? ¿Sí? Bueno. Vamos a profundizar un poco más y crear un widget personalizado.

Lo primero que tendremos que hacer es llamar a la funcionalidad widgets de Twitter. Esta línea bastará para hacer el trabajo:

<script src="http://widgets.twimg.com/j/2/widget.js"></script>

A continuación, vamos a necesitar otro fragmento de código para crear el widget. Esto se hace con:

<script>
    new TWTR.Widget({
        version: 2,
        type: 'profile',
        rpp: 5,
        interval: 5000,
        width: 400,
        height: 400,
        theme: {
            shell: {
                background: 'black',
                color: 'white'
            },
            tweets: {
                background: 'white',
                color: 'black',
                links: 'red'
            }
        },
        features: {
            scrollbar: false,
            loop: false,
            live: false,
            hashtags: false,
            timestamp: false,
            avatars: false,
            toptweets: false
        }
    }).render().setUser('speckyboy').start();
</script>

Ahora vamos a traducir estos atributos al castellano:

•  Type: Más o menos los 4 tipos que hemos visto antes. Los valores posibles son 'profile', 'favorites', 'list', 'search'.
•  Rpp: Es el número de Tweets que se muestran.
•  Interval: Cuántos milisegundos debe esperar el widget antes de intentar recuperar los nuevos tweets. Cuanto mayor sea el número, tendrá más llamadas JS.
•  Width y Height: Acertaste, medidas para la caja de twitter.
•  Shell y Tweets: Las opciones de estilo básicas para tus cajas.
•  Scrollbar: False obligará a ser mostrados únicamente el número de tweets que has seleccionado, con true el usuario puede navegar a través de los tweets anteriores.
•  Loop: False no traerá resultados duplicados, true traerá los mismos resultados si la búsqueda no encuentra nada nuevo.
•  Live: True hará que se recargue la búsqueda continuamente, no sólo la carga de la página.
•  Hashtags, Timestamp, Avatars: false/true para ocultar o mostrar los elementos.
•  Toptweets: false para mostrar todos los tweets relacionados con tu búsqueda y true para mostrar sólo los más populares.

Ten en cuenta que tenemos la llamada obligatoria a setUser("˜UserName') para el widget de perfil. No se pide ninguna contraseña y no tiene ningún método de control, por lo que tiene más o menos las mismas capacidades que tendría en tu Twitter, pero aquí tenemos todo un conjunto de interesantes nuevas cosas que podemos hacer.

Y puesto que la API de Twitter no tiene reglas CSS en línea, usaremos nuestro propio código. Hay un montón de nombres de clases obvias y todo lo que necesitas saber es un poco de CSS para personalizarlo, por ejemplo:

.twtr-widget {
    width: 400px;
    margin: 50px 0 0 50px;
    padding: 0 0 25px;
    background: white url(background.png);
}

La misma regla se aplica para el encabezado: .twtr-hd, el body: .twtr-bd y el footer: .twtr-ft . Puedes utilizar casi cualquier regla CSS que desees para cambiar los colores, tamaños, fondos, sombras, degradados e incluso se puede hacer uso de los pseudo-elementos como :before y :after .

Cómo personalizar tu búsqueda

También podríamos hacer uso del widget para mostrar una búsqueda personalizada. Sólo cambia el tipo de búsqueda y el título a añadir, los sujetos, y los atributos de búsqueda para el widget. Se aplica el mismo estilo CSS, por lo que fácilmente se puede agregar más de un widget.

Es en el atributo de búsqueda en sí es donde sucede toda la magia. Éstos son los términos de búsqueda posibles:

•  Búsqueda de texto normal: Nada nuevo aquí. Puede buscar por "speckyboy" y recibirás una gran cantidad de resultados.
•  Hashtag: Si se agrega el operador "#" podrás filtrar los hashtags para ese elemento.
•  Excluyendo: Si estás recibiendo demasiados resultados puedes eliminar la basura añadiendo -undesiredTerm .
•  Autoría: El uso de from:speckyboy devolverá Tweets sólo a partir de un determinado usuario.

Pero a fin de obtener un buen resultado puedes encadenar múltiples métodos de búsqueda en una sola cadena, utilizando los operadores AND/OR. Sin embargo, el OR funciona como un operador XOR (o exclusivo) lo que significa que va a traer un resultado O el otro, pero no ambos.

Por ejemplo, si buscas "dev OR frontend" y tiene un Tweet que dice "@speckyboy es el mejor blog dev por ahí. Buenos consejos de frontend", este Tweet no se mostrará en tu búsqueda, debido al comportamiento XOR. Podrías simplemente buscar "frontend dev" para obtener ambos resultados.

Larga historia corta

Esto es sólo el comienzo para abrir los ojos a un mundo mucho más grande que un simple widget de Twitter. Ahora te pregunto, ¿has visto por ahí algún buen widget con implementación personalizada? Si lo deseas, puedes compartirlo.

Jesus_Caceres