JMiur [E]

Si bien podemos insertar el widget de Twitter tal y como nos lo ofrece el servicio, también podemos modificarlo para ampliar un poco las posibilidades.

En mi caso, he hecho eso y he cambiado pequeñas cosas: puse los textos en español, eliminé ciertos códigos HTML innecesarios, agregué otros, coloqué clases CSS en cada etiqueta para poder personalizarlo, etc.

La primera parte no difiere de los ejemplos anteriores; creamos un elemento HTML y lo ubicamos donde queremos que aparezca en la página. Allí, escribimos lo siguiente:
<div id="twitter_div">
<ul id="twitter_update_list"></ul>
<a class="linkTwitter" href="http://twitter.com/nombreusuario">texto</a>
</div>
Donde debemos recordar que hay que cambiar nombreusuario y colocar el texto que nos guste para enlazar a la página principal.

Luego, agregaremos los scripts justo antes de </body> pero, en lugar de enlazar blogger.js, lo agregaremos manualmente en la plantilla y lo modificaremos a gusto.
<script type='text/javascript'>
//<![CDATA[
// esta es la función que lee Twitter y escribe los mensajes en el blog
function twitterCallback2(obj) {
var wwwregular = /\bwww\.\w.\w/ig;
var regular = /((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g;
var atregular = /\B@([_a-z0-9]+)/ig;
var twitters = obj;
var statusHTML = "";
var username = "";

for (var i=0; i<twitters.length; i++){
var posttext = "";
posttext = twitters[i].text.replace(wwwregular, 'http://$&');

// reemplaza los enlaces tipo  http://tinyurl.com/000000 por un texto
posttext = posttext.replace(regular, '[ <a class="linkEnlaces" href="$1" title="$1">VER enlace</a> ]');

// cuando el mensaje es una respuesta, el nombre es un enlace
posttext = posttext.replace(atregular, '@<a class="linkUsuario" href="http://twitter.com/$1">$1</a>');
username = twitters[i].user.screen_name

// se escribe el item de la lista con el mensaje y se termina indicando el tiempo transcurrido
statusHTML += ('<li>'+posttext+' <span class="linkTiempo"><a href="http://twitter.com/'+username+'/statuses/'+twitters[i].id+'" title="Ver el mensaje en Twitter">'+relative_time(twitters[i].created_at)+'</a></span></li>')
}

document.getElementById('twitter_update_list').innerHTML = statusHTML;
}

// esta función calcula el tiempo transcurrido desde la publicación del mensaje y escribe un texto
function relative_time(time_value) {
var values = time_value.split(" ");
time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
var parsed_date = Date.parse(time_value);
var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
delta = delta + (relative_to.getTimezoneOffset() * 60);
// los textos a mostrar varían de acuerdo al tiempo transcurrido
if (delta < 60) {
return 'reciencito'; // menos de un minuto
} else if(delta < 120) {
return 'hace casi un minuto'; // hace un minuto
} else if(delta < (60*60)) {
return 'hace unos ' + (parseInt(delta / 60)).toString() + ' minutos'; // menos de una hora
} else if(delta < (120*60)) {
return 'hace casi una hora'; // hace una hora
} else if(delta < (24*60*60)) {
return (parseInt(delta / 3600)).toString() + ' horas atrás'; // menos de 24 horas
} else if(delta < (48*60*60)) {
return 'ayer'; // más de 24 horas
} else {
return 'esto fue hace ' + (parseInt(delta / 86400)).toString() + ' días'; // más de 48 horas
}
}
//]]>
</script>

<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/nombreusuario.json?callback=twitterCallback2&amp;count=1"></script>

Como cada etiqueta tiene una clase, las posibilidades de personalizarlo son infinitas. Para hacerlo, agregamos el estilo CSS en la plantilla, antes de </b:skin> o justo al inicio del elemento HTML donde colocamos el código. Esta sería una de las posibilidades:
<style type="text/css">

/* este es el DIV contenedor donde se mostrará el widget */
#twitter_div {
background: transparent url(URL_imagenOptativa) no-repeat top left; /* una imagen o color de fondo */
border: 1px solid #valor; /* puede tener o no tener un borde */
color: #valor; /* es el color del texto de los mensajes */
overflow-x: hidden; /* para evitar que algunos textos se "salgan" del DIV */
}

/* es la lista con mensajes y conviene eliminar posibles márgenes */
ul#twitter_update_list {
margin: 0;
padding: 0;
}

