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: