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.

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

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

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

• Google
• Facebook
• Twitter