/* cada item de la lista (los mensajes en si mismos) */
ul#twitter_update_list li {
list-style-type: none;
list-style-image: url();
margin: 0;
padding: 5px 10px; /* separarlo de los bordes del contenedor */
}

/* es el enlace al nombre de un usuario (si existe) */
a.linkUsuario {color:#valor;}
a.linkUsuario:hover {color: #valor;} /* efecto rollover  */

/* son los enlaces interiores de los mensajes con un ícono identificatorio */
a.linkEnlaces {
background: transparent url(URL_imagenIcono) no-repeat right 50%;
color: #valor;
padding-right: 12px; /* la separación depende del ancho de la imagen */
}
a.linkEnlaces:hover {color: #valor;} /* efecto rollover  */

/* es el bloque que contendrá el enlace que muestra la antigüedad del mensaje */
.linkTiempo {
display: block; /* se fuerza a que sea mostraado en una nueva línea */
text-align: right; /* y a la derecha */
}
.linkTiempo a { /* el enlace en si mismo con una imagen de fondo */
background: transparent url(URL_imagen) no-repeat scroll left 50%;
color: #valor;
padding-left: 12px; /* la separación depende del ancho de la imagen */
}
.linkTiempo a:hover {color:#valor;} /* efecto rollover  */

/* es el enlace inferior que lleva al home de nuestro Twitter */
a.linkTwitter {
color: #valor;
display: block;
line-height: 48px; /* es uan forma de darle altura y centrar el texto */
margin: 10px 0 0 0; /* separado del mensaje superior */
padding-right: 10px; /* separado del borde derecho */
text-align: right; /* alineado a la derecha */
}
a.linkTwitter:hover {color:#valor;} /* efecto rollover  */

</style>

El script tiene muchas posibilidades y con un poco de paciencia puede modificarse para contemplar otras opciones. Como lo que lee es el texto del mensaje, basta establecer una serie de condiciones para filtralos y mostrarlos de diferentes formas.

Podríamos ocultar algunos (por ejemplo las respuestas que comienzan con arroba) o si usamos TweeterFeed para enviar los posts publicados, podemos detectarlo estableciendo un texto específico antes del título.

Una función extra que podemos agregar es mostrar un mensaje por vez pero leer varios y luego, navegar por ellos de manera similar a lo que hace el widget de Flash y en todos los casos, para personalizarlo usamos CSS y lo mejor es que cada elemento HTML tenga definida una clase.

102 comentarios:

Anónimo  

Yo que quiero saber cómo hacer lo de "Otros Tweets".

:D Instrúyenos gran Twittero.

Responder
Anónimo  

Okay, okay.. ya leí bien el último párrafo. Es la emoción, es la emoción.

:$

Responder
JMiur  

Jajajajaja. Eso iba a contestarte :D

Lo que ocurre es que hace dias que ando con ese script, agregándo y probando cosas diferentes. Espero que se entienda; no es tan complicado como parece.

Responder
Unknown  

Hola Jmiur, nuevamente molestándote con lo del traductor pero es algo que me interesa mucho, como no puedo colocar códigos, te envió por correo, el código de otro traductor mas personalizado que he intentado colocar en la parte arriba a la derecha de la cabecera, a un lado de donde tengo los link del acnur, la cruz roja, y amnistía internacional para que tu me ayudes, diciéndome que tengo que colocar en la parte que encierra el código...es que me sale error, que la plantilla no esta bien formada.
Gracias JMIUR

Responder
Antony  

Hola! Muy buena tu explicación sobre Twitter...
Saludos!

Responder
Anónimo  

SuperTutorial de Javascript :@ , sigo esperando :D.

Responder
B-Pirata  

Excelente, me gustó eso de la navegación... se agradece un 100%

Salu22

Responder
Anónimo  

JMiur:

No, no es tan complicado. En realidad nada :D Funciona de manera sencilla.

Ya lo apliqué.

Ayer mismo. Bien explicadito... con tantas // imposible perderse :)

Responder
JMiur  

Lacrax: Lo leí :D
Lo que ocurre es sencillo, apenas soy un aficionado en ese tema, n otengo suficientes conocimientos como para hacer un tutorial. Soy de los que prueba, mira y busca en la red. Me gustaría saber más, no te quepa duda.

KyuBit: creo que es un buen método y no parece afectar demasiado el tiempo de carga.

Fernando: lo de las // casi fue un abuso, lo reconozco :) Me gusta la idea de poner el widget en una sola línea.

Responder
Anónimo  

Jaja , no hay problema , yo tambien , me la paso probando pero al parecer el código que pongo no es el corecto :D

Responder
Antony  

Hola!

¿Donde puedo conseguir yo las imágenes que piden en los códigos?

Saludos!

Responder
JMiur  

Puedes usar cualquier imagen. El script no requiere ninguno. El CSS que es la parte gráfica, dependerá de cada plantilla.

Responder
Anahí  

Hola, JMiur, estoy de regreso luego de un tiempito a mil con mis cosas, y estoy intentado hacer esto de twitterear, pero al querer instalar el script en la plantilla, me sale un mensaje de error que dice que :
- The reference to entity "count" must end with the ';' delimiter -
¿Qué haaagggoooo?
Gracias y Salú2.

Responder
JMiur  

Anahí:
Parece ser una transcripciòn errónea del código. Ahí lo he arreglado.

Modifica solo esta parte:
?callback=twitterCallback2&count=1
por esta:
?callback=twitterCallback2&amp;count=1

En lugar de & hay que escribir &amp;

Responder
Anahí  

Gracias JMiur, ya lo arreglé, ahora tengo que esperar tres o cuatro horas para que blogger se actualice... así que mañana le cuento... o pasado... no sé... ah (suspiro)...
Salú2

Responder
Unknown  

No puedo hacerlo. Intenté pero me da error.

Responder
JMiur  

¿Qué tipo de error?

Responder
Jose Carlos Tamayo  

Hola JMIR, yo hice algo parecido y me puse a buscar en google por demas cosas twitter, el mio pone el ultimo comentario en twitter dentro de un globo de comic, que sle de la imagen de un tauren (bicho de warcraft) , chekalo en www.taurencreate.blogspot.com, en esta otra direccion www.designbyjeeba.blogspot.com explico como hacerlo. Un saludo

Responder
JMiur  

Perfecto Jeeba, muy buena idea.

Al margen de esto, el post del sintaxis diferenciadas por lenguaje es muy interesante así que lo he marcado para leerlo con tranquilidad. Parece una solución sencilla.

Responder
Anahí  

JMiur, le quiero preguntar, porque resulta que en mi gayet no funciona el ´otros tweets´, ¿qué puede ser, dónde se configura eso?
Slaudos y gracias.

Responder
JMiur  

Anahí:
En el script este:
<script type="text/javascript"
src="http://twitter.com/statuses/user_timeline/nombreusuario.json?callback=twitterCallback2&count=1">
</script>

Deberías cambair ese valor count=1 ya que así, sólo lee un tweet. Allí, colocas la cantidad máxima que leerás, por ejemplo, digamos que sean 5, entonces, en lugar de count=1 colocas count=5.

El resto, parece estar correcto.

Responder
Anahí  

Gracias, JMiur, ya lo corregí ;-)

Responder
Tico Vago  

Hey JMiur! Ya pude poner esto en mi blog de pruebas, pero eso de "otros tweets" no lo has explicado.. es secreto de estado? :P Me gustaria tenerlo, esta muy bueno

Gracias!

Por cierto, arriba en el primer codigo donde pusiste id="twitter-link", deberia ser class="linkTwitter"

Saludos!

Responder
JMiur  

En el archivo con el script me parece que está esa parte de OTROS tweets.

Lo del error es cierto; ya lo he corregido.

Responder
Unknown  

Me funcionó todo, salvo la página de tweeteddfeed porque no sé si me falta algo para que publique mi último post... qué puede ser?

besos ronroneados

Responder
Unknown  

Pregunta resuelta :$ puse de nuevo el script y corregi la url de la imagen de blogger :) típico que un pregunta y se responde solo al releer ;)
Ahora si estoy pajareando ^_^

besos ronroneados ;)

Responder
JMiur  

Nos suele pasar a todos :D

Responder
Roberto Caamaño  

La verdad es que en el caso de mi pagina (http://lateleseguncaamano20.blogspot.com)no me funcionan las CSS. Apenas me funcionan si le cambio de color a los links, pero el resto como modificar el diseño de la caja no me funciona.

Responder
JMiur  

Es que tiene mal armada la esa aprte. Dentro de la etiqueta <b:skin> ....... </b:skin> no se colocan etiquetas <style> o </style>. Por eso, todo lo que aparece hasta cierta línea se ejecuta y todo l oque aparece para abajo yno o se saltea partes.

Responder
Anónimo  

Estoy en la primera parte, pero algo no funciona.
Trato de poner los .js justo antes de /body pero
blogger me dice que :

The reference to entity "count" must end with the ';'

Qué hice mal? Help !!

Responder
JMiur  

Revisa la ultima línea. Fíjate que diga &amp;

<script type='text/javascript'
src='http://twitter.com/statuses/user_timeline/NOMBRE.json?callback=twitterCallback2&amp;count=5' >

Responder
Anónimo  

hola JMiur! :D

acabo de probar el script que creaste para añadir el widget de Twitter en Blogger (blogspot) que, aunque ya tenía uno, gracias a tí es más personalizable y mola más :P

la question viene ahora:

¿por qué ciertas cosas me las detecta perfectamente y otras - como por ejemplo la imagen de fondo - no?

es que llevo un buen rato intentando averiguar por qué pasa esto pero nada :(

gracias por adelantado y sigue así, con este gran trabajo ;)

enlace a mi blog: http://enbuscadelbitperdido.blogspot.com/

Responder
JMiur  

Parecería que las propiedades de #twitter_div no son leidas, puede ser que esto sea porque estás colocando esto como comentario:

//////* ETIQUETAS PERSONALIZACIÓN TWITTER *//////
#twitter_div { /* imagen 48x48 */
.................

elimina el comentario o cámbialo por esto:

/* ETIQUETAS PERSONALIZACIÓN TWITTER */
#twitter_div { /* imagen 48x48 */
.................

Responder
Kaled Kelevra  

perfecto! gracias JMiur! efectivamente ese parece que era el problema :D

ahora... hay un par de cosas que no sé por qué pasan :S

la primera es que el código javascript para navegar entre los últimos "tweets" fallan tanto en Firefox 3.5 como en Opera 10 (bajo Chrome parece que funciona perfectamente) :S

la segunda es el último "tweet" que añadí; es como si duplicase el "http" :-|

muchas gracias por tu ayuda ;)

Responder
JMiur  

Sobre FF3.5 y Opera no hay nada que pueda decirte. En principio, no deebrían tener problemas porque el script no hace nada extraño ¿sale algún error que puedas identificar?

Lo de http repetido ahora no lo veo pero, prueba cambair esto:
posttext = twitters[i].text.replace(wwwregular, 'http://$&');

por esto:
posttext = twitters[i].text.replace(wwwregular, '$&');

Responder
Anónimo  

perfecto! efectivamente y, como había pensado yo también, era por eso :D

el "problema" que tengo con el script es, básicamente, que abre una nueva pestaña en blanco al hacer clic sobre "otros tweets" en FF 3.5 y Opera 10 :(

en cambio bajo Chrome funciona sin problemas :S

un saludo y gracias mil por tu ayuda nuevamente :P

Responder
JMiur  

Raro, es un enlace común ¿algo en la configuración del navegador? No sé ni donde empezar a mirar :)

Responder
Anónimo  

Ni yo tampoco :(

A vos te funciona si haces clic en mi widget? Con qué navegador?
Es que es raro que sólo funcione bien en Chrome, cuando el tuyo me funciona bien con cualquier navegador :S

muchas gracias por tu ayuda ;)

Responder
JMiur  

Ahora, noto que el enlace dice algo así:

<a href="javascript:navegaTW()" target="_blank">otros twitts perdidos</a>

Si es así, ese parámetro target="_blank" sobra y hace que el enlaces e habra en otra ventana o en ota pestaña.

Responder
Anónimo  

este es el código:

http://www.mediafire.com/download.php?yytyqyhydkz

probé eliminando ese 'target="_blank"' de ahí, pero sigue igual :(

Responder
JMiur  

El parámetro 'target="_blank"' sigue estando allí porque tienes un script en tu blog que los agrega de manera automática a todos los enlaces.

Responder
Anónimo  

Sí, eso es cierto. Pero, ¿no debería funcionar igual? ¿Por qué funciona en Chrome y en el resto de navegadores no? :S

Acabo de probar cambiando el parámetro 'target="_blank"' de esa parte de código por 'target="_self"', pero sigue haciendo exactamente lo mismo. La verdad es que me está volviendo loco, porque es algo que aparentemente debería funcionar bien, no? (si funciona en Chrome...)

Bueno, de todas formas muchas gracias. (si no te molesta te paso el código del script completo y le echas un vistazo... si no es mucha molestia :$)

Responder
JMiur  

Usar scripts que agregan este tipo de atributos de manera automática a los enlaces, es problemático y poco recomendable. Todos los enlaces, incluso los internos y aquellos que lanzan scripts de algún tipo, se abrirán en pestañas o ventanas. Eso es lo que hace ese atributo target.

Responder
Kaled Kelevra  

No, no. Los únicos enlaces que abre en una nueva pestaña o ventana son los externos; los internos los abre en la misma ventana :D

En fín... me sigue pareciendo muy raro que un navegador lo detecte perfectamente y el resto no :S

Responder
JMiur  

En este momento, ya no agrega ese atributo y no veo problemas. Seguramente se trata de establecer las condiciones del script y evitar que los agregue a los que tienen atributo javascript:void(0);

Responder
Anónimo  

y... ¿podrías decirme cómo hacer eso? :$

Responder
JMiur  

La verdad, no tengo idea. Incluso no sé si es posible interceptar todas las posibilidades que pueden generarse.

Responder
Mango  

ok no entendi nada, no lo puedo hacer en mi blog :(

Responder
Pablo Sánchez  

Hola...

Mira que hasta el momento todo bien con la instalacion del widget.
El problema es que hay un codigo en mi blog (no puedo dar con el) que me preformate los link agregandoles previamente una flecha y una linea divisoria.

puedes verlo en http://en-una-noche.blogspot.com/ y no puedo dar con la solucion....

seguire intentando

Responder
JMiur  

No veo nada de eso, Pablo.

Responder
Claudio - Poca Tinta  

Master!.. he seguido al pie de la letra esta entrada, he incluso me inmiscuí a ver como lo hizo Usted, hice un pollo para el twitter -el mio salio muy gordo-, pero en fin... sale un "scrollbar" cada vez que se hace clic. que puedo hace o en que me equivoco.

Saludos

Responder
JMiur  

Ahí parece haber un problema de espacios, como si al hacer click, el enlace requiriera más espacio. raro porque no parece tener un borde. De todas maneras, ´me parece que lo que deberías hacer es simplemente darle más altura a #twitter_div, en realidad, darle altura. Creo que si pones:
height:75px;
se resolverá.

Haciendo eso, para centrar la imagen verticalmente, en lugar de poner 95% en el background, coloca 50%

Eso sí, en el enlace a.linkTwitter deja height:65px y line-height:65px y, en todo caso, si quieres que el texto baje esos 5 pixeles extras, agrega padding-top:5px.

PD: Lamentablemente, cuando nadie veía, "me robé" el pajarito gordo ... para la colección :D

Responder
Claudio - Poca Tinta  

:D es que la pagina es -poca tinta-, no poco maíz... y ese pollo se aseguro.

:D colecciona de aves gordas, jajaja

Aun no puedo cuadrar los textos, pero desaprecio el scrollbar :)

Gracias

Responder
Claudio - Poca Tinta  

:$ apareció de nuevo el scrollbar!, :o

Responder
JMiur  

Sí, ya veo. Es que ayer no habia ningún tweet y ahora, las cosas han cambiado y hay que repensar todo.

Ese rectángulo debería tener una altura tal que permita cualquier tipo de contenido, habrá textos cortos y habrá textos largos (hasta de 140 caracteres) así que deberá tenerse en cuenta eso y esos textos se deberán posicionar de alguna manera.

Te doy una idea genérica de una posibilidad donde hay que cambiar las propiedades de dos de los elementos:

#twitter_div {
-moz-border-radius:8px;
background:#0C0C0C url(LA_IMAGEN) no-repeat 5px 90%;
color:#F43E35;
float:right;
height:125px;
margin:10px 0;
overflow-x:hidden;
width:235px;
}

con eso, coloco el pájaro gordo abajo y le doy al rectágulo una altura que creo suficiente.

a.linkTwitter {
color:#885588;
display:block;
font-size:10px;
margin:10px 0 0;
padding-right:10px;
text-align:right;
}

ahí, elimino la altura y line-height que sólo harán que ese enlace sea excesivamente alto.

Si, en todo caso, quisieras hacer una diagramación más precisa, ubicando cada elemento interno en una posición fija dentro del rectángulo, agregale position:relative al DIV #twitter_div y luego, a cada elemento, por ejemplo ese enlace inferior lo posicionas colocando position:absolute y usando left top right y bottom que indican las coordenadas de su inicio teniendo en cuenta que top: 0 y left 0 es el ángulo superior izquierdo de ese rectángulo. Haciendo eso, sin importar el largo del texto del tweet, ese enlace se mostrará siempre en un determinado lugar.

Responder
Claudio - Poca Tinta  

:D Gracias Master, de tanto burlarse del pajaro gordo llegue a pensar que era por su peso, en un mundo con estereotipos de peso ni los pájaros se salvan.

Le pondré position:relative a los elementos. Esto del Twitter es un mundo aparte, he visto cada cosa :S, me falta mucho par aprender.

Saludos!

Responder
JMiur  

Creo que es lo mejor para posicionar eso porque siempre vas a tener una parte dinámica con altura variable en los tweets. Prueba en viando un twwet de 140 caracteres y eso te va a dar la idea del espacio máximo.

Y es cierto ... ¡se ve cada cosa!!! :D

Responder
GoodOldLeon  

Yo sé que debe estar muy bien explicado... pero no entendí nada :S no hay alguna forma más sencilla de colocar este gadget? yo andaba buscando algo sencillito como el que te proporciona twitter, pero con la posibilidad de decorarlo un poco, pero esto ya es demasiado para mí :S

Responder
Gaston  

perdon.. pero sinceramente no entendi como poner el pajarito y lo demas...
donde tengo que poner la segunda parte del codigo??
es decir el elemento lo agrego como hatm.. perfecto..
despues edito la plantilla y antes del /body pego todo el script..
perfecto..
pero lo que sigue.... como lo hago?

Responder
JMiur  

Si te refieres a la parte del CSS, todo eso entre <style type="text/css"> y </style>, eso lo puedes colocar antes de </head>

Responder
Claudio - Poca Tinta  

:-|

Desapareció el linkTwitter, bueno esta allí pero no consigo mostrar el link del DIV, es que cambie de plantilla y no lo muestra, adapte la mínima 'cosas de locos' :D

Pero ahora que veo no sale el link de mi twitter! si me podrías ayudar en decirme que sucede. O el sidebar esta causando ese problema! No sé, cuando usted tenga algo de tiempos.

Responder
JMiur  

Ahí lo veo, Claudio ¿Lo solucionaste?

Responder
Claudio - Poca Tinta  

No amigo aún no sé por qué!

Pero me distraje en el formulario de blogger y el php de tus últimos post, genial...

Pero en link no veo en mi pc el 'linkTwitter' mira se lo comio el pollo gordo!!!

La verdad que no entiendo bien las plantillas de blogger, las adaptadas son mas sencillas para mi :S

Responder
JMiur  

Ya veo el error Claudio. El enlace linkTwitter debe estar fuera de la lista UL porque el contenido de esa lista la coloca el script así que al hacerlo, borra el enlace. Debería ser así:

<div id='twitter_div'>
<ul id='twitter_update_list'>
</ul>

Y AQUI EL ENLACE

</div>

Responder
Claudio - Poca Tinta  

:$
¡Gracias!, que descuido el mio.

Responder
JMiur  

Le pasa a cualquiera, Claudio. Y a mi MUCHÍSIMAS VECES :D

Responder
Anónimo  

Mi blog es http://laplataformaazul.blogspot.com y el gadget no me muestra los tweets

Responder
JMiur  

Porque etsas usando CDATA dentro de un elemento HTML y, tal como dice la entrada, el script con las funciones y la llamada debe ser agregada al final de la plantilla para evitar que un error de Twitter haga que el blog no se cargue.

Responder
Anónimo  

He quitado el los dos script del gadget HTML y los he puesto justo antes de </body> pero sigue sin funcionar

Responder
JMiur  

Está mal el código, veo que dice esto:

function var regular="/((https?|s?ftp|ssh)\:\/\/[^" twittercallback2(obj) \s\ wwwregular="/\bwww\.\w.\w/ig;

en lugar de esto, por ejemplo:

function twitterCallback2(obj) {
var wwwregular = /\bwww\.\w.\w/ig;
..............

Responder
Anónimo  

Ya he cambiado

function var regular="/((https?|s?ftp|ssh)\:\/\/[^" twittercallback2(obj) \s\ wwwregular="/\bwww\.\w.\w/ig;

por

function twitterCallback2(obj) {
var wwwregular = /\bwww\.\w.\w/ig;

y sigue igual

Responder
Anónimo  

Ya está, funciona, gracias por todo JMiur, pero al final, eliminé el script y lo volví a copiar y pegar de tu entrada, debí copiar algo mal, es lo que tendría que haber hecho desde el principio, lamento las molestias, ya está solucionado

Responder
Anónimo  

El widget funciona perfectamente, pero desde que lo puse, creo que mi blog tarda más en cargar, he estado quitando scripts que ya no uso, a veces se me olvida quitarlos de la plantilla, pero le he echado un vistazo y creo que no me he dejado ningún script, sabes porqué puede ir lento, creo que mi blog tarda mucho más que el tuyo y eso que tu también usas el widget, no creo que sea por eso, tal vez lo puse mal

Responder
JMiur  

Tal como está colocado, al final de la plantilla, no tendrá influencia en la carga del resto del sitio ya que se ejecutará justamente al final, cuando el resto del sitio este cargado.

Un script que parece estar funcioando mal o muestra un mensaje de error es algo que comienza con:
Event.observe(window, 'load', function() {
aparentemente hay una llave de cierre de más.

Responder
Anónimo  

El script es:
<script type='text/javascript'>
//<![CDATA[
Event.observe(window, 'load', function() {
$$('a[href^=#]:not([href=#])').each(function(element)
element.observe('click', function(event) {
new Effect.ScrollTo(this.hash.substr(1));
Event.stop(event);
}.bindAsEventListener(element))
})
})
//]]>
</script>
Yo no se mucho de esto, así que ¿podrías decirme que hay mal?

Responder
JMiur  

Entiendo que el error está al final, donde dice:
})
})
debería decir:
)
})

