Ticker para mostrar enlaces a entradas extraídos desde un feed | Oloblogger Un ticker propiamente dicho es el código con el que las distintas compañías que cotizan en bolsa so...

30 de noviembre de 2015

Ticker para mostrar enlaces a entradas extraídos desde un feed

Un ticker propiamente dicho es el código con el que las distintas compañías que cotizan en bolsa son identificadas con unas pocas letras de manera abreviada.

Por extensión también se conoce como ticker al panel que en un espacio reducido va mostrando las distintas cotizaciones en un formato de carrusel, esto es, mostrando todos los valores de manera secuencial, desplazando los más recientemente mostrados a los anteriores.

Este formato puede ser útil para mostrar información en nuestra web cuando queramos reducir el espacio destinado para ello.

En este caso lo usaremos para exponer dentro los títulos de las entradas más recientes del propio blog (o de otro) y que obtendremos mediante su feed.

RSS Ticker


El artilugio está hecho con JavaScript, pero a diferencia de otras ocasiones no requiere de ninguna librería adicional (no es necesario jQuery, por ejemplo).

Para otras cosas ya he publicado y explicado códigos similares, así que como este está ya preparado para sólo copiar y pegar en un gadget, explicaré lo justo.


Podéis ver una función que se llama rssticker y a la que mediante un callback le hacemos llegar la dirección de un feed. Esa función lee el contenido del feed y de él guarda en un array lo que necesitamos, el título y el enlace de las últimas entradas.

Luego esos datos se mandan a startrssticker que aunque es una función algo más larga (y recursiva), lo único que hace es el efecto de ir mostrando los caracteres de cada título uno a uno y casi lo mismo para hacer ver sólo un título cada vez. Es lo que podéis ver en el gif animado del arriba y en la demo que figura al final de esta entrada.

Este sería el código completo, aunque bien se puede incluir el JavaScript y el CSS en la plantilla y sólo el callback en el gadget. Los parámetros configurables los he marcado de otro color junto con un comentario de su utilidad y, como siempre, el CSS puede ser cambiado para adaptarlo al formato de vuestro propio sitio.

