Hoy he necesitado cargar un RSS externo desde una web, y había que hacerlo con Javascript. El problema es que desde Javascript solo se puede hacer peticiones asíncronas a URL’s de tu propio dominio, debido a restricciones de seguridad.
El otro día estuve viendo cómo cargar los frameworks más famosos y las API’s de Google desde el CDN de Google. Google también permite cargar sus API’s AJAX mediante este método, y entre estas API’s se encuentra el API AJAX de Google para feeds, que permite cargar cualquier RSS de cualquier dominio haciendo uso solamente de Javascript, eliminando la necesidad de crear un proxy en el servidor, ya que Google lo crea por ti. Las ventajas están bastante claras:
- Menos lógica en el servidor.
- Menos sobrecarga en el servidor
- Las ventajas de usar un CDN externo para cargarJavascript.
La dirección del feed RSS que voy a utilizar es la de mi cuenta de Twitter. Para obtener la dirección solamente hay que abrir el enlace que proporciona Twitter en su página web.
Usando el objeto FeedControl
El objeto FeedControl, permite añadir todos los feeds que quieras mediante le método addFeed y luego, mediante el método draw, inyecta el contenido de estos en el elemento DOM especificado.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.load("feeds", "1");
function inicio() {
var feedControl = new google.feeds.FeedControl();
feedControl.addFeed("http://twitter.com/statuses/user_timeline/29672915.rss", "Twitter");
feedControl.draw(document.getElementById("contenedor"));
}
google.setOnLoadCallback(inicio);
</script> |
El código HTML se muestra a continuación:
1
2
3
| <body>
<div id="contenedor" > </div>
</body> |
En el div identificado con la palabra “contenedor” se cargará automáticamente el contenido del Feed. En la imagen se puede observar el resultado.
Luego, viendo el código HTML generado mediante un inspector HTML como Firebug o el que trae IE 8, se puede crear un código CSS para cambiarle la apariencia. Este método es muy cómodo, pero si se necesita más control sobre el código generado se puede utilizar el objeto Feed, que proporciona más control.
Usando el objeto Feed
El objeto Feed permite cargar el documento XML que compone el Feed y tratarlo como un objeto JSON (comportamiento por defecto). Después se itera sobre el objeto JSON y se inyecta directamente sobre el DOM de la página.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| <script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
function inicio() {
var feed = new google.feeds.Feed("http://twitter.com/statuses/user_timeline/29672915.rss");
feed.setNumEntries(3); //Por defecto son 4
feed.load(function(result) {
if (!result.error) {
var contenedor = document.getElementById("contenedor");
var tmpStr = "";
tmpStr += "<h2> <a href='"+result.feed.link+"'> " + result.feed.title + "</a></h2>";
contenedor.innerHTML += tmpStr;
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var tmpStr = "";
tmpStr += "<div class='entrada'> ";
tmpStr += "<img src='twitter.png' alt='Icono de Twitter' class='icono' /> ";
tmpStr += "<div class='contenido'><a href='"+entry.link+"'>"+ entry.contentSnippet + "</a></div>";
var fecha = entry.publishedDate.split(" ");
tmpStr += "<div class='fecha'> " + fecha[1]+ " " +fecha[2]+" " + fecha[3]+ " "+ fecha[4]+"</div>";
tmpStr += "</div> ";
contenedor.innerHTML += tmpStr;
}
}
});
}
google.setOnLoadCallback(inicio);
</script> |
Breve explicación del código:
- En el constructor del objeto Feed se pasa como parámetro la URL del feed RSS.
- El método setNumEntries establece el número de items descargados del feed.
- El método load carga el feed en la variable result.
- result.feed.entries es un array de objetos con la información de cada item del feed. Se itera sobre este array y se va inyectando la información de los feed en el DOM.
El código HTML es el mismo que el usado en el primer ejemplo. Luego con un poco de CSS se le da un poco de apariencia al widget.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
*{
margin:0;
padding:0;
}
#contenedor{
width:280px;
padding-left:15px;;
}
#contenedor h2 a{
color:#FF4D07;
font-size:20px;
font-family:"Trebuchet MS";
text-decoration:none;
}
div.entrada{
margin:10px;
}
div.entrada img.icono{
float:left;
margin-right:15px;
}
div.contenido a{
color:#09399F;
text-decoration:none;
}
div.fecha{
font-family:"Trebuchet MS";
font-size:12px;
color: #7F7F7F;
} |
El resultado final es este:
Conclusión
La potencia de esta API está bastante clara, nos proporciona una forma rápida y cómoda de acceder a los feeds RSS de cualquier parte. Teniendo en cuenta que ahora hay muchos servicios como redes sociales, etc… que proporcionan esta información mediante RSS, nos abre un abanico de posibilidades a la hora de mejorar nuestros diseños añadiendo información en tiempo real sobre, por ejemplo, nuestros últimos tweets.
Enlaces relevantes
Me llamo David Noguera, tengo 23 años y soy Desarrollador/Administrador web.
Puedes encontrar algo más de información en la página