domingo, 27 de septiembre de 2009

widget de twitter personalizable en español y código html

widget de twitter personalizable en español y código html

Este widget que presento hoy es totalmente personalizable y se puede integrar en cualquier página web, blog o myspace.
Funciona con el buscador de twitter y un archivo .js (javascript) que es el que hace las llamadas al buscador.
Lo he conseguido editando otros .js que cito al final del post.

Vamos a presentarlo con un ejemplo:

En este widget le he dicho que me ponga los últimos 7 teewts del usuario Languedok, tamaño y color del texto y del fondo; y además que me muestre su avatar

Otro ejemplo diferente:

En este segundo widget le he dicho que muestre el último tweet de @raulquijano (Paisano que va a sacar su nuevo disco)
En este 2º caso le he dicho que oculte el avatar y le he cambiado los colores.

¿Que se puede hacer con este script o widget?

  • Darle las dimensiones que queramos (ancho y alto)
  • Personalizar los colores de fondo, texto y tweets (El link lo he dejado por defecto, habría que modificarlo en el .js)
  • Decirle que se autoactualice cada x segundos o que no lo haga (Mientras lo estamos visualizando)
  • Decirle que nos muestre los tweets de uno o varios usuarios
  • Decirle que nos muestre un tag determinado
  • Decirle que nos muestre lo que dicen las personas de una determinada ubicación
  • Decirle en que idioma (útil en los tag)
  • Incrustar html en la cabecera, en la parte inferior o incluso bajo cada tweet
  • Escoger el tamaño del texto de los tweets
  • Escoger el número de tweets a mostrar
  • Decidir si centramos o no los tweets
  • Ponerle un scroll o no (En caso negativo, si la caja es más pequeña que los tweets estos se saldrán de la caja, aconsejo darle un "auto" a la altura de la caja o un "yes" al scroll)
  • Lo mejor de todo, podemos tener dos cajas diferentes en la misma página al mismo tiempo sin que interactuen entre ellas

Al código:
Creamos una capa con un id y este script: (Pongo el ejemplo del primero)

 <div id="un_nombre">
<script language="javascript">
/* miniwidget configuración */
var mini_divname = 'mini_wide';
var mini_width = '300px';
var mini_height = 'auto';
var mini_scroll = 'no';
var mini_widget_background = '';
var mini_widget_border = '';
var mini_center_widget = ''; /* tweets estilo */
var mini_tweet_textcolor = '#8A0886';
var mini_tweet_background = '#FFFFFF';
var mini_tweet_border = '';
var mini_tweet_margin = '';
var mini_tweet_fontsize = '12px';
var mini_hide_img = 'no';
/* resultados */
var mini_widget_refresh_interval= '0';
var mini_pre_html = '<center><b>Ejemplo de mis últimos 7 tweets:</b></center>';
var mini_post_html = '';
var mini_mid_html = '';
var mini_tweet_style_misc = 'min-height:50px;';
var mini_num_tweets = '7';
var mini_tweet_lang = 'es';
var mini_search = 'from:minipunk';
</script>
<script src="http://ruta_al archivo.js" type="text/javascript"></script></div>

Parece complicado pero no lo es, mira un ejemplo pinchando aquí y revisa su código fuente

Su configuración es la siguiente: Las variables se pueden modificar del siguiente modo:
<script language="javascript">

/* miniwidget configuración */

var mini_divname = 'un nombre de capa'; <--- utilizar distintos nombres si se van a poner más de una capa en la misma página

var mini_width = '300px'; <--- El ancho del widget en pixeles

var mini_height = 'auto'; <--- El alto del widget también en pixeles

var mini_scroll = 'no'; <--- Si queremos que tenga o no scroll (Valores "yes" o "no", por defecto no lo tiene)

var mini_widget_background = ''; <--- Color de fondo de la caja

var mini_widget_border = ''; <--- Color del borde de 1 px editable en el .js

var mini_center_widget = 'no'; <--- Si centra o no cada tweet

/* tweets estilo */

var mini_tweet_textcolor = '#8A0886'; <--- Color del texto de los tweets

var mini_tweet_background = '#FFFFFF'; <--- Color de fondo de los tweets

var mini_tweet_border = ''; <--- Color de borde de los tweets

var mini_tweet_margin = ''; <--- Margen en px entre cada tweet

var mini_tweet_fontsize = '12px'; <--- Tamaño del texto de los tweets

var mini_hide_img = 'no'; <--- Que oculte o no el avatar de usuario (valores "yes" o "no")
/* resultados */
var mini_widget_refresh_interval= '0'; <--- Si queremos que se autoactualice cada x segundos (Valor menor a 8 no actualizará)

var mini_pre_html = '<center><b>Ejemplo de mis últimos 7 tweets:</b></center>'; <--- Etiqueta html de cabecera de la caja

var mini_post_html = ''; <--- Etiqueta html de pie de la caja

var mini_mid_html = ''; <--- Etiqueta htmlentre ccada tweet

var mini_tweet_style_misc = 'min-height:50px;'; <--- atributos CSS de caja de tweet

var mini_num_tweets = '7'; <--- Número de tweets a mostrar hasta 100

var mini_tweet_lang = 'es'; <--- idioma de los resultados ("es" "en" "de" etc.)

var mini_search = 'from:minipunk'; <--- Palabra clave a buscar

</script>

Para que no tengas que copiar y pegar con los errores que ello puede conllevar he subido al servidor el archivo, juto con un ejemplo y su tutorial

Recomiendo alojar el archivo.js en un servidor propio, aunque se puede utilizar el mio
Cualquier duda o pregunta dejar un comentario en este post, si lo haces como anónimo, empieza diciendo soy:X para poder responderte

Puedes usarlo para narrar un evento usando un #tag y actualizando cada 12 segundos, por ejemplo #wtf y #XD Ver ejemplo en ventana externa

Descargate el archivo y el tutorial --> aquí

Fuentes: JS de google y Tweetgrid modificado con este fin y el .json de la Apiwiki de twitter

Si te ha gustado este post quizás te gustaría ver más tutoriales.

Comparte este post en:

5 comentarios :

  1. tío felicidades, erer un crack! un abrazo y gracias por todo.

    personalmente estoy motivado por empezar a formatar mis própias páginas web con mi código y seguro que aprovecho este :-)

    un abrazo y por cierto ahora me estoy leyendo un libro sobre las api's de twitter, si me entero de cosas interesantes será un placer compartirlar contigo.

    ResponderEliminar
  2. Alvaro me encantará comentar estos temas contigo, sobre twitter nunca se alcanza el final, creo que otro día postearé algunos trucos que utilizo.
    Gracias por comentar.

    ResponderEliminar
  3. No funciona con el candadito :p

    ResponderEliminar
  4. Está chulo minipunk. Llevaba unos días probando distintos widgets de twitter. Ya he probado tres. El original de twitter que aparece en http://twitter.com/goodies/widgets Lo tengo implementado en http://ccan.eu --> Es muy útil y fácil, pero no tienes demasiado control sobre la estética final. También he usado otros dos distintos en http://isadoraduncan.es (es un módulo de drupal) y en http://jornadascuratoriales.es (aquí, al final de dar muchas vueltas y probar varias opciones, metí un plugin de wordpress - lo menos hay 20). Estos dos últimos tienen la ventaja de ser más configurables estéticamente, al permitir usar CSS para el diseño, pero tienen una pega : no se puede usar un search y el timeline de un usuario al mismo tiempo, cosa que sí permite el widget original de twitter.

    Voy a testear tu código en un evento dentro de unos días, necesito precisamente que desde el mismo widget aparezcan la búsqueda de varias palabras y el timeline de un user. La cosa promete, ya que por lo que he visto tu código lo permite.

    Pero ya puestos, te voy a poner una pega: lo de meter los anchos y los colores desde javascript no me convence, porque ¿y si quiero controlar el alto de cada tweet (no el del widget entero), o ponerle un borde o controlar el padding? ¿y si quiero ponerle una imagen como background? Vamos, que yo en vez de meter a pelo la estética desde el javascript, hubiera preferido que el código metiera una clase css para cada parte.

    Y después del pero... mi enhorabuena minipunk, una gran aportación la que has hecho con el tuneo de este código. Ya te contaré que tal funciona.

    ResponderEliminar
  5. soy: aulapc.es (@aulapc_es)
    ¡Muy bueno!
    Sin embargo, no recoge los 7 (o mini_num_tweets = 'n';) tweets que ponga. Sólo recoge tweets que formen parte de una conversación...
    Me gustaria investigar porque el javascript.js no realiza el "mini_search" de todos los tweets normales... solo la coversaciones...
    Saludos eduardo

    ResponderEliminar

Deja tu comentario.
Si sólo quieres mostrar tu nombre elige (Nombre/url) y deja en blanco el campo de url.