NLPNLNP

^= = o pp= c = ~ Search JavaScript Kit

Categories: All Free JS/ Applets Tutorials References

A robust RSS Feed displayer

With all the technical details out of the way, it's high time for some fun. Lets combine Google Ajax Feed API with a little bith of Object Oriented ingenuity to create a robust RSS feed displayer capable of displaying more than one feed on the page, each with its own settings. < h e a d > < s c r i p tt y p e = " t e x t / j a v a s c r i p t "s r c = " h t t p : / / w w w . g o o g l e . c o m / j s a p i ? k e y = Y O U R A P I K E Y " > < / s c r i p t > < s c r i p tt y p e = " t e x t / j a v a s c r i p t "s r c = " r s s d i s p l a y e r . j s " > < / s c r i p t > < s t y l et y p e = " t e x t / c s s " > # m s n d i v { w i d t h :8 0 % ; } < / s t y l e > < / h e a d > < b o d y > < s c r i p tt y p e = " t e x t / j a v a s c r i p t " > / / U S A G ES Y N T A X :n e wr s s d i s p l a y e r ( " d i v i d " ," r s s u r l " ,n u m b e r o f i t e m s ," d i s p l a y o p t i o n s " ) n e wr s s d i s p l a y e r ( " m s n d i v " ," h t t p : / / w w w . m s n b c . m s n . c o m / i d / 3 0 3 2 0 9 1 / d e v i c e / r s s / r s s . x m l " ,4 ," d a t e ,d e s c r i p t i o n " ) < / s c r i p t > < b rs t y l e = " c l e a r :b o t h "/ > Here's the output: Teen slain after 'happiest day of her life' Thu Jan 31 2013 07:46:12 GMT+0800 (China Standard Time) A 15-year-old Chicago girl gunned down a week after performing at President Obamas inaugural festivities is remembered as a walking angel.

Background checks take center stage at Senate hearing Thu Jan 31 2013 02:04:13 GMT+0800 (China Standard
Time)

Democrats looking to sustain public pressure for new gun laws in the wake of the Newtown shootings clashed Wednesday with Republicans and the National Rifle Association over universal background checks. Menendez pays doctor for Dominican Republic flights Thu Jan 31 2013 03:49:15 GMT+0800 (China Standard Time) Sen. Robert Menendez wrote a $58,500 check to a South Florida doctor and political fundraiser for two personal flights to the Dominican Republic, his office confirmed to NBC News. Boy snatched from school bus, held hostage Wed Jan 30 2013 17:47:26 GMT+0800 (China Standard Time) A boy was being held hostage in a bunker in Alabama by a man who seized him from a school bus after fatally shooting the driver, witnesses and police said.

To use this script, just call: n e wr s s d i s p l a y e r ( " d i v i d " ," r s s u r l " ,n u m b e r o f i t e m s ," d i s p l a y o p t i o n s " ) where you wish the feed to be displayed on the page, It should be initialized with the following four parameters: 1. 2. 3. 4. "divid": The ID of the DIV that will house the RSS feed. DIV is dynamically created. "rssurl": The full URL to the valid RSS feed on the web. numberofitems: The number of entries to fetch from the feed. "displayoptions": Optional string that sets whether to show the "date" and/or "description" portion of each entry. Valid values are any combination of "d a t e ", "d e s c r i p t i o n ", and "s n i p p e t ", for example: "d a t e ,s n i p p e t ". Note that the difference between "d e s c r i p t i o n " and "s n i p p e t " is that the later trims the description to less than 120 characters and no HTML. NLP

K ~ ~ K L L ~ ~ PK

NLPNLNP

^= = o pp= c = ~

Sometimes instead of the full description of each RSS entry, you may want to show the abbreviated version instead, without the HTML tags and shortened. In such cases, instead of passing in "d e s c r i p t i o n " for the 4th parameter above, use "s n i p p e t " instead: n e wr s s d i s p l a y e r ( " m s n d i v " ," h t t p : / / w w w . m s n b c . m s n . c o m / i d / 3 0 3 2 0 9 1 / d e v i c e / r s s / r s s . x m l " ,4 ," d a t e ,s n i p p e t " ) Lets use this script now to just display the headlines of a feed, in this case, CSS Drive: < s c r i p tt y p e = " t e x t / j a v a s c r i p t " > / / U S A G ES Y N T A X :n e wr s s d i s p l a y e r ( " d i v i d " ," r s s u r l " ,n u m b e r o f i t e m s ," d i s p l a y o p t i o n s " ) n e wr s s d i s p l a y e r ( " c s s d r i v e " ," h t t p : / / w w w . c s s d r i v e . c o m / i n d e x . p h p / n e w s / r s s _ 2 . 0 / " ,1 0 ," d a t e " ) < / s c r i p t > Here's the output: PlaceIt screenshot over environments service Wed Jan 09 2013 22:30:00 GMT+0800 (China Standard Time) JavaScript Garden Fri Jan 04 2013 23:28:00 GMT+0800 (China Standard Time) Photobox image gallery Tue Jan 01 2013 13:00:01 GMT+0800 (China Standard Time) DD ScrollSpy Menu Sun Dec 30 2012 20:00:00 GMT+0800 (China Standard Time) Customizing Order List style using CSS Sat Dec 08 2012 07:36:00 GMT+0800 (China Standard Time) Multi-zoom Image script Wed Dec 05 2012 07:14:01 GMT+0800 (China Standard Time) Batch 300 icons Mon Nov 26 2012 22:57:01 GMT+0800 (China Standard Time) IE10 Preview for Windows 7 released! Wed Nov 14 2012 09:46:00 GMT+0800 (China Standard Time) jQuery Animated UL lists Wed Nov 14 2012 08:53:01 GMT+0800 (China Standard Time) CSS 3D Depressible Button Tue Nov 06 2012 00:38:00 GMT+0800 (China Standard Time)

