---
title: "Scroller de noticias o News Scroller a través de un feed"
description: "Ya en Valencia...Este post he querido escribirlo desde hace bastante tiempo aquí, en KnowHow pero acabo no haciéndolo por pereza u olvido. Ahora ya toca, ya que un amiguete lo necesita. Pues bien,..."
url: https://indaga.net/scroller-de-noticias-o-news-scroller-a-traves-de-un-feed/
date: 2012-08-18
modified: 2012-08-18
author: "Directorio Indaga"
categories: ["Recursos y Utilidades"]
type: post
lang: es
---  # Scroller de noticias o News Scroller a través de un feed  ***Ya en Valencia...***  > Este post he querido escribirlo desde hace bastante tiempo aquí, en KnowHow pero acabo no haciéndolo por pereza u olvido. Ahora ya toca, ya que un amiguete lo necesita. Pues bien, aquí va...  [![Scroller de noticias o News Scroller a través de un feed](http://know-how.com.es/wp-content/uploads/2012/08/api-google-feed.jpg)](http://know-how.com.es/wp-content/uploads/2012/08/api-google-feed.jpg)
Valencia, 18/08/2012, G.B.
Un **Scroller de noticias**, **news scroller** o **scrolling news** es simplemente eso que vemos en muchas webs en las que en un pequeño apartado -habitualmente un iframe- aparecen una serie de titulares desplazándose generalmente hacia arriba o abajo y que al hacer click en alguno de ellos nos lleva al sitio web en el que se desarrolla la noticia o artículo. Podemos **utilizarlo dinámicamente** si esos titulares vienen **alimentados por un feed**.  Hay muchos recursos en la web para **crear News Scrollers**, pero uno de los más interesantes que conozco y que utilizo desde hace mucho tiempo viene de la mano del 'ligeramente' conocido **Google**. En el sitio de **[Google Code Playground](http://code.google.com/apis/ajax/playground/)**, en el **apartado Feeds**, disponemos de varios ejemplos para implementar **nuestro propio scroller de noticias** basado en la tecnología **AJAX**.  Si no me equivoco, hasta no hace mucho necesitábamos solicitar una **API de Google** para poder implementar el código del scroller de noticias alimentado por nuestro propio feed. Creo que  eso ya no es necesario, como podemos observar al intentar darnos de alta del **API de Feeds de Google **(si no nos volvemos locos en el intento...). Por ello, tan sólo necesitaremos copiar y subir 3 archivos a nuestro servidor para poder utilizar esta interesante función en nuestra web o blog: un **archivo .js**, un **archivo .css** y el **archivo en donde se implementa el código para generar el scroller de noticias** y en el que se llama a los dos archivos anteriormente mencionados. La referencia y el código de los archivos necesarios los tenemos en la siguiente dirección web:  [http://www.google.com/uds/solutions/dynamicfeed/reference.html](http://www.google.com/uds/solutions/dynamicfeed/reference.html) Para el tema del API visitad esta web: [AJAX Feed API](http://code.google.com/apis/ajaxfeeds/)  Y para ilustrar todo esto, vamos a verlo embebido en este mismo post, eso sí, en mi caso con el API, ya que lo hice hace ya algún tiempo:  > ApiGoogleFeed.css (el archivo de hoja de estilo): [http://webcontenidos.es/ApiGoogleFeed.css](http://webcontenidos.es/ApiGoogleFeed.css)div#capa1 { width: 215px; height: 350px; /*border: 1px solid #000;*/ padding: 0px; /* overflow: hidden; */ position: relative; } p { font-family:Arial; font-size:8pt; text-decoration:none; color:Black; text-align:left; border-collapse:collapse; } a { color:#36C; font-family:Arial; font-size:9pt; font-weight:bold; text-decoration:none; } a.hover { color:#898989; text-decoration:none; }Scroll.class.js (el archivo .js, JavaScript) [http://webcontenidos.es/js/Scroll.class.js](http://webcontenidos.es/js/Scroll.class.js)  > function Scroll(id, speed) { this.speed = speed; this.oDiv = document.getElementById(id); this.content = this.oDiv.innerHTML; this.scroll_layer = "<div id='scroller_" + id + "' style='position: relative;'>" + this.content + "</div>"; this.oDiv.innerHTML = this.scroll_layer; this.oScroll = document.getElementById('scroller_' + id); this.start();}Scroll.prototype.paused = false;Scroll.prototype.oDiv = new Object();Scroll.prototype.oScroll = new Object();Scroll.prototype.content = "";Scroll.prototype.scroll_layer = "";Scroll.prototype.mask_height = 0;Scroll.prototype.speed = 1;Scroll.prototype.start = function() { this.paused = false; this.mask_height = this.oDiv.offsetHeight; this.oScroll.style.position = 'relative'; this.oScroll.style.top = this.mask_height + "px"; this.oScroll.style.left = 0; this.scroll();};Scroll.prototype.pause = function() { this.paused = true;};Scroll.prototype.resume = function() { this.paused = false;};Scroll.prototype.scroll = function() { if (!this.paused) { this.oScroll.style.top = (parseInt(this.oScroll.style.top) - this.speed) + "px"; if (parseInt(this.oScroll.offsetTop) <= this.oDiv.offsetTop - this.oScroll.offsetHeight) { this.oScroll.style.top = this.mask_height + "px"; } } var _self = this; window.setTimeout(function() { _self.scroll(); }, 30);};Scroll.prototype.showContent = function() { alert(this.content);};  Por último, el archivo en el que llamamos a la API, el archivo .css, el .js y en donde especificamos la URL del feed que queremos que se muestre en el Scroller de noticias dinámico:  > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=utf-8"/><title>Noticias de puntocomunica.com - Google AJAX Feed API</title><script type="text/javascript" src="https://www.google.com/jsapi?key=ABQIAAAAhKDbvqwy4CkWnpwJ1DqebBTkGX2ile0O51qzP18BNeZYF3KVdxT-8j7pEcZ5eVQ2d2ZK1JpvGYb6Lw"></script><script type="text/javascript" src="js/Scroll.class.js"></script><script type="text/javascript">/*<![CDATA[*/google.load("feeds", "1");function initialize() {var feed = new google.feeds.Feed("http://www.puntocomunica.com/feed");feed.setNumEntries(8);feed.load(function(result) {if (!result.error) {var container = document.getElementById("feed");var html="";for (var i = 0; i < result.feed.entries.length; i++) {var entry = result.feed.entries;html+="<p>";html+="<b><a href='"+entry.link+"' target='_blank'>"+entry.title+"</a></b>";html+="<br />";html+=entry.contentSnippet;html+="</p>";var div = document.createElement("div");div.appendChild(document.createTextNode(entry.title));container.appendChild(div);}container.innerHTML=html;}});}google.setOnLoadCallback(initialize);/*]]>*/</script><style type="text/css">/*<![CDATA[*/<link rel="stylesheet" type="text/css" href="ApiGoogleFeed.css" />/*]]>*/</style></head><body data-rsssl=1><div id="capa1" onmouseover="s1.pause();" onmouseout="s1.resume();"><div id="feed"></div></div><script type="text/javascript">var s1 = new Scroll('capa1',1);</script></body></html>  Os dejo otro enlace al respecto: [http://allwebco-templates.com/support/S_script_IFrame-NewsScroll.htm](http://allwebco-templates.com/support/S_script_IFrame-NewsScroll.htm)  Y aquí el  iframe de **Puntocomunica.com** que contiene los 3 archivos: