Tutorial: Hacer un Widget de Twitter personalizado

Modificado por última vez en Domingo, 11 Agosto 2013 01:32
(0 votos)

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.


Comentarios (3)

This comment was minimized by the moderator on the site

Enhorabuena por el post. Cuesta horrores encontrar algo sobre este tema. La pena es que cuesta hacerlo porque no dices que cambiar exactamente. El título por ejemplo pongo esto <script src="http://widgets.twimg.com/j/2/widget.js"></script> o...

Enhorabuena por el post. Cuesta horrores encontrar algo sobre este tema. La pena es que cuesta hacerlo porque no dices que cambiar exactamente. El título por ejemplo pongo esto <script src="http://widgets.twimg.com/j/2/widget.js"></script> o pongo siguenos en twitter y dentro del texto del widget pongo esto, y a continuación el fragmento del código que nos indicas. ¿podría poner un ejemplo aunque sea inventado de las cosas que hemos de modificar. Te lo agradecería infinitamente. Un cordial saludo

Leer más
This comment was minimized by the moderator on the site

?Y dónde ponemos el usuario de twitter en el widget personalizado? No me acaba de quedar muy claro...

This comment was minimized by the moderator on the site

Y cómo ubico el Widget en el HTML?

No hay comentarios escritos aquí

Deja tus comentarios

  1. Publicar comentario como invitado. Regístrate o ingresaa tu cuenta
Archivos adjuntos (0 / 3)
Compartir su ubicación
close

Recibe gratis nuestros nuevos artículos!

Serás el primero en conocer las novedades y noticias que pasan en Internet, nuestros tutoriales, trucos y más.

Escribe tu email:

Se abrirá una nueva ventana deFeedBurner a la izquierda de la página y habrás de validar un Captcha.

Lee nuestras Política de privacidad & Política de cookies
Puedes darte de baja de la lista de correo electrónico en cualquier momento