Lavora con noi

JavaScript

Siti tematici

Speciali

Ajax

JavaScript » Articoli » Nessuna selezione

Pagine:

RSS

Un feed RSS sul proprio sito con le API di Google

di: Giampaolo Petrosemolo 09 Luglio 2007

La funzione feed.load viene eseguita appena i valori provenieneti dalla fonte RSS sono stati caricati. Se non si verificano errori, all'interno della variabile result (che è un oggetto complesso) vengono memorizzati tutti i contenuti del feed. L'utilizzo di questo oggetto permette di nascondere la complessità dell'XML che è stato recuperato (come abbiamo detto un feed RSS non è altro che un file XML strutturato) e facilita la lettura dei valori in esso contenuti. Se avessimo seguito una strada diversa per recuperare gli RSS (ad esempio utilizzando un linguaggio di programmazione lato server come il PHP e non le API di Google) avremmo dovuto effettuare "a mano" il parsing del file RSS facendo ricorso ad XPath o a SimpleXML per estrarre i dati.

Continuando ad analizzare il codice vediamo che viene successivamente istanziata una variabile container che fa riferimento ad un elemento che abbia id="feed" e che deve essere presente nel BODY della vostra pagina web (ad esempio un DIV vuoto). All'interno di questo elemento verrà visualizzato il risultato dell'elaborazione delle informazioni recuperate.

Le successive righe di codice effettuano un ciclo di lettura rispetto al contenuto dell'oggetto result e ne estraggono le singole entità assegnandole alla variabile entry.

Ogni entità che viene estratta avrà diverse informazioni associate, in questo semplice caso viene recuperato e visualizzato il titolo (entry.title) all'interno di un DIV creato al volo e aggiunto al DOM (il Document Object Model) della pagina web proprio all'interno dell'elemento "container" (il nostro <div id="feed"></div>).

for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var div = document.createElement("div");
div.appendChild(document.createTextNode(entry.title));
container.appendChild(div);
}

Personalizziamo la visualizzazione

A questo punto l'esempio dovrebbe essere completo e funzionante.

Personalizziamolo ulteriormente visualizzando altre informazioni oltre al titolo della singola notizia. Utilizzeremo a tal proposito le altre informazioni che vengono passate, in particolare il link che punta alla notizia completa, la data e l'ora ed infine la breve descrizione associata. Queste informazioni sono disponibili rispettivamente tramite entry.link, entry.publishedDate e entry.contentSnippet.

Utilizzeremo più volte le funzioni document.createElement e .appendChild per creare al volo elementi <div>, <span>, <br> e <a> (per i link) ed inserirli all'interno del container.

Per abbellire un po il tutto potete assegnare ai div, agli span e ai link creati al volo stili CSS diversi.

Il ciclo for visto precedentemente si trasforma in qualcosa di simile:

for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var div = document.createElement("div");
var span = document.createElement('span');
var link = document.createElement('a');
link.setAttribute('href', entry.link);
link.appendChild(document.createTextNode(entry.title));
div.style.cssText = 'color:#003; margin-top:10px'; span.style.cssText = 'color:#777; font-size:11px'; link.style.cssText = 'font-weight:bold'; span.appendChild(document.createTextNode(entry.publishedDate));
div.appendChild(span);
div.appendChild(document.createElement('br'));
div.appendChild(link);
div.appendChild(document.createElement('br'));
div.appendChild(document.createTextNode(entry.contentSnippet));
container.appendChild(div);
}

Considerate che la data di pubblicazione viene visualizzata in formato americano, quindi prima di assegnare il valore di entry.publishedDate all'elemento span bisognerebbe elaborarlo facendo uso di JavaScript (lavorando un po con la funzione substr non è poi così difficile).

Se le vostre pagine utilizzano già la libreria Prototype (caricarla solo per l'utilizzo con i feed RSS non è consigliabile visto che pesa da sola poco meno di 100Kb) potreste velocizzare questo lavoro di ottimizzazione utilizzando funzionalità proprie della libreria come gli array associativi (hash) e metodi utili come $w (che trasforma gli elementi di una stringa in valori di un array utilizzando il carattere spazio come delimitatore).

Se volete approfondire l'argomento ecco un paio di link utili sul sito code.google.com: http://code.google.com/apis/ajaxfeeds/documentation/, http://code.google.com/apis/ajaxfeeds/documentation/reference.html (entrambi in inglese).
L'esempio completo e funzionante di questo articolo lo trovate online in due versioni. La versione semplice è su questa pagina, quella che utilizza la libreria Prototype è invece su questa. Buon divertimento!