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:

PLAIN TEXT
PHP:
  1. /**
  2.  * SimplePie sample
  3.  *
  4.  * @author        Giovambattista Fazioli
  5.  * @web           http://www.undolog.com
  6.  * @email         g.fazioli@undolog.com
  7.  *
  8.  */
  9. // inserire il percorso corretto
  10. require_once ("simplepie.inc");
  11. //
  12. function wordCut($c, $l){
  13. $a= explode(' ',$c);
  14. if( count($a)> $l) {
  15.     for($i=0; $i<$l; $i++) $r[$i] = $a[$i];
  16.     $r= implode(' ', $r).'...';
  17.     return $r;
  18.     } else return $c;
  19. }
  20. //
  21. $max        = 10;        // last 10 post/news
  22. $thefeed    = new SimplePie('http://www.undolog.com/feed');
  23. $thefeed->handle_content_type();
  24. for ($i = 0; $i <$thefeed->get_item_quantity( $max ); $i++  ) $articles[] = $thefeed->get_item($i);
  25. 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:

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

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

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

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

PLAIN TEXT
JavaScript:
  1. // globale
  2. var index_news = 0;
  3. //
  4. function initNews() {
  5.     $('div#feed-ticker')
  6.     .slideDown('slow',
  7.         function() {
  8.             $('div#feed-ticker li').eq( index_news ).fadeIn();
  9.             setTimeout( next_news, 5000 );
  10.         }
  11.     );
  12. }
  13.  
  14. function next_news() {
  15.     $('div#feed-ticker li')
  16.     .eq( index_news )
  17.     .fadeOut(1000,
  18.         function() {
  19.             index_news++;
  20.             if( index_news> $('div#feed-ticker li').length-1 ) index_news = 0;
  21.             $('div#feed-ticker li').eq( index_news ).fadeIn();
  22.             setTimeout( next_news, 5000 );
  23.         }
  24.     );
  25. }

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. getAvatar 1.0
    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. getAvatar 1.0
    15 dic, 2008 Giovambattista Fazioli:

    @MaiNick: :) corretto :)

    Rispondi Quota
  3. getAvatar 1.0
    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. getAvatar 1.0
    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. getAvatar 1.0
    10 apr, 2009 Giovambattista Fazioli:

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

    Rispondi Quota
  6. getAvatar 1.0
    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
[as][/as]           // Actionscript
[css][/css]         // CSS Style Sheet
[html][/html]       // HTML
[js][/js]           // Javascript
[objc][/objc]       // Objective-C
[php][/php]         // PHP
[sql][/sql]         // SQL