JMiur [E]

¿Un poco más sobre JSON? Es una pregunta retórica porque acá vamos con un poco más sobre JSON. En realidad, no sólo porque es una forma bastante cómoda de leer contenidos de la web sino porque en Blogger es uno de los pocos métodos que podemos implementar a la hora de acceder a ciertos datos.

No todas las webs poseen esa posibilidad pero, por lo general, los servicios más importantes permiten que usemos este sistema. Uno de ellos es Twitter y eso, lo hacemos accediendo a su API que es la misma que utilizan todos los widgets.

Cuando accedemos a la URL de ese API, lo que nos devuelve es una serie de datos ¿Qué datos? Una forma fácil de verlos es utilizar una de las heramientas de Json Format; allí en el cuadro Load JSON Data from URL podemos colocar la dirección que queremos verificar y al hacer click en Process, nos mostrará el resultado es decir, los datos a los que podemos acceder.

En este caso, pondremos esta URL:

http://api.twitter.com/1/users/show.json?screen_name=nombreusuario

donde reemplazaremos nombreusuario por el nombre de nuestra cuenta en Twitter así que, en mi caso, en el cuadro Formatted JSON Data se mostrará algo así:
{ "contributors_enabled" : false,
  "created_at" : "Wed Sep 10 05:57:39 +0000 2008",
  "description" : "Lo bueno de Twitter es que sirve para hablar solo ... y que no te tomen por loco ...",
  "favourites_count" : 14,
  "follow_request_sent" : false,
  "followers_count" : 1213,
  .......
  "name" : "vagabundia",
  "notifications" : false,
  .......
  "profile_image_url" : "http://a0.twimg.com/profile_images/59754928/Avatar90x90_normal.png",
  .......
  "screen_name" : "vagabundia",
  "show_all_inline_media" : false,
  "status" : { "contributors" : null,
    "coordinates" : null,
    "created_at" : "Wed Nov 03 03:00:12 +0000 2010",
    .......
    "text" : "BLOGGER:  tubePlayer: Nueva versión del reproductor http://goo.gl/fb/4FEeL",
    "truncated" : false
  },
  "statuses_count" : 3097,
  .......
  "url" : "http://vagabundia.blogspot.com/",
  "utc_offset" : -10800,
  "verified" : false
}
¿Muy raro? En realidad, no tanto si es que hemos entendido cómo funciona este coso. La primera palabra de cada línea es el nombre del dato y lo que está después de los dos puntos, es el dato en si mismo así que, "screen_name" : "vagabundia" significa que el nombre de mi cuenta está guardado en un dato llamado screen_name así que, podría llerlo con JavaScript; ese ytodos lod demás.

Vamos a verlo paso a paso; necesito llamar a ese API desde el blog así que pongo algo así antes de </body>, al final de mi plantilla para que se ejecute sin molestar al resto:
<script src="http://api.twitter.com/1/users/show.json?screen_name=nombreusuario&amp;alt=json-in-script&amp;callback=leerTwitter"></script>
Como en los ejemplos anteriores, coloco en callback, el nombre de la función que voy a utilizar para interpretar o manipular los datos leidos así que, antes de </head> (o antes de ese script), colocaré mi función:
<script type='text/javascript'>
//<![CDATA[
function leerTwitter(json) {
  // aquí es donde leeré los datos y haré algo con ellos
}
//]]>
</script>
¿Cómo sé cuáles son los datos? Es lo que nos mostró la herramienta así que, en esa función, la variable json contiene todo eso y accedemos a cada uno de ellos de este modo:

json.description contendrá la descripción de la cuenta
json.followers_count la cantidad de seguidores
json.screen_name es el nombre de lacuenta
json.statuses_count la cantidad de tweets enviados

Esos son faciles pero hay otros que tienen "subdatos", para leer esos, basta agregar un punto y seguir leyendo a sí que:

json.status.text contendrá el texto del último tweet que hayamos enviado

Sabiendo esto, entonces, puedo llenar al función para hacer algo y mostrar esos datos; por ejemplo:
<script type='text/javascript'>
//<![CDATA[
function leerTwitter(json) {
  var salida ="";
  salida += "<h5><img src='" + json.profile_image_url + "' />" + json.screen_name + "</h5>";
  salida += "<small>" + json.description + "</small><p>" + json.status.text + "</p>";
  document.getElementById("mitwitter").innerHTML = salida;
}
//]]>
</script>

