Feed, come creare un lettore

di Maria Silvana Radice





Come creare un lettore di Feed per il sito

How to create a feed reader



AGGIORNAMENTO: il lettore non funziona più,
non appena troverò una nuova soluzione, la pubblicherò



Un lettore di feed e` un box in cui e` possibile visualizzare le notizie tramite un feed rss. Quello che vedete qui sopra, riporta gli aggiornamenti del mio sito. Nel caso ci fossero delle immagini, verrebbero riprodotte anche quelle.
Per Google sites, esiste un gadget ufficiale di Google per questo scopo, ma, purtroppo, non funziona bene su alcuni tablet.

Vediamo come creare questo feed reader....

Per prima cosa, e` necessario ottenere una Google api key . Per ottenerla, seguite la mia guida: Come ottenere una Google API key
Oppure la guida ufficiale: https://developers.google.com/console/help/?csw=1#UsingOAuth2.

Una volta ottenuta la vostra Api key, scaricate....


(lo trovate anche in fondo a questa pagina).

Scompattate il file ed estraete la cartella che contiene. All'interno della cartella, troverete diversi file. Aprite il file feed.html con un editor di testo. Apparira` il codice del reader. Per attivarlo e visualizzare il vostro feed, dovete modificare alcune voci.

Nella prima parte del codice....

 <html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi?key=     
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">
</script>

....al posto della fila di x che ho segnato in rosso, dovete mettere la vostra Google api key.

Piu` sotto....

div#mysagscroller2{
width: 600px;
height:300px;
margin: 0 auto;
}


....potete personalizzare le dimensioni del lettore. La stringa "margin: 0 auto;" non c'e` nel codice contenuto nel file.zip. Serve a centrare il lettore nella pagina, se non la mettete, il lettore si sistemera` a sinistra.

In quest'altra parte....

var sagscroller2=new sagscroller({
    id:'mysagscroller2',
    mode: 'manual',
    rssdata:{
        feeds: [
            ['Titolofeed', 'http://www.xxxxxxxxxxxxxxxxxxxxxxxxxxx']
        ],
        linktarget: '_new',
        displayoptions: 'datetime label description',
        groupbylabel: true,
        entries: 5 //<--no comma following last option
    },
    pause: 10000,
    animatespeed: 1500 //<--no comma following last option
})

....sempre dove segnato in rosso, dovete mettere l'indirizzo del feed. Sopra a questo, segnato in verde, potete anche scegliere di ottenere lo scorrimento automatico, invece che manuale, sostituendo la voce "manual" con la voce "auto". Se optate per questa scelta, piu` sotto, potete impostare il tempo di pausa (pause: 10000), cioe` per quanto tempo il lettore restera` fermo tra uno scorrimento e l'altro e la velocita` di scorrimento (animatespeed: 1500).
Potete anche indicare il numero di post che devono apparire (entries: 5).


La voce "displayoptions" comanda gli elementi da visualizzare nel feed.

I comandi possono essere questi:

date, datetime, time, snippet, label, description

..e cioe`:
data, ora e data, ora, frammento, titolo, descrizione (Con il comando descrizione si vedono anche le immagini)

....e se ne puo` mettere piu` di uno, inserendoli in sequenza, separati da uno spazio (es: date time description).

Di default e` impostata su: "datetime label description", vale a dire che il lettore mostrera` la data, l'ora, il titolo e anche le immagini.


I link sono visualizzati in grassetto di default. Se li volete normali, come quelli del mio esempio, dovete aprire, sempre con un editor di testo, il file sagscroller.css e cercare questa parte....

.sagscroller a{
#font-weight:bold;
}

....senza togliere nulla, e` sufficiente mettere un cancelletto (come segnato in rosso) prima del comando. Se, in seguito, vorrete di nuovo i link in grassetto vi bastera` toglierlo.

Sempre nel foglio di stile, in questa sezione....

.sagscroller{
width: 200px;  /*default width of scroller*/
height:250px;
overflow:hidden;
position:relative;
border:4px solid green;
border-radius: 8px; /*css3 round corners*/
-moz-border-radius: 8px; /*css3 round corners*/
-webkit-border-radius: 8px; /*css3 round corners*/
}

....potete cambiare il colore, lo spessore e lo stile del bordo.

Come rendere il lettore "responsive":

Se volete che il lettore si adatti alla visualizzazione per mobile, dovete cambiare questa sezione cosi`:

div#mysagscroller2{
width: 90%;
height:300px;
margin: 0 auto;
}

In pratica, indicate la larghezza in percentuale anziche` in pixel come era prima.

Dopo aver completato la personalizzazione del codice, caricate la cartella in uno spazio hosting, prelevate l'indirizzo del file.html, e caricate il reader nella vostra pagina tramite un iFrame (vedi: Come incorporare una pagina web nel sito (iFrame)).

In Google sites, seguite la guida Come caricare codici e scripts in Google sites. Se volete che il lettore sia responsive, dovete impostare in percentuale la larghezza del gadget invece che in pixel.




Aiuta il sito! Condividi questa pagina su:
  Facebook   twitter  Google   Linked  in     

Ti e` stato utile questo argomento?









ċ
feedreader.zip
(29k)
Maria Silvana Radice,
23 mar 2017, 10:28