JMiur [E]

Suponiendo que hemos entendido cómo funciona JSON, vamos a ver si podemos usarlo para mostrar cosas y se me ocurre que como ejemplo, bien podríamos intentar crear un script para mostrar las últimas entradas y, como esto es poco original, vamos a ver cómo es posible leer la imagen que Blogger utiliza como thumbnail y que es la misma que se muestra cuando usamos el gadget Lista de blogs.

Para esto, necesitamos tres pasos, primero, leer los datos, luego mostrarlos, por último, diseñar al forma en que queremos verlos.

El primer paso es el que está explicado de manera elemental en la entrada anterior, necesitamos cargar los feeds y ejecutar una función. La única diferencia notable con ese modelo es que en el bucle, verificaremos si hay una imagen con algo así:
if ("media$thumbnail" in entry) {
  postimg = entry.media$thumbnail.url;
} else {
  postimg = "URL_imagen_por_defecto";
}
Como el contenido de nuestras entradas es HTML, también, agregaremos una función extra para eliminar las etiquetas y dejar sólo el texto.

Coloco entonces las funciones antes de </head>.

<script type='text/javascript'>
//<![CDATA[

// esta función devolverá el texto de la entrada, eliminando las etiquetas
// la llamamos indicando la cantidad de caracteres a mostrar para crear una especie de resumen
function eliminattags(cual,longitud){
  var resumen = cual.split("<");
  for(var i=0;i<resumen.length;i++){
    if(resumen[i].indexOf(">")!=-1){
      resumen[i] = resumen[i].substring(resumen[i].indexOf(">")+1,resumen[i].length);
    }
  }
  resumen =  resumen.join("");
  resumen = resumen.substring(0,longitud-1);
  return resumen;
}

function mostrarentradasconthumb(json) {

  // defino la cantidad de entradas que mostraremos
  var numposts = 4;
  // defino la imagen por defecto que voy a utilizar
   var imagenpodefecto = "URL_imagen";
  // defino la longitud de los resúmenes
   var lenresumen = 100;

  var entry, posttitle, posturl, postimg, postcontent, salida;

  // el bucle que leerá las entradas
  for (var i = 0; i < numposts; i++) {
    // leo y guardo el dato
    entry = json.feed.entry[i];

    // este es el título de la entrada
    posttitle = entry.title.$t;

    // busco la dirección URL de la entrada
    if (i == json.feed.entry.length) { break; }
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        // esta es la dirección de la entrada
        posturl = entry.link[k].href;
        break;
      }
    }

    // busco el contenido de la entrada
    postcontent = "";
    if ("content" in entry) {
      postcontent = entry.content.$t;
    } else if ("summary" in entry) {
      postcontent = entry.summary.$t;
    }
    // este es el contenido resumido
    postcontent = eliminattags(postcontent,lenresumen);

    // busco la imagen de la entrada
    if ("media$thumbnail" in entry) {
      // hay una imagen
      postimg = entry.media$thumbnail.url;
    } else {
      // no hay imágenes asi que uso la que tengo definida
      postimg = imagenpodefecto;
    }

    /*
       ya tengo los datos, podría agregar otros pero, para mi, estos son suficientes:
       posttitle es el título
       posturl es la dirección
       postimg es la imagen
      postcontent es el resumen
    */

    // ACÁ TENDRÉ QUE MOSTRARLOS
    // EL CODIGO DE SALIDA

  }
}
//]]>
</script>

Para mostrar esos datos, tengo que pensar el diseño. Lo más sencillo es colocarlos en un DIV con una clase especial y así, separar el CSS del script. Entonces, podría, por ejemplo, hacer que se mostraran de este modo:
<div class='miresumen1'>
  <a href='URL_entrada' target='_blank'><img src='URL_imagen' /></a>
  <h6><a href='URL_entrada' target='_blank'> título e la entrada </a></h6>
  <p> el resumen de la entrada ... </p>
</div>
Así que, haré que el script escriba eso, usando las variables. Lo que debería poner en EL CODIGO DE SALIDA es esto:
salida = "<div class='miresumen1'>";
salida += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
salida += "<h6><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h6>";
salida += "<p>" + postcontent + " ... </p>";
salida += "</div>";
document.write(salida);
Ahora, llamaré a la función, agregándola en algún post, debajo de estos, en una página estática o donde quiera mostrarlo:
<script src="http://miblog.blogspot.com/feeds/posts/default?max-results=4&orderby=published&alt=json-in-script&callback=mostrarentradasconthumb"></script>
Con un poco de CSS que ponemos antes de </b:skin>, lo armamos estéticamente.

