Come creare un raccoglitore di notizie nel proprio sito
La presenza di nuovi contenuti aggiornati è un fattore determinante per il successo di un sito. Creare e aggiornare il contenuto in maniera costante è un’operazione, però, non semplice e non priva di costi.
Tra le cose che si possono fare con l’uso delle Google Api, c’è quella di fornire il nostro sito di uno o più raccoglitori di notizie, attraverso la ricerca e la pubblicazione dei feed RSS messi a disposizione dai siti più disparati. Ricorrendo al loader del motore di ricerca, possiamo leggere un certo numero di notizie, video e commenti di blog in base a una localizzazione geografica, ecc.
Insomma, possiamo arricchire l’home page con notizie fresche di qualsiasi ambito, zona o data.
Cliccando su un determinato feed si accede ad una pagina di Google (Add to Google) dove è possibel usare il link di colore verde da usare come parametro da passare alla funzione di ricerca delle Google Api.
Chiediamo una chiave a Google
Per poter usare le Google Api, occorre essere in possesso di un account Google (va bene anche Gmail) e andare nell’area di registrazione all’indirizzo http://code.google.com/intl/it-IT/apis/loader/signup.html, e digitare l’indirizzo relativo alla pagina in cui desideriamo sfruttare le Api. Otteniamo, così, una chiave alfanumerica lunga 86 caratteri da utilizzare nello script che dobbiamo implementare per realizzare il nostro contenitore di notizie.
Insieme alla chiave il servizio fornisce anche uno script, da utilizzare nella pagina in cui vogliamo raccogliere le notizie, con cui cercare e pubblicare notizie, video e commenti in base alla localizzazione geografica.
Esaminiamo il codice fornito
Concentriamoci sul codice della funzione OnLoad():
function Onload(){
//Crea un controllo per la ricerca
var searchControl=new google.search.SearchControl()
//aggiunge un set completo per la ricerca (web, video, blog)
var localSearch = new google.search.LocalSearch();
searchControl.addSearcher(localSearch);
searchControl.addSearcher(new google.search.WebSearch());
searchControl.addSearcher(new google.search.VideoSearch());
searchControl.addSearcher(new google.search.BlogSearch());
//Stabilisce una localizzazione georeferenziata per la ricerca
localSearch.setCenterPoint(“New York,NY”);
//Indica a Google il nome dell’elemento di pagina (generalmente un <div> che unge da contenitore
searchControl.draw(document.getElementById(“searchcontrol”));
//Esegue la ricerca
searchControl.execute(“Google”);
}
//Effettuala chiamata della funzione (Ajax)
google.setOnLoadCallback(OnLoad);
Possiamo notare, come, con poche istruzioni, abbiamo ottenuto il corpo principale di un potenziale script da usare per creare un contenitore di notizie.
Un contenitore personalizzato
Oltre alla ricerca georeferenziata, ci sono altri modi di usare le Google Api per raccogliere notizie. Possiamo ad esempio chiedere al motore di leggere il contenuto di un feed di un preciso argomento e pubblicato su un determinato sito. Vediamo di seguito come concepire uno script, da implementare in una pagina Html o all’interno di un contenitore, da usare sulla nostra home page per arricchirla di notizie interessanti e sempre fresche.
Possiamo usare come punto di partenza, l’intestazione dello script contenuto nell’email, facente uso della nostra API-Key:
<script src=”http://www.google.com/jsapi?key=<- CHIAVE -> “type=”text javascript”>
Se accediamo al nostro account Google attraverso una connessione Ssl, dobbiamo utilizzare il protocollo Https anziché Http. Il secondo tag:
google.load(“feeds”,”1″);
Esegue la chiamata alle Api di Google nella loro versione 1.
Il cuore dello Script
Analizziamo la funzione principale dello script, che andiamo a concepire. Possiamo chiamarla Onload() comenell’esempio fornitoci con l’API Key. La seguente riga di codice:
var attributes=["title","link","publishedDate","contentSnippet"];
Definisce gli attributi dei feed pubblicati che il motore di Google dovrà raccogliere e restituire alla nostra ricerca, il titolo, il link al contenuto, la data di pubblicazione, il riassunto (vedi box Lo standard Rss). La riga:
var RSSfeed = new google.feeds.Feed(“http://rss.feedportal.com/c/32276/f/566673/index.rss”)
Crea un contenitore che inizializziamo, attraverso il metodo = new google.feeds.Feed cui passiamo, come parametro, l’indirizzo in cui è collocato il feed che ci interessa.
Con il codice
RSSfeed.setNumEntries(3);
Chiediamo al motore di restituire i primi tre risultati, che vengono restituiti tramite la chiamata:
feed.load(function(result)
Un contenitore per i risultati
La visualizzazione delle notizie deve necessariamente avvenire all’interno di un elemento della pagina in cui risiede lo script. Si utilizza allo scopo, in genere, un elemento <div>:
var container=document.getElementById(“RSSfeed”);
Il nome immesso (RSSfeed) è l’Id che dobbiamo assegnare, attraverso un tag opportuno, all’elemento che funge da contenitore (ad esempio <div id=”RSSfeed”>).
Organizziamo le Notizie
Il completamento della ricerca avviene attraverso la creazione di un ciclo (for (var i= 0; i < result.feed.entries.length; i++)), in base al valore precedentemente fissato per il numero di risultati, all’interno del quale dobbiamo raccogliere e organizzare le informazioni pescate dal motore. Attraverso il metodo document.createElement dichiariamo variabili che ci serviranno per la costruzione del codice Html, generato dallo script, necessario per visualizzare le notizie. La generazione di questo codice avviene con il metodo appendChild di ciascuna variabile.
L’uso delle Api di Google avviene attraverso una chiamata di tipo Ajax (google.setOnLoadCallback(OnLoad)) alla quale passiamo per parametro il nome della funzione principale dello script.
<!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”
xmlns:v=”urn:schemas-microsoft-com:vml”>
<head>
<script src=”https://www.google.com/jsapi?key=<- INSERIRE QUI LA CHIAVE ->”> <script language=”javascript” type=”text/javascript”>
google.load(“feeds”,”1″);
function On Load(){
var attributes=[“title”,”link”,”publishedDate”,”contentSnippet”];
var RSSfeed=new google.feeds.Feed(“http://rss.feedsportal.com/c/32276/f/566673/index.rss”);
RSSfeed.setNumEntries(3);
feed.load(function(result){
if(!result.error){
var container=document.getElementById(“RSSfeed”);
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:#002;margin-top:5px’;
span.style.cssText=’color:#555;font-size:10px’;
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);
}
}
});
}
google.setOnLoadCallback(OnLoad);
</script>
</head>
<body>
<div id=”RSSfeed” style=”border:2px solid rgb(120, 120, 120); padding: 5px;”>
</div>
</body>
</html>
Come usare lo script
Ci sono vari modi di usare il codice creato. Possiamo implementarlo all’interno di un editor e salvare la pagina in formato Html. Usando un client FTP possiamo trasferire tale pagina (ad esempio RSS.html) nello spazio web del nostro sito in modo che possa essere linkata all’interno di una pagina, caricandone il contenuto nella pagina stessa o in un suo contenitore, oppure aprendola all’interno di una finestra pop-up.
Un’altra possibilità consiste nell’utilizzare direttamente il codice all’interno di un contenitore Html/Javascript, in questi casi è bene non applicare dimensioni all’elemento che funge da contenitore, per evitare la sovrapposizione dei testi con quelli della pagina.
L’attributo relativo alla data, inoltre, viene restituito nel formato USA. Basta una semplice manipolazione della stringa (usando la funzione substr) per riportarla nel formato italiano.
