Create a simple Feed Reader with SimplePie and jQuery

SimplePie is a PHP library can greatly simplify the retrieval and manipulation of RSS feeds, or, more generally, to XML formats. You can, for example, write a few lines of code, exploiting some "funzioncina" jQuery to create a News Ticker to join our site / blog.

What we need ...

First of all download SimplePie and place, somewhere, the file simplepie.inc on your site / blog. The code to read and display a feed is as follows:

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
/ **
* Sample SimplePie
*
* @ Author Giovambattista Fazioli
* @ Web http://www.undolog.com
* @ @ Email g.fazioli undolog.com
*
* /
/ / Insert the correct path
"simplepie.inc" ) ; require_once ("simplepie.inc");
/ /
$c , $l ) { wordCut function ($ c, $ s) {
explode ( ' ' , $c ) ; $ A = explode ('', $ c);
count ( $a ) > $l ) { if ( count ($ a)> $ l) {
$i = 0 ; $i < $l ; $i ++ ) $r [ $i ] = $a [ $i ] ; for ($ i = 0; $ i <$ l $ i + +) $ r [$ i] = $ a [$ i];
implode ( ' ' , $r ) . '...' ; $ R = implode ('', $ r).'...';
; return $ r;
$c ; Else return $ c};
}
/ /
10 ; // last 10 post/news $ Max = 10, / / last 10 posts / news
new SimplePie ( 'http://www.undolog.com/feed' ) ; $ Thefeed = new SimplePie ('http://www.undolog.com/feed');
handle_content_type ( ) ; $ Thefeed -> handle_content_type ();
$i = 0 ; $i < $thefeed -> get_item_quantity ( $max ) ; $i ++ ) $articles [ ] = $thefeed -> get_item ( $i ) ; for ($ i = 0; $ i <$ thefeed -> get_item_quantity ($ max); $ i + +) $ articles [] = $ thefeed -> get_Item ($ i);
$articles as $item ) echo '<li><a href="' . $item -> get_link ( ) . '">' . $item -> get_title ( ) . '</a> - ' . wordCut ( $item -> get_description ( ) , 10 ) . '</li>' ; foreach ($ articles as $ item) echo '<a href="' <li>. $item -> get_link ().' "> '. $ item -> get_title ().' </ a> - '. wordCut ($ item -> get_description (), 10). '</ li>';

In this sample code I extracted from the last 10 feeds undolog.com and I have a list formatted using ul/li . ). I have regained the title is ( $item->get_title() ) that a part of the contents ( $item->get_description() ). Of course, enter this code inside a HTML formatting like this:

1
2
3
4
5
"feed-ticker" style = "display:none" > < div id = "rss-ticker" style = "display: none">
< ul >
<Php / / insert code here?>
</ ul >
</ div >

We come now to the JavaScript to view "turns", with a simple animation, individual titles / content feeds:

1
2
3
4
5
6
7
8
9
/ / Include jQuery through Google API
"text/javascript" src = "http://www.google.com/jsapi" >< / script > < script type = "text / javascript" src = "http://www.google.com/jsapi"> </ script >
"text/javascript" > google.load("jquery", "1.2.6"); < / script > < script type = "text / javascript"> google.load ("jquery", "1.2.6") </ script >
<! - JQuery code for entertainment news ->
"text/javascript" src = "sample.js" >< / script > < script type = "text / javascript" src = "Sample.js"> </ script >
"text/javascript" > < script type = "text / javascript">
/ / Call initNews () the completion of the page
google.setOnLoadCallback (initNews);
</ script >

In the file sample.js , you can call and place where you want, we have:

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
/ / Global
0 ; index_news var = 0;
/ /
initNews function () {
) $ ('Div # feed-ticker')
'slow' , . SlideDown ('slow',
function () {
) . eq ( index_news ) . fadeIn ( ) ; $ ('Div # ticker-feed them'). Eq (index_news). FadeIn ();
5000 ) ; setTimeout (next_news, 5000);
}
);
}

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

The end result can see on saidmade.com : D

6 comments to "Create a simple Feed Reader with SimplePie and jQuery"

  1. December 15, 2008 MaiNick :

    As it happens I was just recently implemented a feed reader for the management of notifications to be sent to customers of e-commerce application, this class in PHP I greatly speed up work, then use it for the addition of some effect in jQuery.

    PS Undolog wanted to report an error on the link to Saidmade.com : D

  2. December 21, 2008 The best posts of the week # 6 | EmaWebDesign:: Web Programming / Web Design :

    [...] Create a simple Feed Reader with SimplePie and jQuery SimplePie is a PHP library can greatly simplify the retrieval and manipulation [...]

  3. April 10, 2009 manju:

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

  4. April 10, 2009 Giovambattista Fazioli :

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

  5. May 15, 2009 Undolog.com »Wordpress Plugin: Flash Feed Scroll Reader :

    [...] Inspired by post Create a simple Feed Reader with SimplePie and jQuery I created the first Plugin WordPress weblog Saidmade. Flash Feed Scroll Reader uses SimplePie [...]

Leave a comment

XHTML TAG PERMIT: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERTION CODE:
 <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