Responder
Anónimo  

Gracias JMiur, ahora va perfecto

Responder
Prof. Cristian E. Moyano  

Cuales son los enlaces de tipo http://tinyurl.com/000000 ?

Responder
JMiur  

Los que genera http://tinyurl.com/ un servicio que permite acortar direcciones URL.

Responder
Ivoc  

como pongo una imagen (la del pajaro) ahi abajo... porq no me sale nada
y la imagen del tiempo se me monta en el texto.. u.u

Responder
JMiur  

Ivoc:
Allí la veo; si quieres cambair la posición, modifica la propeidad el fondo en #twitter_div { .... }

Por ejemplo, con:
backgorund: transparent url(http://image.gxzone.com/images/3/0/303cb264646.png) no-repeat 210px 90%;
se verá más a al derecha.

Lo mismo ocurrirá con el resto de los elementos, cambia la posición de los fondos, agrega márgenes. Depende del resultado que quieras obtener.

Responder
Jordi García  

JMiur como has insertado esa imágen en el widget. Me gustaría insertar esta: http://img714.imageshack.us/img714/2174/heroy.png. En Larvatecnologica.

Gracias de antemano. :)

Responder
JMiur  

Fíjate en las definiciones de estilo que enumera el post. Entre ellas, esta:

#twitter_div {
background: transparent url(URL_imagenOptativa) no-repeat top left; /* una imagen o color de fondo */
.........
}

