Criar um Feed Reader simples com SimplePie e jQuery

SimplePie é uma biblioteca PHP pode simplificar muito a recuperação e manipulação de feeds RSS, ou, mais genericamente, para os formatos XML. Você pode, por exemplo, escrever algumas linhas de código, explorando alguns "funzioncina" jQuery para criar uma Ticker Notícias para participar do nosso site / blog.

O que nós precisamos ...

Primeiro baixe SimplePie e lugar, em algum lugar, o arquivo simplepie.inc no seu site / blog. O código para ler e exibir um feed é como segue:

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
/ **
* Amostra SimplePie
*
* @ Autor Giovambattista Fazioli
* @ Web http://www.undolog.com
* E-mail @ @ g.fazioli undolog.com
*
* /
/ / Inserir o caminho correto
"simplepie.inc" ) ; require_once ("simplepie.inc");
/ /
$c , $l ) { wordCut função ($ 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, / / últimos 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 + +) $ artigos [] = $ 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 ($ artigos como $ item) echo "<a href =" 'item <li> $ -.> get_link ().' "> 'item $ -..> get_title ()' </ a> - 'wordCut. (item $ -> get_description (), 10) '</ li>'.;

Neste código de exemplo eu extraído do undolog.com alimenta últimos 10 e eu tenho uma lista formatada usando ul/li . ). Tenho recuperou o título é ( $item->get_title() ) que uma parte do conteúdo ( $item->get_description() ). Naturalmente, inserir este código dentro de uma formatação HTML como esta:

1
2
3
4
5
"feed-ticker" style = "display:none" > < div id = "rss-ticker" style = "display: none">
< ul >
<Php / / Inserir o código here?>
</ ul >
</ div >

Chegamos agora ao JavaScript para ver "se transforma", com uma animação simples, títulos individuais / feeds de conteúdo:

1
2
3
4
5
6
7
8
9
/ / Incluir o jQuery através do Google API
"text/javascript" src = "http://www.google.com/jsapi" >< / script > < roteiro type = "text / javascript" src = "http://www.google.com/jsapi"> </ roteiro >
"text/javascript" > google.load("jquery", "1.2.6"); < / script > < roteiro type = "text / javascript"> google.load ("jquery", "1.2.6") </ script de >
<-! Código JQuery para entretenimento notícias ->
"text/javascript" src = "sample.js" >< / script > < roteiro type = "text / javascript" src = "Sample.js"> </ roteiro >
"text/javascript" > < roteiro type = "text / javascript">
/ / InitNews Call () a conclusão da página
google.setOnLoadCallback (initNews);
</ roteiro >

No arquivo sample.js , você pode chamar e colocar onde quiser, temos:

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-alimentá-los') Eq. (index_news) FadeIn ()..;
5000 ) ; setTimeout (next_news, 5000);
}
);
}

next_news function () {
) $ ('Div # ticker-alimentá-los ")
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-alimentá-los' comprimento) - 1.) = 0 index_news;
) . eq ( index_news ) . fadeIn ( ) ; $ ('Div # ticker-alimentá-los') Eq. (index_news) FadeIn ()..;
5000 ) ; setTimeout (next_news, 5000);
}
);
}

O resultado final pode ver em saidmade.com : D

6 comentários para "Criar um Feed Reader simples com SimplePie e jQuery"

  1. 15 de dezembro de 2008 MaiNick :

    Como acontece Eu estava recentemente implementou um leitor de feeds para a gestão de notificações sejam enviadas para os clientes de e-commerce de aplicação, esta classe em PHP eu acelerar muito trabalho, então usá-lo para a adição de alguns efeitos em jQuery.

    PS Undolog queria relatar um erro no link para Saidmade.com : D

  2. 21 de dezembro de 2008 As melhores posts da semana # 6 | EmaWebDesign:: Web Design / Programação Web :

    [...] Criar um Feed Reader simples com SimplePie e SimplePie jQuery é uma biblioteca PHP pode simplificar muito a recuperação e manipulação [...]

  3. 10 de abril de 2009 manju:

    Peguei seu código e tentei implementações de TI, mas estou recebendo erros.
    O código php na linha 10 o PHP require_once ( "simplepie.inc"); que me dá um erro.
    E se eu remover o "simplepie.inc", dá-me outra vez o inimigo um erro / / na próxima linha.
    Por favor, deixe-me saber se estou fazendo nada de errado.

  4. 10 de abril de 2009 Giovambattista Fazioli :

    @ Manju: Você tem que baixar SimplePie biblioteca antes de testar seu código. Siga as instruções no post.

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

    [...] Inspirado por correio Criar um Feed Reader simples com SimplePie e jQuery criei o primeiro Plugin WordPress Saidmade weblog. Flash Feed Reader Scroll usa SimplePie [...]

Deixe um comentário

XHTML PERMIT TAG: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> CÓDIGO DE INSERÇÃO:
 <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