jQuery » Tutorials » Sviluppo » PHP » Javascript » Internet

Creare un semplice Feed Reader con SimplePie e jQuery

lunedì 15 dicembre, 2008

SimplePie è una libreria PHP in grado di semplificare notevolmente il recupero e la manipolazione di Feed RSS o, più in generale, di formati XML. È possibile, ad esempio, scrivere poche righe di codice, sfruttando anche qualche “funzioncina” jQuery, per realizzare un News Ticker da inserire nel nostro sito/blog.

Cosa ci serve…

Prima di tutto scaricate SimplePie e inserire, da qualche parte, il file simplepie.inc sul vostro sito/blog. Il codice per leggere e visualizzare un feed è il seguente:

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
/**
 * SimplePie sample
 *
 * @author        Giovambattista Fazioli
 * @web           http://www.undolog.com
 * @email         g.fazioli@undolog.com
 *
 */
// inserire il percorso corretto
require_once ("simplepie.inc");
//
function wordCut($c, $l){
$a= explode(' ',$c);
if( count($a) > $l) {
    for($i=0; $i< $l; $i++) $r[$i] = $a[$i];
    $r= implode(' ', $r).'...';
    return $r;
    } else return $c;
}
//
$max        = 10;        // last 10 post/news
$thefeed    = new SimplePie('http://www.undolog.com/feed');
$thefeed->handle_content_type();
for ($i = 0; $i < $thefeed->get_item_quantity( $max ); $i++  ) $articles[] = $thefeed->get_item($i);
foreach ($articles as $item) echo '<li><a href="' . $item->get_link() . '">' . $item->get_title() . '</a> - '.wordCut($item->get_description(), 10).'</li>';

In questo codice di esempio ho estratto gli ultimi 10 Feed da undolog.com e li ho formattati usando una lista ul/li. Ho recuperato sia il titolo ($item->get_title()) che una parte del contenuto ($item->get_description()). Ovviamente inserite questo codice all’interno di una formattazione HTML di questo tipo:

1
2
3
4
5
<div id="feed-ticker" style="display:none">
    <ul>
    <?php // inserire qui il codice ?>
    </ul>
</div>

Veniamo ora alla parte Javascript per visualizzare “a turno”, con una semplice animazione, i singoli titoli/contenuto dei feed:

1
2
3
4
5
6
7
8
9
// includiamo jQuery tramite Google API
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.2.6");</script>
<!-- codice jQuery per animazione delle news -->
<script type="text/javascript" src="sample.js"></script>
<script type="text/javascript">
// chiamo initNews() al completamento della pagina
google.setOnLoadCallback( initNews );
</script>

Nel file sample.js, che potete chiamare e posizionare dove volete, abbiamo:

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
// globale
var index_news = 0;
//
function initNews() {
    $('div#feed-ticker')
    .slideDown('slow',
        function() {
            $('div#feed-ticker li').eq( index_news ).fadeIn();
            setTimeout( next_news, 5000 );
        }
    );
}

function next_news() {
    $('div#feed-ticker li')
    .eq( index_news )
    .fadeOut(1000,
        function() {
            index_news++;
            if( index_news > $('div#feed-ticker li').length-1 ) index_news = 0;
            $('div#feed-ticker li').eq( index_news ).fadeIn();
            setTimeout( next_news, 5000 );
        }
    );
}

Il risultato finale lo potete vedere su saidmade.com :D

Post correlati

Questo articolo ti è stato utile?: Per nientePocoAbbastanzaMoltoMoltissimo
Loading ... Loading ...

Tags: , , , , , , , , , ,

6 commenti a: “Creare un semplice Feed Reader con SimplePie e jQuery”

  1. 15 dic, 2008 MaiNick:

    Guarda caso proprio in questi giorni stavo implementando un Feed Reader per la gestione di notifiche da inviare ai clienti di un’applicazione e-Commerce, questa classe in PHP mi velocizzerà molto il lavoro, per impiegarlo poi all’aggiunta di qualche effetto in jQuery.

    P.S. Undolog volevo segnalarti un errore sul link a Saidmade.com :D

    Rispondi Quota
  2. 15 dic, 2008 Giovambattista Fazioli:

    @MaiNick: :) corretto :)

    Rispondi Quota
  3. 21 dic, 2008 I migliori post della settimana #6 | EmaWebDesign :: Web Programming / Web Design:

    [...] Creare un semplice Feed Reader con SimplePie e jQuery SimplePie è una libreria PHP in grado di semplificare notevolmente il recupero e la manipolazione [...]

  4. 10 apr, 2009 manju:

    I took your code and tried to implement it but I am getting errors.
    The php code on line 10 in php has require_once ( "simplepie.inc"); which gives me an error.
    And if I remove the “simplepie.inc”, it gives me again an error foe the // in the next line.
    Please let me know if I am doing anything wrong.

    Rispondi Quota
  5. 10 apr, 2009 Giovambattista Fazioli:

    @manju: You have to download SimplePie library before test your code. Follow the instruction in post.

    Rispondi Quota
  6. 15 mag, 2009 Undolog.com» Wordpress Plugin: Flash Feed Scroll Reader:

    [...] spunto dal post Creare un semplice Feed Reader con SimplePie e jQuery ho creato il primo Plugin WordPress targato Saidmade. Flash Feed Scroll Reader utilizza SimplePie [...]

Lascia un commento

TAG XHTML PERMESSI: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERIMENTO CODICE: 
<pre></pre>                                  // blocco generico
<code></code>                                // blocco generico
[cc_actionscript][/cc_actionscript]          // Actionscript
[cc_actionscript3][/cc_actionscript3]        // Actionscript 3
[cc_css][/cc_css]                            // CSS Style Sheet
[cc_html][/cc_html]                          // HTML
[cc_js][/cc_js]                              // Javascript
[cc_objc][/cc_objc]                          // Objective-C
[cc_php][/cc_objc]                           // PHP
[cc_sql][/cc_sql]                            // SQL