Es esa imagen de fondo de URL_imagenOptativa

Responder
Jordi García  

Se me queda un código así: #twitter_div {
background: transparent url(http://img714.imageshack.us/img714/2174/heroy.png) no-repeat top left; /* una imagen o color de fondo */

Esta correcta ¿no?: Pero la imagen sigue sin aparecer.

Es complicado esto la verdad.

Responder
JMiur  

Sí, eso es correcto pero no puedo decirte dónde está el error si no lo veo completo en un ejemplo concreto.

Responder
Juan Manuel Aguiar  

No se que pasó pero desde hace unos días dejó de funcionar mi widget de twitter... ¿Que pudo haber pasado si no he modificado nada en la plantilla últimamente?

Responder
JMiur  

No veo que tenga problemas, funciona perfectamente.

Responder
Unknown  

Muy interesante... hay forma de que lo que se vea en el widget sea mi timeline, es decir, lo que twittea la gente a la que sigo y mis twitts? Entiendo que se podría crear una lista incluyendo a todos los que sigo, pero me parece un poco fuerte, sin embargo no veo la opción en el widget de twitter... Help?

Responder
JMiur  

Hay un gadget de Twitter que muestra listas. También hay gadgets que muestran parcialmente el timeline.

Responder
Lautarorx  

No se que estaré haciendo mal, pero no funciona absolutamente nada del script. El Widget no muestra nada, ningún Tweet. Solo el título y nada más. Fijate en http://www.lautarorx.blogspot.com, es el primer Widget. Gracias.

Responder
JMiur  

Para empezar, te falta colocar el nombre de usuario ya que el script l ohas copaido textual y no has puesto tu nombre:
http://twitter.com/statuses/user_timeline/nombreUsuario.json?callback=twitterCallback2&count=5

Posteriormente, es posible que requiera ajustes en función de los cambios en el API de Twitter

Responder
Lautarorx  

Hola, gracias por tu consejo espero tal vez poder salir adelante con este proyecto.

Responder
exe  

la api ha cambiado a la 1.1 , ¿es posible que el script muestre el tuit original??

JMiur  

No sé a qué te refieres con el tweet original.

exe  

Bueno, ya lo había solucionado, pero hace dos días que ha dejado, parece, de funcionar el script

Responder
exe  

Pues si JMiur, el script ya no va.. alguna solución pls??

JMiur  

Twitter está cambiando su API; por el momento (no sé ahsta cuando) puedes cambiar la url del script que decía:

http://twitter.com/statuses/user_timeline/nombreusuario.json?callback=twitterCallback2&count=1

por esta otra:

https://api.twitter.com/1/statuses/user_timeline/nombreusuario.json?callback=twitterCallback2&count=1

exe  

Pues tampoco va :(

JMiur  

Verifica lo que has hecho.

Este TXT es una página de ejemplo con mi nombre de usuario. Simplemente descárgalo y cámbiale la extensión por HTML para verla en el navegador.

exe  

OK.. veo que si te va.. verifico y te cuento Gracias ;)

Responder
exe  

Solucionado ! Gracias máquina.. ahora.. no me preguntes que le pasó al script xD Abrazo :)

Responder
Anónimo  

¡El Script es fantástico! Solo tiene, actualmente, un problema. El link hacia el Tweet original incluido en "linkTiempo" no funciona correctamente, cargandose mal los 2 últimos digitos :S.

¡Gracias por tu ayuda JMiur!

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR