JMiur [E]

Ajax Twitter es un script que utiliza Prototype + Scriptaculous para mostrar nuestros últimos tweets en el blog.

El resultado es mucho menos personalizable que el descripto anteriormente pero eso lo hace también muy simple de implementar.

Por supuesto, necesitamos tener las librerías cargadas y eso lo podemos hacer utilizando las AJAX Libraries API de Google que agregamos antes de </head>:
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load(&quot;prototype&quot;, "1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, "1.8.2&quot;);
</script>
Luego, necesitamos el script en si mismo y es muy simple, podemos descargarlo dentro de un ZIP desde el mismo sitio o bien copiar y pegar el contenido del archivo Ajax.js , debajo de lo anterior.


<script type='text/javascript'>
//<![CDATA[
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);
if (delta < 60) {
return 'hace menos de un minuto';
} else if (delta < 120) {
return 'hace un minuto';
} else if (delta < (60 * 60)) {
return 'hace ' + (parseInt(delta / 60)).toString() + ' minutos';
} else if (delta < (120 * 60)) {
return 'hace casi una hora';
} else if (delta < (24 * 60 * 60)) {
return 'hace ' + (parseInt(delta / 3600)).toString() + ' horas';
} else if (delta < (48 * 60 * 60)) {
return 'ayer';
} else {
return 'hace ' + (parseInt(delta / 86400)).toString() + ' dias';
}
}

function twitterCallback2(twitters) {
var statusHTML = "";
for (var i = 0; i < twitters.length; i++) {
statusHTML += '<li>' + twitters[i].text + '&nbsp;<small>(' + relative_time(twitters[i].created_at) + ')</small></li>';
}
$('list-twitter').innerHTML = '<ul>' + statusHTML + '</ul>';
$('spinner-twitter').hide();
$('list-twitter').slideDown({ duration: 2 });
}
//]]>
</script>
Ahora, supongamos que vamos a mostrarlo en un elemento HTML, crearemos uno y colocamos esto:
<div id="twitter">
<h6> NUESTRO TíTULO </h6>
<p id="spinner-twitter"> ... cargando ... </p>
<div id="list-twitter"></div>
</div>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/nuestroNombre.json?callback=twitterCallback2&count=5"></script>
Allí, sólo debemos cambiar el dato nuestroNombre.

Faltaría un poco de CSS para personalizarlo. Elo también lo podemos poner antes de </head>:
<style type='text/css'>
#twitter { /* el rectángulo que contendrá todo */
-moz-border-radius: 10px;
background-color: #333;
border: 2px solid #444;
color: #CCC;
font-family: Helvetica,
font-size; 13px;
height: 100%;
margin: 0 auto;
padding: 10px;
width: 250px;
}
#twitter h6 { /* el título */
color: #EEE;
font-family: Century Gothic;
font-size: 22px;
font-weight: normal;
margin: 0;
text-align: center;
}
#list-twitter ul { /* la lista con los tweets */
margin:0;
}
#list-twitter li { /* cada item de esa lista */
background-color: #444;
border-bottom: 1px solid #000;
border-top: 1px solid #000;
list-style-type: none;
margin: 5px 0;
padding: 5px;
}
#list-twitter li:first-child { /* el primer item de esa lista */
background-color: #000;
border-bottom: 1px solid #444;
border-top: 1px solid #444;
}
#list-twitter small { /* la fecha de publicación */
color: #999;
display: block;
font-family: Tahoma;
font-size: 10px;
padding: 2px 10px;
text-align: right;
}
</style>

13 comentarios:

Vku  

no se para que necesita Prototype + Scriptaculous

el unico efecto que le note fue al iniciar lo de la carga

Responder
JMiur  

Los necesita porque está pensada y codificada para esa librería en particular.

Responder
Graciela  

Queda rechulo, pero ahí tengo el pajarito volando a su imaginación :)

Responder
Graciela  

oye Jmiur has realizado algo en los coments, bajan de una manera distinta :o

Responder
JMiur  

No he hecho nada, Graciela ¿Qué ves de diferente? No lo noto.

Responder
: : SEGMENTO  

Buenas estimados. Cómo puedo modificar el tipo de letra del widget oficial de Twitter: http://twitter.com/goodies/widget_profile


Saludos.

Responder
: : SEGMENTO  

se puede justificar también la caja?

Responder
Graciela  

Pienso que quizás la energía eléctrica, haga que algunos días todo se deslice con total facilidad entonces :O o Blogger anda como :X

Pensé que habrías puesto algo para que los coments se deslizaran con algún efecto...Jmiur me estará haciendo mal levantarme tan temprano??? porque beber no, fumar espirales tampioco :D

Responder
Graciela  

o yes lo hizo nuevamente!!!

Responder
Graciela  

Me extraña araña que el sapo no tenga pestañas...no es mi cerebro, es Blogger!!! jajaja

Responder
JMiur  

SEGMENTO : Tendría que verlo puesto en tu blog para ver si es posible.

Graciela: Pués, puede ser, ahora que lo veo, hay como un deslizamiento pero no lo noto siempre.

Responder
Ilan  

Alguien sabe cómo hacer para poner dos widgets de twitter en el mismo blog de http://twitter.com/badges ??

Cuando los pongo, solo carga el primero y el segundo no..

Responder
JMiur  

Con el del Perfil no es posible, debes usar uno de Listas, por ejemplo.

Responder

¿Quiere dejar un comentario?

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

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

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