.miresumen1 {
  border-bottom: 1px solid #555;
  float: left;
  height: 190px;
  margin: 0 5px;
  padding: 5px;
  width: 135px;
}
.miresumen1:hover {
  background-image: -moz-linear-gradient(100% 100% 90deg, #555, #000);
  background-image: -webkit-gradient(linear, left bottom, left top, from(#555)), to(#000));
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF000000', EndColorStr='#FF555555');
}
.miresumen1 a {
  color: #FC0;
  display: block;
  font-size: 12px;
  text-align: center;
}
.miresumen1 img {
  height: 72px;
  width: 72px;
}
.miresumen1 h6 {
  border-bottom: 1px dotted #888;
  height: 30px;
  margin: 5px 0 0;
  padding-bottom: 2px;
}
.miresumen1 p {
  color: #CCC;
  font-size: 11px;
  line-height: 1.3em;
  margin: 5px 0 0;
}

Modificando la salida, cambiamos la forma de mostrar los datos. Otro ejemplo donde no mostramos el contenido de las entradas:
salida = "<div class='miresumen2'>";
salida += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
salida += "<h6><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h6>";
salida += "</div>";

.miresumen2 img {
  border: 5px solid transparent;
  padding: 3px;
  height: 72px;
  width: 72px;
}
.miresumen2 img:hover {
  -moz-transform: rotate(5deg);
  -o-transform: rotate(5deg);
  -webkit-transform: rotate(5deg);
  filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455);
border:5px solid #555;
}
.miresumen2 a {
  color: #FFCC00;
  display: block;
  font-size: 12px;
  font-weight: normal;
  text-align:center;
}
.miresumen2 a:hover {
  font-weight: bold;
}
.miresumen2 h6 {
  height: 30px;
  margin: 5px 0 0;
}

Y un ejemplo más donde vamos a reducir la información y aumentar la cantidad de entradas a ser mostradas:
salida = "<div class='miresumen3'>";
salida += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
salida += "<h6><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h6>";
salida += "</div>";

.miresumen3 {
  border: 1px solid #555;
  float: left;
  height: 35px;
  margin: 1px;
  padding: 5px;
  width: 190px;
}
.miresumen3 a {
  color: #DDD;
  display: block;
  font-size: 11px;
  font-weight:normal;
}
.miresumen3 img {
  float: left;
  height: 36px;
  width: 36px;
}
.miresumen3 h6 {
  float: right;
  height: 45px;
  margin: 0;
  width: 145px;
}
.miresumen3:hover {
  background-image: -moz-linear-gradient(100% 100% 90deg, #338, #33F);
  background-image: -webkit-gradient(linear, left bottom, left top, from(#338), to(#33F));
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF3333FF', EndColorStr='#FF333388');
  border: 1px solid #33F;
}

90 comentarios:

Ariane  

JMiur, encontrei este código e achei muito interessante: http://simplexdesign.blogspot.com/2009/10/how-to-show-post-like-revolution.html porém ele só funciona bem no Firefox e no Chorme, já no Internet Explore o conteudo fica fora da div 'content'. Estou quebrando a cabeça e não encontro o motivo. Conhece este código? Saberia me dizer o que impede ele de funcionar no Internet explore?
Abraços!

Responder
JMiur  

Veo el script y es similar a esto que comento en la entrada; usa JSON y luego se hace un diseño con cualquier tipo de formato.

Allí, debe haber algún error en el CSS o alguna propeidad que falte; ¿has puesto algún ejemplo que pueda mirar? Es que no puedo ver el demo de ese sitio porque dice que la cuenta está suspendida.

Responder
Ariane  

sim, estou tentando em um novo template: http://templatefeminina.blogspot.com/

No FF vai tudo bem (pelo menos aqui) mas no IE...

Responder
Unknown  

jMiur eres un maestro no hay manera más sencilla de comprender el uso de JSON. Haber si logro hacer una versión tipo filtro por etiqueta.

Responder
Bilosony2™  

Hola! Jmiur tengo una duda con este truco podria mostrar las ultimas pero de cierta etiqueta?

Responder
JMiur  

Ariane:
Perfecto, ahora si veo el problema pero me temo que no es el CSS sino el script mismo que tiene un error conceptual. No sé si has visto el código pero, dice cosas así:

document.write("<script src=\""+home_page ....... "><\/script>");

eso, lo repite para cada etiqueta y, en teoría, con eso escribe la etiqueta script que es la que se ejecuta para cargar los feeds de esa etiqueta pero, si bien, todos los navegadores la escribirán, no todos los navegadores la ejecutarán y en Internet Explorer, por ejemplo, la verás en el código fuente pero jamás se ejecutará y por eso es que ves los posts "normales" y afuera. Se muestran como si el script no existiera porque para IE no existe.

Nunca se debe escribir la etiqueta script con document.write.

No tiene solución armado de ese modo; habría que colocar todos esos scripts (uno por cada etiqueta) directamente en la plantilla, debajo del contenedor donde se mostrarán y quitar del script esas líneas.

Si no puedes, me mandas la plantilla demo por mail y me fijo a ver si es posible hacer eso que digo y si de ese modo funcionará, creo que si pero uno nunca sabe :-)

Erwin Salas:
Sino, la semana que viene habrá un script sobre el tema pero, el concepto es siempre el mismo, sól ocambia la URL de los feeds a leer; los datos siempre son iguales.

Responder
Manuel Alberto  

Genial JMiur, como siempre...!!! :D

Responder
Diego  

Buenos días JMiur, ¿Puedo preguntarle cómo lo implementó para ponerlo en las entradas relacionadas?

Un saludo :-)

Responder
JMiur  

Bilosony:
Sí. Cambiando la URL de los feeds generales por la URL del feed de la etiqueta.

Diego:
Ese es el próximo post, la semana que viene lo publicaré.

Responder
Unknown  

Guau guau explicado de maravillas, queda preciocísimo!!!:D

Responder
Matías Aravena  

Excelente truco, y para más, explicado a la perfección. Hasta un blogger principiante entiende sobre lo que hablamos y sabe qué hacer.

Saludos JMiur!

Responder
Emerald  

Qué buen trabajo, JMiur!!! voy a probar el último ejemplo, esteticamente me gusta mucho! la llamada en este caso seria igual? solo cambiaría el número 4 por el 21?
en el codigo 1º hay una línea que no se repite en los demás, la escribimos para, en mi caso el 3º ejemplo?
document.write(salida);
Gracias!!

Responder
JMiur  

Es interesante porque siempre es el mismo código y el resultado final cambia con eso que este caso he llamado salida que no es otra cosa que el HTML a escribir así que las opciones de diseño son infinitas.

Luz:
Siempre, todo termina con el document.write y l oque va variando es salida
Efectivamente, basta cambiar el número para mostrar cualquier cantidad aunque conviene que no sean muchas porque esa lectura tarda.

Responder
Felipe Calvo Cepeda  

Excelente explicación Jorge, en serio gracias por la explicación porque como mencionas a veces eso parece cosas de extraterrestes. :D

Hace un par de días te pregunté por la posibilidad de utilizar includables para destacar comentaristas y te cuento que me fue bien con eso, ya lo tengo en 'beta' en la nueva plantilla. :D

Ahora quisiera hacerte la siguiente pregunta, pues he visto que la misma función la puedo llamar cuantas veces lo requiera.
¿Si "invoco" la función digamos que unas 3 veces en la plantilla para recuperar por cada script una única entrada, afectará en mucho la carga del blog?

Responder
Diego  

¡¡¡Gracias por responder JMiur!!! Ya me quería adelantar acontecimientos jajaja.

Un saludo.

Responder
JMiur  

Felipe:
Si afecta mucho o poco dependerá de cada caso particular, de la conexión, etc. Eso es algo subjetivo. Lo cierto es que cuantos más llamadas haya, más tiempo va a tardar.

Diego:
No hay problema; en eso ando :D

Responder
Javier Robles Chocano  

Soy novato, pero más o menos he conseguido defenderme a la hora de dar forma a mi blog. Me ha gustado bastante la idea de presentar las entradas de la manera que aquí planteas, especialmente la última opción, pero no consigo visualizarlo correctamente. Algo omito o pongo donde no debo. He revisado la entrada anterior, y creo que no debo hacer nada en la plantilla, salvo lo que indicas en esta entrada. Antes de head el script, añadiendo a continuación el CODIGO DE SALIDA de la configuración que eliga, tambien debo añadir el div, y el diseño donde corresponda, pero la llamada a la función... ¿dónde y cómo va exactamente?....

Responder
Domin-Omega  

Suponiendo que quisiera generar algo parecido a esto de manera automática en una pagina estatica del blog, donde se listen todas las entradas que hay publicadas, ¿como deberia hacer la consulta?
Especificamente mi problema es con el parametro max-results... tengo entendido que su valor maximo es 100 y que por defecto es 25. ¿Hay alguna manera de consultar todas las entradas... aunque fuesen más de 100?

Responder
JMiur  

Javier Robles Chocano:

Tal como está planteado en esta serie, no hay modificaciones a la plantilla, en todo caso, es un agregado extra. El CSS va entre etiquetas style, el script entre etiquetas script y ambos se colocan como en cualquier otro caso, antes de </head> pero ahí, ten en cuenta que el script básico es el de la entrada anterior y acá se habla de variantes.

Hecho eso, falta llamar a la función y leer los feeds:
<script src="http://miblog.blogspot.com/feeds/posts/default?..........></script>

Eso, se colcoa allí donde quieras que se vea elresultado; por ejemplo, lo más simple apra probar es ponerlo dentro de una entrada; sino, puede estar en un widget HTML o directamente en la plantilla.

Domin-Omega:
La cantidad de entradas a leer siempre esta limitada y su valor máximo es 500; esa es una limitación de los feeds en si mismos. Si quieres leer más, debes leer dos veces; para eso, hay un parámetro extra:

Esto lee los últimos 500:
?start-index=1&max-results=500
esto desde el 501 al 1000:
?start-index=501&max-results=1000

De ninguna manera es recomendable hacer eso ya que procesos de semejante envergadura serán extremadamente largos y los navegadores mostrarán un cartel de advertencia indicando que un script de la página está tardando demasiado y le soliciataran al visitante, autorización para continuar o cancelar.

Responder
Domin-Omega  

Oh, gracias. Sí de hecho sólo era una hipótesis... yo había leído que el tamaño máximo de la consulta era 100, pero dfinitivamente era información errónea o desactualizada, porque haciendo una prueba pude leer hasta 500 post de un sólo golpe (como me aclararias luego en tu respuesta). Claro que es algo extremo, tardó cerca de un segundo o dos en cargar, lo que para un archivo local .html con sólo eso por contenido me pareció demasiado. Sólo era una duda, algo didáctico, pero sí me agrada saber que es posible leer más allá del quicuacentésimo post (¿si se escribirá así?). Creí que despues de un tiempo (mucho publicar), las entradas se volvían inaccesibles.

Responder
Javier Robles Chocano  

Gracias por contestar. Algo no entiendo, disculpa que a lo mejor no hable con la propiedad que debiera. Voy a intentar explicar lo que hago (entiendo). Coloco antes de head el script que aquí indicas, añadiendo dentro de éste dónde escribes EL CODIGO SALIDA, aquel que me interesa.. miresumen3, lo copio y pego tal cual salida=" añado el css correspondiente a miresumen3. Por último, añado un elemento html y pego allí la llamada a la función <script src="http://miblog.blogspot.com/feeds.....
Hecho lo anterior, no sale nada, he probado a poner el codigo de salida en el elemento html a continuación de la llamada a la función... y me sale la caja con bordes, pero sin contenido y se leen las palabras salida=.... y comillas y demás...
Quizás te llame la atención mi torpeza, pero no sé que debo hacer.

Responder
JMiur  

Javier:
Lo primero que relatas es lo correcto ¿Tienes el ejemplo para que pueda verlo online?

Responder
Javier Robles Chocano  

El blog en cuestión sobre el que estoy intentando que funcione es http://condevito.blogspot.com

¿es lo que necesitas?
Supongo que puede ocurrir que se pelee con algún otro script, pero seguro que tú lo verás a la primera.

Responder
JMiur  

Fíjate que en el script dice:

for(var i=0;i<resumen.length;i++){>

Ese carácter > está de más, quítalo para que diga esto y seguimos viendo:

for(var i=0;i<resumen.length;i++){

Responder
Javier Robles Chocano  

Ya lo he quitado, y ni idea de cómo ha llegado hasta allí, pues copio y pego directamente desde aquí.

Responder
JMiur  

Ahí vamos mejor, aunque n olo parezca, ya no hay erroress visibles :-)

Fíjate que el script que has colocado, termina así:

salida += "</div>";


pero te falta una línea más, debajo de eso, escribe esto:

document.write(salida);

Un detalle más, en el script dice:
var imagenpodefecto = "URL_imagen";
recuerda que donde dice URL_imagen debes poner al dirección de la imagen que vas a usar por defecto.

Responder
Javier Robles Chocano  

Que grande eres!! menudo crack. Muchas gracias por tu ayuda y atención desinteresada. Funciona perfectamente!!! Muchas gracias de nuevo.

Responder
JMiur  

Me alegra que se arreglara :-)

Responder
Javier Robles Chocano  

JMiur, me emocioné demasiado pronto. No sé si quizás me podrás ayudar (aunque a lo mejor es abusar de ti, así que si me dices que no, no te preocupes, seguirás siendo un crack... ) Con tus indicaciones se arregló, pero el menú desplegable que tengo no me funciona,se que los scripts a veces se entorpecen... ¿tu sabrías decirme si es el caso?. Gracias de antemano. (te recuerdo el blog http://condevito.blogspot.com)

Responder
JMiur  

Lo que muestra el navegador es un error en el el script s3Slider.js

Por lo que veo, se trata de ejecutar algo que no existe ya que no hay un div llamado slider así que el problema puede estar allí. Me parece que deberías quitar esta función o agregar el slider:

$(document).ready(function() {
$('#slider').s3Slider({
timeOut: 5000
});
});

Responder
Javier Robles Chocano  

Efectivamente es como dices. Ese script ("sin ejecutar") era el causante del problema. No sé que haríamos los que son como yo sin gente como tú. De veras. Muchas gracias de nuevo. Grande JMiur.

Responder
JMiur  

Me alegra que se arreglara el problema, Javier :D

Responder
Unknown  

Hola JMiur

Mi pregunta es si se puede mostrar mejor la imagen, se muestra muy mal cuando el tamaño es mas grande , hay alguna manera que se pueda mostrar mejor el tamaño de las imagen-es, el blog que estoy creando el tamaño es de la imagen por defecto todas es de una altura 129px por un tamaño de ancho 87px.

Se puede arreglar para que se muestren mejor la imagen. Me gustaría que se vieran igual que el tamaño de la imagen que por defecto uso que sera 87px 129pxy gracias por estas tutorías una forma muy practica y fácil de aprender.

Un saludo

Responder
JMiur  

La miniatura es generada por Blogger así que si se usa este metodo, no. Caso contario, debe leerse el contenido del feedd, buscar las imágenes que haya en él, seleccionar cuál usar, definir su tamaño, etc. todo es posible pero, no creo que tenga demasiado sentido porque sería muy engorroso.

Si la imagen a ser mostrada en los feeds se la considera muy importante, es mejor que las entradas ya tengan una imagen que se adapte; por ejemplo, una miniatura que puede ocultarse en las entradas con CSS ya que los feeds no leen CSS.

Responder
Bilosony2™  

Hola!
Jmiur! te cuento que por mas que intento no logro hacer andar este truco en mi blog. Te podrias fijar a ver que es?


Saludos!!

Responder
JMiur  

En tu blog veo el script pero no veo que se llame a la funcion en ninguna parte.

Responder
Bilosony2™  

A! listo fue un error mio jeje. Ya lo solucione, Gracias! :D


Suerte!

Responder
Jaime Trujillo Escobedo  

Funciona de maravilla, maestro. ¿Sabes si podría especificar el número de caracteres a mostrar en el título de las entradas?

Traté de hacerlo basándome en la configuración utilizada para especificar la cantidad de posts a presentar pero sigo sin conseguirlo.

Responder
JMiur  

Sí, se puede hacer. Fiajte que la longitud de los resúmenes, se establece de este modo:

postcontent = eliminattags(postcontent,lenresumen);

Así que, en lugar de esto:

// este es el título de la entrada
posttitle = entry.title.$t;

puedes poner esto:

// este es el título de la entrada
posttitle = eliminattags(entry.title.$t,20);;

Con cualquier valor, ahí puse 20 como ejemplo.

Responder
Jaime Trujillo Escobedo  

Una vez más me dejas sin palabras.
Quedó perfecto.

Sólo me queda solucionar la aparición de imagen por defecto (actualmente utilizo un fondo de imagen en su recuadro). En Firefox no hay problema pues el fondo actúa como miniatura pero en IE o en Chrome se muestra como error.

Nuevamente, mil gracias.

Responder
JMiur  

¿Tienes un ejemplo que peuda verse online?

Responder
Jaime Trujillo Escobedo  

Claro JMiur, lo instalé en el propio Balcón. Te dejo una captura realizada al usar IE (en Chrome aparece algo similar)...

http://i51.tinypic.com/28bvhww.png

Ojalá pudiese ocultar la miniatura por defecto y hacer que sólo aparezca el fondo utilizado para las imágenes (que podrá verse en las entradas sin foto).

Gracias una vez más.

Responder
JMiur  

No es que en IE y Chrome se produzca un error sino que en esos navegadores, cuando no e encuentra la imagen, se muestra ese símbolo.

En tu script, no defines la imagen por defecto:
var imagenpodefecto = "URL_imagen";
porque colocas esa imagen por defecto como fondo pero, si no hay iamgen, igual creas una etiqueta IMG:
salida += "<a title='Leer entrada...' href='" + posturl + "'><img src='" + postimg + "' /></a>";
así que debes decidir si vas a usar un fondo o una etiqueta IMG para mostrar esas miniaturas.

Responder
Jaime Trujillo Escobedo  

¡Solucionado! Al instalarlo introduje la URL de la imagen por defecto pero en lugar de la miniatura se mostraba el marco vacío (por ello que decidí utilizar el fondo). Ya he retirado dicha propiedad del CSS. En mi caso se solucionó por una 'tonteria' (añadiendo un salto de línea al else {...).

Y las miniaturas aparecen sin problema.
Gracias maestro.

Responder
JMiur  

Es tal cual. Estabas poniendo dos imágenes y se solucionaba poniendo solo una de ellas; cualquiera es indistinto. Si funciona está perfecto :D

Responder
christian neyra  

ola JMiur, e intentado poner los pasos por pasos en mi blog este ruco que queda muy bien en especial el último que muestra donde dices tú :

Y un ejemplo más donde vamos a reducir la información y aumentar la cantidad de entradas a ser mostradas:

Me gusto mucho pero no sé como ponerlo en mi blog, podrías ayudarme y darme todo el codigo, paso a paso como ponerlo ya que creó que de pequeño me caí de la cama y no logro entender nada :) por favor donde pongo los codigos todo necesito aprender gracias.

Responder
JMiur  

Los códigos son los que están en el post y el archivo con el script se puede descargar. No puedo agregar mucho más al respecto más que repetir lo que dice la entrada.

Responder
SEGArcadia  

Para mostrar también las fechas de las entradas, he probado a añadir una variable (postfecha = entry.published.$t;) y luego añadirla a la salida, pero me sale un formato de fecha "extraño", en milisegundos :(
¿Como podría reconvertir el formato de fecha a dd/mm/yy?

Responder
JMiur  

El formato de la fecha devuelto por el feed es algo así:

"2011-06-23T12:27:00.000+01:00"

Lo que peudes hacer, es mostrar sólo los 10 primero caracteres:

"2011-06-23"

var postfecha = entry.published.$t.substring(0,10);

Responder
SEGArcadia  

Sin duda, la forma más fácil... ;)
Muchísimas gracias, JMiur.

Responder
JMiur  

Si funcionó, genial :D

Responder
pvillegasy  

Hola Jmiur, exactamente lo que estaba buscando...muy buen truco, lo probé en mi blog de pruebas y funciona pero aunque modifico
var numposts = 8;
var lenresumen = 200; no me muestra mas de cuatro post relacionados y no se agranda el resumen...

que puedo hacer?

Responder
JMiur  

Tendria que ver tu ejemplo; si es un blog de pruebas, es posible que no haya más entradas que mostrar.

Responder
pvillegasy  

Hola jmiur, lo coloque en mi blog de agua y sig, que tengo mas entradas y me siguen apareciendo 4... y en el escript indiqué que me mostrara 6..

muchas gracias

Responder
JMiur  

Tanbién debes cambiar el numero en el script que ahora dice:
<script src="http://aguaysig.blogspot.com/feeds/posts/default?max-results=4&orderby=published&alt=json-in-script&callback=mostrarentradasconthumb"></script>
en lugar de poner max-results=4, poner max-results=10 o el valor que quieras.

Responder
VacilandoUnRap  

lo que no entiendo es donde tengo que poner el codigo que aparece justamente debajo del texto "Y un ejemplo más donde vamos a reducir la información y aumentar la cantidad de entradas a ser mostradas:"


saludos

Responder
JMiur  

Si despliegas el código del script, allí al fina dice:

// ACÁ TENDRÉ QUE MOSTRARLOS
// EL CODIGO DE SALIDA

que es donde se coloca eso que uno quiere mostrar.

Responder
Unknown  

Hola Jmiur, excelente post, gracias y felicitaciones. Yo lo implementé sin mayor problema, pero no sé por qué se muestra vertical en mi blog, no sé si podrías ayudarme.
mi página es http://cienciasaludxxi.blogspot.com (apenas empiezo a hacerla, así que es un pequeño desastre estético, pero gracias de antemano si me puedes orientar).
Saludos.

JMiur  

Eso ocurre proque no tienes definidads reglas de estilo para cada DIV sino solo para su contenido; por ejemplo, en tu caso,, puede empezarse con:

.miresumen2 {float: left;}

Responder
Unknown  

Bueno, estoy verdaderamente agradecida, en efecto enseguida se solucionó mi problema. Sin querer volverme cargosa, te preguntaría si de modo general puedo definir las reglas de estilo para los div y evitar que me suceda lo mismo con otros gadgets (no sé si tengas entradas acerca de eso, he estado recorriendo tu blog hoy y es bastante didáctico todo).
Gracias!

JMiur  

No. No hay que hacer tal cosa. Establecer reglas genéricas para ese tipo de etiquetas sólo causaría problemas gigantescos ya que cada uno de ellos es distinto y si es necesario, deben ser personalizados uno por uno.

Responder
Unknown  

ok, gracias de nuevo!

Responder
Otakustv  

hola tengo una duda y como podria ser que supongo tengo el parrafo 1 y 2 y solo quiero que lea el parrafo 2 o no se puede

JMiur  

Posible es; el problema es hacerlo de ese modo para lo cual, debes identificar de alguna manera ese párrafo y modificar el script de alguna manera.

Otakustv  

y no tendras una entradas donde realices esta funcion

JMiur  

No; es algo demasiado específico y es probable que tenga muchas variantes dependiendo de la forma en que se escriben las entradas en si misma.

Otakustv  

gracias por responder me imagino que si lo identifico con un div especifico funcionaria creo que tendre que buscar algunos guias en español para poder hacerlo

JMiur  

Alguna identificación deberán tener y luego determianr el inicio y el final. No es sencillo y es algo que tiene muchas variantes.

Responder
Felipe  

Una preguntilla que espero que sea simple. ¿Cómo puedo hacer para aplicar esto mismo a un feed de Feedburner? No conozco la forma de que Feedburner devuelva un archivo json directamente, y el truco de "http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&output=json&q=http://feeds.feedburner.com/nombredelfeed&callback=mostrarentradasconthumb" tampoco parece funcionar...

JMiur  

No se si eso es tan sencillo de hacer con JavaScrip. Debrías recurrir a alguna libreria como la de esta entrada o esta otra

Felipe  

Ya había visto la entrada, pero como ya uso scriptaculous no quería meter también jQuery. Al final parece que no habrá más remedio, porque no sé cómo acceder a feedburner con json y no soy capaz de encontrar otra forma de hacerlo. En fin, probaré con jQuery. ¡Gracias siempre por tu ayuda!

JMiur  

Que yo sepa. Feedburne no posee un formato json así que debes tratar de leer el ormato XML que con JavaScript no es algo sencillo de hacer:
http://feeds.feedburner.com/Vagabundia?format=xml

Felipe  

Creo que eso supera con creces mi habilidad, así que se lo dejo a los profesionales. De todas formas ya he puesto a andar la versión jQuery y va muy bien. De momento me doy por satisfecho :)

Felipe  

Pues he estado enredando con el tema y todo se puede hacer... o casi todo.
Se puede leer feedburner mediante json usando http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=5&output=json&q=url, y funciona bien. El problema se da con los thumbnails, ya que esta forma elimina las etiquetas y . La única forma que he encontrado es "esconder" la url del thumbnail al principio de la descripción, y sacarla luego con javascript. Es lioso y hay que enredar mucho con el feed, pero al final funciona y se puede mostrar title+date+thumbnail+content.
Dejo este comentario aquí por si le sirve de pista a alguien que se encuentre con estos problemillas en el futuro :)

Responder
tomat  

Hola, JMiur. Estaba pensando en usar esto de JSON para insertar unos datos en un blog y presentarlos, pero querría que se pudieran actualizar dinámicamente sin tener que recargar toda la página, de modo que se actualizaran solo los datos pero se mantuvieran otras cosas o preferencias de presentación ya elegidas por el usuario, y no veo cómo hacerlo. Los datos están en una hoja de google docs y los obtengo con json-in-script y va bien si se haca al cargar la página con script src=..., pero una vez cargada no sé cómo llamar a un script que haga la recarga. ¿se te ocurre alguna forma?

JMiur  

Tal vez, usando el método setInterval() para leer el feed cada cierto tiempo pero, de todos modos, no me parece una buena idea porque eso hará que la página sea lenta.

tomat  

Muchas gracias por tu respuesta. No se trata tanto de automatizar el refresco sino de cómo hacerlo, aunque sea manual, precisamente para evitar la lentitud al recargar todo. Lo que no sé cómo hacer es llamar de nuevo al script que lee los datos, ni desde un botón ni desde una función con SetInterval, porque no es una función, sino un script completo que lleva la información en src.
He intentado volver a escribir el script con document.write pero eso tampoco vale. ¿Alguna idea?

JMiur  

No, document.write() no sirve para eso. Los scripts no se "recargan", deben ser eliminados y vueltos a cargar tal como muestra estas dos entradas 1 | 2

La solución la debes buscar por ese lado.

tomat  

Mil gracias JM. Eso era justo lo que quería. Eres un crack.

Responder
Adolfo Fernandez Penayo  

Hola Jmiur: Una pregunta ingenua, veo que ordenas los posts por orden de fecha de publicacion, es posible Ordenar los Posts de forma Alfabetica?

JMiur  

Tal vez podría hacerse pero sería muy engorroso.

Adolfo Fernandez Penayo  

Jorge, Crei que solo habria que cambiar "orderby=published" por algun otro comando, es mas complejo de lo que parece entonces?.

JMiur  

Los feeds sñolo se envian en orden cronológico.

Adolfo Fernandez Penayo  

Gracias por la aclaracion Jorge. Un abrazo desde la distancia.

Adolfo Fernandez Penayo  

Hola Jorge. Queria hacerte Una consulta. Esta manera de mostrar las entradas me ha sido muy muy util. Por lo que he podido estructurar varios blogs que tengo. Pero hoy queriendo volver a utilizar el mismo codigo, no se porque no cargan los codigos en este post: http://www.cochesalgeciras.com/2009/03/hola.html

JMiur  

Porque no está colocado el nombre de la función, dice:
function (json)
en lugar de:
function mostrarentradasconthumb(json)

Responder
Anónimo  

Hola Jmiur,

Como seria para imprimir el autor.

Intente esto pero no me sale
var usuario = entry.author.$t;

segun la API de google

para el autor tendriamos que usar displayName pero por más que intento no me sale

saludos

JMiur  

El autor es un array y el nombre se lee así:

var autor = entry.author[0].name.$t

Responder
Adolfo Fernandez Penayo  

Hola Jorge. Una Consulta!
He conseguido colocar las entradas de una etiqueta en un Post, te dejo un enlace a modo de ejemplo: http://www.musicadelparaguay.com/1999/01/Letras.html
Osea cada ves que publico la letra de una cancion, esta ira a parar en ese listado, pero a la ves, pongo un enlace a ese listado. Porque mi idea es intentar posicionar mejor ese pòst.
Pregunto: Es un error Ponerle metas (descrpcion y keywords) e intentar posicionar este post?.
Mi pregunta viene a raiz de que "creo" que este post es casi lo mismo que las paginas de etiquetas, y como google bloquea dichas paginas, es posible q tambien me bloquee este post?.

JMiur  

Saber cómo piensan los buscadores es una tarea imposible. No creo que ni ellos mismos lo sepan con seguridad.

Desde el sentido común, no veo por qué debería mejorar algo porque una acumulación de enlaces internos es intrascendente ya que repetir muchas veces algo no lo hace mejor o peor.

Por otro lado, a Google no le gustan las páginas con muchos enlaces y al ser dinánica (su contenido cambia) es difícil que sea indexada cada vez que se actualiza y además, seguramente estás usando javascript para generarla y los motores de búsqueda, no leen cosas generadas con javascript. Para ellos, es probable que ese post carezca de contenido.

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