rssdisplayer.js source
Obviously this script references the external .js file rssdisplayer.js. For your convenience, here's the source: g o o g l e . l o a d ( " f e e d s " ," 1 " )/ / L o a dG o o g l eA j a xF e e dA P I( v e r s i o n1 ) f u n c t i o nr s s d i s p l a y e r ( d i v i d ,u r l ,f e e d l i m i t ,s h o w o p t i o n s ) { t h i s . s h o w o p t i o n s = s h o w o p t i o n s| |" "/ / g e ts t r i n go fo p t i o n st os h o w( " d a t e "a n d / o r" d e s c r i p t i o n " ) v a rf e e d p o i n t e r = n e wg o o g l e . f e e d s . F e e d ( u r l )/ / c r e a t en e wi n s t a n c eo fG o o g l eA j a xF e e dA P I f e e d p o i n t e r . s e t N u m E n t r i e s ( f e e d l i m i t )/ / s e tn u m b e ro fi t e m st od i s p l a y d o c u m e n t . w r i t e ( ' < d i vi d = " ' + d i v i d + ' " > L o a d i n gf e e d . . . < / d i v > ' ) t h i s . f e e d c o n t a i n e r = d o c u m e n t . g e t E l e m e n t B y I d ( d i v i d ) v a rd i s p l a y e r = t h i s f e e d p o i n t e r . l o a d ( f u n c t i o n ( r ) { d i s p l a y e r . f o r m a t o u t p u t ( r ) } )/ / c a l lF e e d . l o a d ( )t or e t r i e v ea n do u t p u tR S Sf e e d }

r s s d i s p l a y e r . p r o t o t y p e . f o r m a t d a t e = f u n c t i o n ( d a t e s t r ) { v a ri t e m d a t e = n e wD a t e ( d a t e s t r ) r e t u r n" < s p a ns t y l e = ' c o l o r : g r a y ;f o n t s i z e :9 0 % ' > " + i t e m d a t e . t o L o c a l e S t r i n g ( ) + " < / s p a n > " }

r s s d i s p l a y e r . p r o t o t y p e . f o r m a t o u t p u t = f u n c t i o n ( r e s u l t ) { i f( ! r e s u l t . e r r o r ) {/ / i fR S Sf e e ds u c c e s s f u l l yf e t c h e d v a rt h e f e e d s = r e s u l t . f e e d . e n t r i e s/ / g e ta l lf e e de n t r i e sa saJ S O Na r r a y v a rr s s o u t p u t = " < u l > " f o r( v a ri = 0 ;i < t h e f e e d s . l e n g t h ;i + + ) {/ / l o o pt h r o u g he n t r i e s v a ri t e m t i t l e = " < ah r e f = \ " "+t h e f e e d s [ i ] . l i n k+" \ " > "+t h e f e e d s [ i ] . t i t l e+" < / a > " v a ri t e m d a t e = / d a t e / i . t e s t ( t h i s . s h o w o p t i o n s ) ?t h i s . f o r m a t d a t e ( t h e f e e d s [ i ] . p u b l i s h e d D a t e ):" " v a ri t e m d e s c r i p t i o n = / d e s c r i p t i o n / i . t e s t ( t h i s . s h o w o p t i o n s ) ?" < b r/ > " + t h e f e e d s [ i ] . c o n t e n t:" " r s s o u t p u t + = " < l i > "+i t e m t i t l e+""+i t e m d a t e+i t e m d e s c r i p t i o n+" < / l i > " } r s s o u t p u t + = " < / u l > " t h i s . f e e d c o n t a i n e r . i n n e r H T M L = r s s o u t p u t } e l s e/ / e l s e ,o u t p u te r r o r a l e r t ( " E r r o rf e t c h i n gf e e d s :" + r e s u l t . e r r o r . m e s s a g e ) K ~ ~ K L L ~ ~ PK OLP

NLPNLNP }

^= = o pp= c = ~

/ / U S A G ES Y N T A X :n e wr s s d i s p l a y e r ( " d i v i d " ," r s s u r l " ,n u m b e r o f i t e m s ," d i s p l a y o p t i o n s " ) / / n e wr s s d i s p l a y e r ( " a d i v " ," h t t p : / / w w w . c s s d r i v e . c o m / i n d e x . p h p / n e w s / r s s _ 2 . 0 / " ,5 ," d a t e ,d e s c r i p t i o n " ) And with that we come to an end of this tutorial. Hope it makes life easier for you when it comes to showing RSS feeds on your site. 1. Displaying RSS feeds easily using Google Ajax Feed API (intro) 2. Detailed look at Google.feeds.Feed.class 3. A robust RSS feed displayer

Copyright 1997-2012 JavaScript Kit. NO PART may be reproduced without author's permission.

K ~ ~ K L L ~ ~ PK

PLP