<script style='text/javascript'>
function rssticker(t){for(var a=0;a<numeroposts;a++){entradas=t.feed.entry[a],titulosposts[a]=entradas.title.$t;for(var e=0;e<entradas.link.length;e++)if("alternate"==entradas.link[e].rel){enlaceposts[a]=entradas.link[e].href;break}}startrssticker()}function startrssticker(){postactual=-1,largoactual=0,enlaces=document.getElementById("enlace"),runticker()}function runticker(){var t;0==largoactual&&(postactual++,postactual%=numeroposts,titulo=titulosposts[postactual].replace(/&quot;/g,'"'),enlace=enlaceposts[postactual],enlaces.href=enlace),enlaces.innerHTML=titulo.substring(0,largoactual),largoactual!=titulo.length?(largoactual++,t=retardocaracter):(largoactual=0,t=retardopost),setTimeout("runticker()",t)}
var numeroposts = 6; //Entradas a mostrar
var retardocaracter = 30; //Cadencia entre caracteres
var retardopost = 4000; //Cadencia entre entradas
var titulosposts = new Array();
var enlaceposts = new Array();
var entradas = "";
</script>
<div class='rssticker'>
<span class="encabezado">LO ÚLTIMO</span>
<a id='enlace'></a>
<!-- Aqui la dirección del feed -->
<script src='http://DIRECCION_BLOG/feeds/posts/default?alt=json-in-script&callback=rssticker' style='text/javascript'></script>
</div>
<style>
.rssticker{position:relative!important;width:100%;height:40px;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;margin:10px auto;color:#fff;background:#333;font-size:14px;font-family:Arial;line-height:40px;}
.encabezado{display:inline-block;margin:0 10px 0 0;padding:0 10px;line-height:40px;background:#cd2122;box-sizing:border-box;}
.rssticker a{color:#fff;text-decoration:none;}
.rssticker a:hover{text-decoration:none;color:#ccc;}
</style>

No olvidéis cambiar DIRECCION_BLOG por la dirección del blog a mostrar.

Si queréis mostrar la de otro blog distinto al propio sin problemas y si queréis mostrar sólo las entradas de una etiqueta en concreto, entonces para Blogger la dirección será del tipo http://DIRECCION_BLOG/feeds/posts/default/-/NOMBRE_ETIQUETA


Y esta es la demostración de cómo funciona. También hice un Codepen para que podáis trastear con parámetros y estilos: http://codepen.io/oloman/pen/dYBaKm


LO ÚLTIMO

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

41 comentarios :

  1. Justo andaba buscando uno similar. Me estaba rompiendo la cabeza hacerlo con la etiqueta marquee, pero era algo muy complicado porque tenía que incluir los títulos y la URL una por una. Lo probaré y te dire como quedó. Gracias desde Cali - Colombia.

    ResponderEliminar
  2. Hace rato quería algo así, pero me gustaría que fueran las entradas populares, hay alguna forma?

    ResponderEliminar
    Respuestas
    1. No Yurika. Con las entradas populares no hay forma. Al menos que yo conozca...
      El motivo es que no se encuentran en un feed y que Blogger las genera en función de las visitas (estadísticas).

      Eliminar
  3. que bueno, y se podría también hacer con los últimos comentarios?

    ResponderEliminar
    Respuestas
    1. Exactamente igual Laser. Simplemente cambia la dirección del feed de entradas por la del feed de comentarios:
      http://DIRECCION_BLOG/feeds/comments/default

      Eliminar
  4. hola, ya lo he puesto al final de las entradas, un artilugio muy útil. :) gracias

    ResponderEliminar
  5. Hola Oloman, te cuento, el martes entre a mi blog y todo parecía normal, pero hace pocas horas entre y esta todo patas arriba, literal xD. Yo que recuerde no he cambiado nada, he usado una copia de seguridad que tenía de hace un mes, pero el blog sigue patas arrriba.

    al entrar al home no aparece la parte de footer
    http://pablo-hasel.blogspot.com/

    la etiqueta discografía y entrevistas van fatal
    http://pablo-hasel.blogspot.com/search/label/Discograf%C3%ADa
    http://pablo-hasel.blogspot.com/search/label/Entrevistas

    las demás etiquetas y los post se ven muy bien, solo es el home y esas dos etiquetas.

    ¿No sabes que podría ser el problema?
    Bueno solo esa era la pregunta, y disculpa de nuevo que mi comentario no vaya referente al post.

    saludos...

    ResponderEliminar
    Respuestas
    1. Actualizacion: el blog ya ha vuelto a la normalidad!, bueno pero aún nose por que fue el problema xD, todo muy raro.

      Saludos...

      Eliminar
    2. Cuando Blogger hace cambios pasan en los blogs ciertas cosas que lo deforman, y Blogger ha hecho algunos cambios aunque no nos han avisado como hacian antes, por ejemplo ha puesto nuevo un widget de entradas destacadas, y algunos cambios en las imágenes que yo me haya dado cuenta.

      Eliminar
    3. Normalmente nunca me entero de esos cambios, también es por que nunca afectaron mi blog, hasta ahora (al parecer). Espero que el error no pase a más.

      Eliminar
    4. El problema es que no suelen avisar por anticipado, aunque a posteriori si lo hacen. A veces son realmente problemas que solucionan normalmente pronto.
      Saludos

      Eliminar
    5. ahh ya. Bueno a esperar.
      Saludos

      Eliminar
  6. Hola Oloman:

    Vuelvo a molestar. Sigo solucionando problemas de mi plantilla, lo que no me estaría saliendo en este momento es: omitir el espacio que hay entre el formulario de los comentarios de los posts, y los 3 enlaces de navegación (anteriores, inicio, recientes). Entra en cualquier posts sin comentarios y fijate, hay una diferencia enorme, como puedo solucionarlo?

    ResponderEliminar
    Respuestas
    1. Eso precisamente lo estuve viendo ayer para alguien que me contrató para unos arreglos y no pude solucionarlo. Supongo que lo que tienes son los comentarios de Google+. Si son esos, como dije, no soy capaz de quitar ese gran espacio. Lo siento.

      Eliminar
    2. No, tengo los comentarios predeterminados de Blogger, es algo con lo que sigo luchando, no hay caso. Le pediré la solución de regalo a Papa Noel jeje

      Saludos!

      Eliminar
    3. Cristian yo tenía el mismo problema, por ahora he agregado:

      #comment-editor {
      height: 260px !important;
      }

      El problema se da por que el div comments tiene un iframe que tiene height="320px"

      Eliminar
    4. Gracias crack! logré arreglar el problema!!

      Eliminar
  7. Por otro lado, el espacio entre el footer-wrapper y la sidebar también es demasiado grande y por algún motivo no veo como disminuirlo, fijate en esta entrada (http://creativo2cero.blogspot.com.ar/2015/03/mostrar-codigo-fuente-en-las-entradas-de-blogger.html), la distancia que hay entre la columna lateral y el pie del blog...

    ResponderEliminar
    Respuestas
    1. Eso es más fácil. El 535px que ves ahí es el culpable:
      #sidebar1 {
      float: left;
      width: 320px;
      margin: 4px 4px 535px 0px;
      ...

      Eliminar
  8. MUY BUEN APORTE! MIREN LO BIEN QUE SE VE EN MI WEB: WWW.INGSANTANA.TK

    ResponderEliminar
  9. Hola, muchas gracias por el ticker, aunque tengo una duda:luego de agregarlo se me desconfiguro la barra superior que tiene un margin-top:0 y no entiendo porque. Mi sitio es cyballruiz(punto)com por si podrías darle un vistazo. De nuevo gracias

    ResponderEliminar
  10. Hmmm.... no observo ningún descuadre Cyball. Descríbeme qué te ocurre exactamente.

    ResponderEliminar
    Respuestas
    1. Ya lo había solucionado con un margin-top negativo Gracias por responder!

      Eliminar
  11. Hola.Ando probando esto. Solo me funciona con Default?, pero con las etiquetas es otra historia. lo pongo tan cual lo pone en el post, pero no va. ¿Podira ver algun ejemplo?

    ResponderEliminar
    Respuestas
    1. Hola Teleri, yo creo que si intentas probar de la siguiente forma te puede funcionar. pon el enlace de la siguiente forma: http://www.TUDIRECCIÓN.com/search/label/ETIQUETA prueba, tal vez te funcione, y si no, ya lo dirá oloman.

      Eliminar
  12. lo acabo de probar en mi web y me funciona con la siguiente dirección en el src: http://www.kangutingo.com/feeds/posts/default/-/fulares?alt=json-in-script&callback=rssticker lo más seguro que te pasó es que le quitarte el signo (?) pregunta despues de la etiqueta, toma mi dirección src de ejemplo para que te guíes con la que tienes. si quieres ver cómo queda entra a http://www.kangutingo.com/2016/06/kangura-portabebes.html , la mía aparece centrada porque así tengo todo configurado en mi página, lo normal sería que aparezca a la izquierda

    ResponderEliminar
  13. Tengo otra pregunta. ¿Hay alguna posibilidad de poner varios Tikers?

    ResponderEliminar
    Respuestas
    1. claro que si teleri, pero en este caso ya no tienes que agregar el código completo solo la parte que dice // div class='rssticker' // div// lo que está dentro de ese <div debes copiarlo en un gadget html y le cambias la url por la dirección que quieres que aparezcan los resumenes. PDT: he visto tus blogs. tambien soy un fanatico del ánime. Un saludo.

      Eliminar
    2. He estado haciendo prueba y no. Si pones la segunda, en el otro sale lo dela segunda D= Lo voy a dar por imposible

      Eliminar
    3. Hola teleri, lo he visto y estás en lo cierto, lo probé en otro de mis blogs y no funciona: https://ideaskangutingo.blogspot.com si tienes uno funcionando al inicio te va, pero cuando pones el segundo se quedan en blanco los dos y no pasa nada. en definitiva no hay forma. a no ser que decidas por poner el resumen de entradas con json que tengo en la misma página en la parte de abajo. Un saludo.

      Eliminar
    4. y tal vez si haya la posibilidad de que funcionen los dos y esto es alojando el scrip .js en dropbox o google sites, entonces creas una llamada a la acción para el ticket 1 y luego otro archivo js para el ticket2. así serían 2 scrip, uno para cada ticker. cosa que no es complicada pero si de trabajo. aunque si deseas probarlo está en tus manos.

      Eliminar
    5. De momento lo dejare aparcado ahí hasta que me de la venada de volver a intentarlo. gracias por la ayuda.

      Eliminar
    6. es un placer. ahora estoy con un proyecto y es tratar de poner sobre 95 la puntuación de page speed de google. hasta ahora va funcionando, me falta comprimir unas pocas imagenes. Si quieres ver entra a page speed y pon ésta url: http://www.kangutingo.com te darás cuenta que es posible tener una web rápida y bien vista a los ojos de google. a mi por ejemplo me han aumentado significativamente las visitas en la versión móvil.

      Eliminar
    7. Creo que lo he conseguido. >.> Solo con la primera función que saca las entradas del Feed. Luego el marquee. Me funciona con mas de dos.

      Eliminar
    8. OK. Vosotros mismos... Gracias Kangutingo ;)

      Eliminar
  14. Una pregunta, se puede hacer esto pero con textos que nosotros querramos poner?

    ResponderEliminar
    Respuestas
    1. mira, algo con multiples variaciones para lo que quieres, entra en éste enlace: http://www.ayudadeblogger.com/2013/05/trucos-para-blogger-texto-en-movimiento.html

      Eliminar
    2. Kampa, como dice Kangutingo, para sólo texto puesto manualmente, hay soluciones mucho más sencillas que esta. Sólo es cuestión de buscar.

      Eliminar