o esta otra que mostrará la cantidad de seguidores:
<script type='text/javascript'>
//<![CDATA[
function leerTwitter(json) {
  var salida ="";
  salida += json.followers_count + "<small>seguidores</small>";
  document.getElementById("misseguidores").innerHTML = salida;
}
//]]>
</script>

En ambos casos, lo que necesitamos es un DIV o etiqueta con un ID así que alli donde querramos mostrarlo, pondremos:
<div id="mitwitter"></div>
o bien:
<div id="misseguidores"></div>
En resumen, el orden es siempre el mismo; primero la función, luego el DIV con el ID exclusivo donde se mostrarán los datos y por último, el script que carga el API.

19 comentarios:

Felipe  

Excelente entrada Jorge, muy bien explicado. :)
Un pequeño aporte, en la URL empleada para llamar el archivo en JSON hay que escribir el nombre de usuario "estricto" teniendo en cuenta mayúsculas, minúsculas y otros caracteres para que se cargue bien el archivo.

Responder
JMiur  

Buena acotación :-D

Responder
Graciela  

Decirte que cada vez que hablás de Json me suena a shampoo jajaja...ya me parecía que el pajarito sirve para hablar solo :D

Responder
Adrián J. Messina  

¡Fascinante! ¡Otra genialidad, original!
¡Manos a la obra!

Responder
JMiur  

Seguiremos con el shampoo a ver hasta donde se llega :-)

Responder
DarkRamses  

habra alguna forma de mostrar en mi sitio web solo las menciones que me han hecho?

Responder
JMiur  

Imagino que si pero, lo deconozco.

Responder
Adrián J. Messina  

Estimado, consulta. ¿Es posible utilizar JSON para mostrar lo que publicamos en Google +?

Gracias como siempre y un abrazo.

Responder
JMiur  

No tengo idea, Adrian.

Responder
Adrián J. Messina  

Gracias igual!

Responder
Adrián J. Messina  

Perdone mi falta de respeto, estimado procer, por animarme a corregirlo.

Estimo que falta el cierre de la llave en ambos scripts: " }"

Disculpe, ya mismo me retiro...

Responder
JMiur  

Eso pasa porque estaban de vacaciones, Adrián. Ya volvieron y ahi están :-$

Esperemos que no se fuguen otra vez :D

Adrián J. Messina  

Jaja, bienvenidas!

Responder
Victor Callegari Portal  

ERES GRANDEEEEEEEEEE HERMANO ! ... ESTOS SON LOS TIPOS DE MANUALES QUE DEBEN EXISTIR, CLARO , DIRECTO, SIN ESCRIBIR MUCHA MIERDA, SOLO LO JUSTO Y NECESARIO. GREATTTTTTTT !

Responder
Nely  

Hola JMiur. En mi blog tengo desde hace mucho el gadget que Rosa y tú han explicado para mostrar los tweets en el blog, no puedo consultarte en esa entrada porque no permite comentarios http://vagabundia.blogspot.com/2008/09/twitter-en-blogger-insertar-un-widget.html. Desde hace varios días que no funciona, he probado con los gadgets que ofrece Blogger pero tampoco funcionan. No he cambiado nada en la plantilla recientemente, y en Twitter ofrecen un widget que no sé cómo personalizar, con fondo e imágenes. ¿Sabes si ese gadget que yo tengo ya no servirá? Y si no servirá más, ¿puedes decirme si esto de esta entrada es parecido al otro gadget? O algún otro que sea parecido si conoces. Disculpa pero no comprendo si este gadget muestra mis tweets en el blog y cómo le hago.
Agradecida por tu atención.

Responder
Nely  

Mira, leyendo una respuesta que has dado en http://vagabundia.blogspot.com/2008/09/twitter-en-blogger-personalizar-el.html#comment-6525961432581077443 me ha servido cambiar la dirección y dejar el gadget como estaba. Quién sabe cuánto servirá pero hasta 10 tweets muestra.
Gracias, tal vez vuelva a consultarte si falla.

JMiur  

Pues sí, Nelly, parece un problema común en estos días. Tendré que ponerme a escribir algo al respecto porque muchos preguntan lo mismo :D

Sigo sin saber si la solución es definitiva pero, por ahora, anda :D

Responder
AnvarStudios - Soluciones de Cloud Computing  

Gracias, me acklaro mucho, tengo una pregunta.

Si me dicen usar API JSON para crear un script en PHP uso esta directrices, ejemplo WHMCS.
http://docs.whmcs.com/API:JSON_Sample_Code
http://docs.whmcs.com/API

JMiur  

No sé qué quieres hacer. Desconozco de qué se trata ese API.

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