Breve Tutorial che spiega come creare un mini aggregatore di News con selezione della fonte a schede (Tabs) da mostrare nella sidebar o in una zona qualsiasi del vostro blog.

Mi è stato chiesto da Vincenzo come ho realizzato il menù News / Seleziona la Fonte che vedete nella sidebar e contiene gli ultimi post pubblicati su 3 diversi blog.
Non è molto complicato, quindi vediamo i vari passaggi:

1. Google AJAX Feed API

Per prima cosa è necessario iscriversi per ottenere le proprie API Keys dal sito di Google.

A questo indirizzo http://code.google.com/apis/ajaxfeeds/ invece trovate esempi sull’uso di queste API, e una pagina che elenca tutte le classi presenti in modo da poter successivamente personalizzare il layout tramite CSS.

2. Modifica Header

Nell’header del vostro tema di Wordpress, subito prima del fine </head> è necessario inserire il seguente codice:

<script type="text/javascript" src="http://www.google.com/jsapi?key=CODICE-PERSONALE-DA-PRELEVARE-SU-GOOGLE"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
var feedControl = new google.feeds.FeedControl(8);
feedControl.addFeed("http://www.bloggr.it/feed/", "BLOGGR");
feedControl.addFeed("http://www.vistablog.it/feed/", "VISTABLOG");
feedControl.addFeed("http://www.downloadr.it/feed/", "DOWNLOADR");
feedControl.setNumEntries(4);
feedControl.draw(document.getElementById("feedControl"),
{
drawMode : google.feeds.FeedControl.DRAW_MODE_TABBED});
}
google.setOnLoadCallback(initialize);
</script>

Dovete controllare tutti i file che compongono il vostro tema per assicurarvi di inserire il codice in tutti quelli che contengono i tag <head></head>. Generalmente è il file header.php, ma non sempre e a volte si tratta di più file.

3. Richiamare i Feed

Per ultimo è necessario richiamare i Feed RSS in una zona a scelta del vostro sito, che può essere la sidebar, l’indice del blog o una pagina statica creata apposta.

Inserire il seguente codice dove si vogliono visualizzare le News:

<div id=”feedControl”>Loading</div>

Il risultato finale sarà simile al seguente:

4. Personalizzazioni

Sono segnate in grassetto parti di codice dove inserire la chiave di Google AJAX Feed API e il numero 4 che indica quanti post prelevare da ogni sito (potete inserire il numero che preferite).

Per aggiungere una quarta o quinta fonte (etc.) potete copia-incollare una delle righe che contengono i feed RSS nel rigo successivo e personalizzarlo.

Ad esempio
feedControl.addFeed("http://www.bloggr.it/feed/", "BLOGGR");
diventa
feedControl.addFeed("http://www.mioblog.it/URL_DEL_FEED/", "MIOBLOG.IT");

Dal link di Google fornito in alto si può scegliere una variante che mostra le news di vari siti miscelate e non in Tabs come nell’esempio della mia sidebar.

5. News in un’unica scheda

Questa è la variante per avere tutte le news in un’unica scheda, da sostituire al codice del punto 2:

<script  type="text/javascript" src="http://www.google.com/jsapi?key="YOUR-KEY"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
var feedControl = new google.feeds.FeedControl();
feedControl.addFeed("http://www.digg.com/rss/index.xml", "Digg");
feedControl.addFeed("http://feeds.feedburner.com/Techcrunch", "TechCrunch");
feedControl.draw(document.getElementById("feedControl"));
}
google.setOnLoadCallback(initialize);
</script>

6. Credits

Se avete trovato interessante questo breve tutorial potete “ripagarmi” lasciando il feed di BLOGGR (o di uno degli altri 2 siti) nel vostro mini aggregatore.

Grazie!

Tags: , , , , , , , ,