Explorando el objeto JSON.feed en Blogger
La semana pasada escribía un sencillo script para añadir a tu blog (si está alojado en Blogger -el servicio blog de Google-) el número de artículos y comentarios publicados a través de una cosa llamada JSON.
La pista me la dio Vida Blogger 2.0 en un artículo sobre un widget de producción propia, muy simple, que utilizaba estas características para añadir a nuestro blog un pequeño recuadro con estos contadores. Y tirando del hilo...
JSON, acrónimo de "JavaScript Object Notation", es un formato ligero para el intercambio de datos. JSON es un subconjunto de la notación literal de objetos de JavaScript que no requiere el uso de XML.
En JavaScript, JSON puede ser analizado trivialmente usando el procedimiento eval(), lo cual ha sido fundamental para la aceptación de JSON por parte de la comunidad de desarrolladores Ajax, debido a la ubicuidad de JavaScript en casi cualquier navegador web.
JSON se emplea habitualmente en entornos donde el tamaño del flujo de datos entre cliente y servidor es de vital importancia (de aquí su uso por Yahoo, Google, etc, que atienden a millones de usuarios) cuando la fuente de datos es explícitamente de fiar y donde no es importante el no disponer de procesamiento XSLT para manipular los datos en el cliente.
(Fuente: Wikipedia.)
En noviembre de 2006 el blog oficial de Blogger, Blogger Buzz, anunciaba la disponibilidad de JSON para la nueva versión del soporte de Google. Y si bien es una herramienta de intercambio de datos de uso extendido, no sucede así entre los blogueros para los que el código JavaScript puede llegar a ser un verdadero galimatías.
Sin embargo, aún sin conocimientos en programación se le puede sacar algo de partido al asunto, sobre todo al JSON.feed que contiene los datos de lo publicado en nuestro blog.. Lo más básico es mostrar un contador de artículos y comentarios, como ya expliqué la semana pasada, pero también puede servirnos para utilizar el nombre de nuestro blog, la lista de artículos publicados, la lista de etiquetas, la lista de autores, entre otros.
Tienes un artículo muy simple sobre estas capacidades en Coding experience sharing, en inglés.
También tienes un pequeño tutorial con dos ejemplos muy buenos en Beatiful Beta. De este último extraigo algunas notas sobre su funcionamiento.
Dentro del código de la plantilla o dentro de un widget HTML necesitas hacer una llamada al objeto JSON.feed tal que así:
<script src="http://[TU-BLOG]/feeds/[ORIGEN]/default?alt=json-in-script&callback=[FUNCIÓN]"></script>
Donde sustituirías [TU-BLOG] por el dominio, que podrá ser mi-blog.blogspot.com o www.mipropiodominio.com, lo que corresponda en cada caso. En [ORIGEN] puedes usar "posts" o "comments" para cargar uno u otro tipo de datos (artículos o comentarios). Por último en [FUNCIÓN] indicas el nombre de tu procedimiento JavaScript que manejará el objeto JSON.feed.
Lo sé, aparentemente un galimatías, ya lo dije. Un ejemplo. En este caso mi función muestra el objeto totalResults que contiene el número de artículos en el feed:
<script type="text/javascript">function mi_funcion(json) {document.write(parseInt(json.feed.openSearch$totalResults.$t,10)); }</script>
Artículos: [<script src="/feeds/posts/default?alt=json-in-script&callback=mi_funcion"></script>]
Comentarios:[<script src="/feeds/comments/default?alt=json-in-script&callback=mi_funcion"></script>]
Y el resultado:
Artículos: []
Comentarios: []
Otro ejemplo:
Últimos 5 artículos escritos en el blog:
<script type="text/javascript">function mi2_funcion(json) { document.write('<ul>'); for (var k = 0; k < 5; k++) { document.write("<li><a href='"); for (var j = 0; j < json.feed.entry[k].link.length; j++) { if (json.feed.entry[k].link[j].rel == 'alternate') { document.write(json.feed.entry[k].link[j].href); break; } }; document.write("'>" + json.feed.entry[k].title.$t + "</a></li>"); } document.write("</ul>"); }</script><script src="/feeds/posts/default?alt=json-in-script&callback=mi2_funcion"></script>
Y el resultado:
Últimos 5 artículos escritos en el blog:
El social media y los datos de carácter personal
Haz tu tarea 1.0 antes de lanzarte al 2.0
Viaje descriptivo a la palabra
III Cibercampaña 2010 contra la Pornografía Infantil
Del tiempo, los sueños y la felicidad
¿El código se muestra bastante "sucio", no es cierto? Esto se debe a que este JavaScript está insertado como código dentro del propio artículo. Sucede que en el caso de Blogger y por la configuración que yo he decidido, éste interpreta los saltos de línea en el editor y los sustituye por <br/>. Esto provoca que si incluyes saltos de línea dentro del código JavaScript aparezcan errores y no se ejecute. Una buena alternativa es incluir este código en la plantilla del blog si lo que quieres es utilizarlo para un widget propio.
Limpiando e identando quedaría así:
Últimos 5 artículos escritos en el blog:
<script type="text/javascript">
function mi2_funcion(json) {
document.write('<ul>');
for (var k = 0; k < 5; k++) {
document.write("<li><a href='");
for (var j = 0; j < json.feed.entry[k].link.length; j++) {
if (json.feed.entry[k].link[j].rel == 'alternate') {
document.write(json.feed.entry[k].link[j].href);
break;
}
};
document.write("'>" + json.feed.entry[k].title.$t);
document.write("</a></li>");
}
document.write("</ul>");
}
</script>
<script src="/feeds/posts/default?alt=json-in-script&callback=mi2_funcion"></script>
La pista me la dio Vida Blogger 2.0 en un artículo sobre un widget de producción propia, muy simple, que utilizaba estas características para añadir a nuestro blog un pequeño recuadro con estos contadores. Y tirando del hilo...
JSON, acrónimo de "JavaScript Object Notation", es un formato ligero para el intercambio de datos. JSON es un subconjunto de la notación literal de objetos de JavaScript que no requiere el uso de XML.
En JavaScript, JSON puede ser analizado trivialmente usando el procedimiento eval(), lo cual ha sido fundamental para la aceptación de JSON por parte de la comunidad de desarrolladores Ajax, debido a la ubicuidad de JavaScript en casi cualquier navegador web.
JSON se emplea habitualmente en entornos donde el tamaño del flujo de datos entre cliente y servidor es de vital importancia (de aquí su uso por Yahoo, Google, etc, que atienden a millones de usuarios) cuando la fuente de datos es explícitamente de fiar y donde no es importante el no disponer de procesamiento XSLT para manipular los datos en el cliente.
(Fuente: Wikipedia.)
En noviembre de 2006 el blog oficial de Blogger, Blogger Buzz, anunciaba la disponibilidad de JSON para la nueva versión del soporte de Google. Y si bien es una herramienta de intercambio de datos de uso extendido, no sucede así entre los blogueros para los que el código JavaScript puede llegar a ser un verdadero galimatías.
Sin embargo, aún sin conocimientos en programación se le puede sacar algo de partido al asunto, sobre todo al JSON.feed que contiene los datos de lo publicado en nuestro blog.. Lo más básico es mostrar un contador de artículos y comentarios, como ya expliqué la semana pasada, pero también puede servirnos para utilizar el nombre de nuestro blog, la lista de artículos publicados, la lista de etiquetas, la lista de autores, entre otros.
Tienes un artículo muy simple sobre estas capacidades en Coding experience sharing, en inglés.
También tienes un pequeño tutorial con dos ejemplos muy buenos en Beatiful Beta. De este último extraigo algunas notas sobre su funcionamiento.
Dentro del código de la plantilla o dentro de un widget HTML necesitas hacer una llamada al objeto JSON.feed tal que así:
<script src="http://[TU-BLOG]/feeds/[ORIGEN]/default?alt=json-in-script&callback=[FUNCIÓN]"></script>
Donde sustituirías [TU-BLOG] por el dominio, que podrá ser mi-blog.blogspot.com o www.mipropiodominio.com, lo que corresponda en cada caso. En [ORIGEN] puedes usar "posts" o "comments" para cargar uno u otro tipo de datos (artículos o comentarios). Por último en [FUNCIÓN] indicas el nombre de tu procedimiento JavaScript que manejará el objeto JSON.feed.
Lo sé, aparentemente un galimatías, ya lo dije. Un ejemplo. En este caso mi función muestra el objeto totalResults que contiene el número de artículos en el feed:
<script type="text/javascript">function mi_funcion(json) {document.write(parseInt(json.feed.openSearch$totalResults.$t,10)); }</script>
Artículos: [<script src="/feeds/posts/default?alt=json-in-script&callback=mi_funcion"></script>]
Comentarios:[<script src="/feeds/comments/default?alt=json-in-script&callback=mi_funcion"></script>]
Y el resultado:
Artículos: []
Comentarios: []
Otro ejemplo:
Últimos 5 artículos escritos en el blog:
<script type="text/javascript">function mi2_funcion(json) { document.write('<ul>'); for (var k = 0; k < 5; k++) { document.write("<li><a href='"); for (var j = 0; j < json.feed.entry[k].link.length; j++) { if (json.feed.entry[k].link[j].rel == 'alternate') { document.write(json.feed.entry[k].link[j].href); break; } }; document.write("'>" + json.feed.entry[k].title.$t + "</a></li>"); } document.write("</ul>"); }</script><script src="/feeds/posts/default?alt=json-in-script&callback=mi2_funcion"></script>
Y el resultado:
Últimos 5 artículos escritos en el blog:
El social media y los datos de carácter personal
Haz tu tarea 1.0 antes de lanzarte al 2.0
Viaje descriptivo a la palabra
III Cibercampaña 2010 contra la Pornografía Infantil
Del tiempo, los sueños y la felicidad
¿El código se muestra bastante "sucio", no es cierto? Esto se debe a que este JavaScript está insertado como código dentro del propio artículo. Sucede que en el caso de Blogger y por la configuración que yo he decidido, éste interpreta los saltos de línea en el editor y los sustituye por <br/>. Esto provoca que si incluyes saltos de línea dentro del código JavaScript aparezcan errores y no se ejecute. Una buena alternativa es incluir este código en la plantilla del blog si lo que quieres es utilizarlo para un widget propio.
Limpiando e identando quedaría así:
Últimos 5 artículos escritos en el blog:
<script type="text/javascript">
function mi2_funcion(json) {
document.write('<ul>');
for (var k = 0; k < 5; k++) {
document.write("<li><a href='");
for (var j = 0; j < json.feed.entry[k].link.length; j++) {
if (json.feed.entry[k].link[j].rel == 'alternate') {
document.write(json.feed.entry[k].link[j].href);
break;
}
};
document.write("'>" + json.feed.entry[k].title.$t);
document.write("</a></li>");
}
document.write("</ul>");
}
</script>
<script src="/feeds/posts/default?alt=json-in-script&callback=mi2_funcion"></script>
Comentarios
Publicar un comentario