jQuery Get RSS Feed Live Reader


/ Published in: jQuery
Save to your folder(s)

Use jQuery get rss (with JavaScript) to get a blogs (or websites) display rss feed on your web page.


Copy this code and paste it in your HTML
  1. var gfeedfetcher_loading_image="/images/page-images/loader.gif" //Full URL to "loading" image. No need to config after this line!!
  2.  
  3. google.load("feeds", "1") //Load Google Ajax Feed API (version 1)
  4.  
  5. function gfeedfetcher(divid, divClass, linktarget){
  6. this.linktarget=linktarget || "" //link target of RSS entries
  7. this.feedlabels=[] //array holding lables for each RSS feed
  8. this.feedurls=[]
  9. this.feeds=[] //array holding combined RSS feeds' entries from Feed API (result.feed.entries)
  10. this.feedsfetched=0 //number of feeds fetched
  11. this.feedlimit=5
  12. this.showoptions="" //Optional components of RSS entry to show (none by default)
  13. this.sortstring="date" //sort by "date" by default
  14. document.write('<div id="'+divid+'" class="'+divClass+'"></div>') //output div to contain RSS entries
  15. this.feedcontainer=document.getElementById(divid)
  16. this.itemcontainer="<li>" //default element wrapping around each RSS entry item
  17. }
  18.  
  19. gfeedfetcher.prototype.addFeed=function(label, url){
  20. this.feedlabels[this.feedlabels.length]=label
  21. this.feedurls[this.feedurls.length]=url
  22. }
  23.  
  24. gfeedfetcher.prototype.filterfeed=function(feedlimit, sortstr){
  25. this.feedlimit=feedlimit
  26. if (typeof sortstr!="undefined")
  27. this.sortstring=sortstr
  28. }
  29.  
  30. gfeedfetcher.prototype.displayoptions=function(parts){
  31. this.showoptions=parts //set RSS entry options to show ("date, datetime, time, snippet, label, description")
  32. }
  33.  
  34. gfeedfetcher.prototype.setentrycontainer=function(containerstr){ //set element that should wrap around each RSS entry item
  35. this.itemcontainer="<"+containerstr.toLowerCase()+">"
  36. }
  37.  
  38. gfeedfetcher.prototype.init=function(){
  39. this.feedsfetched=0 //reset number of feeds fetched to 0 (in case init() is called more than once)
  40. this.feeds=[] //reset feeds[] array to empty (in case init() is called more than once)
  41. this.feedcontainer.innerHTML='<p><img class="textmiddle" src="'+gfeedfetcher_loading_image+'" /> Loading <a href="http://blogoola.com" title="Submit your blog">blog</a> feeds...</p>'
  42. var displayer=this
  43. for (var i=0; i<this.feedurls.length; i++){ //loop through the specified RSS feeds' URLs
  44. var feedpointer=new google.feeds.Feed(this.feedurls[i]) //create new instance of Google Ajax Feed API
  45. var items_to_show=(this.feedlimit<=this.feedurls.length)? 1 : Math.floor(this.feedlimit/this.feedurls.length) //Calculate # of entries to show for each RSS feed
  46. if (this.feedlimit%this.feedurls.length>0 && this.feedlimit>this.feedurls.length && i==this.feedurls.length-1) //If this is the last RSS feed, and feedlimit/feedurls.length yields a remainder
  47. items_to_show+=(this.feedlimit%this.feedurls.length) //Add that remainder to the number of entries to show for last RSS feed
  48. feedpointer.setNumEntries(items_to_show) //set number of items to display
  49. feedpointer.load(function(label){
  50. return function(r){
  51. displayer._fetch_data_as_array(r, label)
  52. }
  53. }(this.feedlabels[i])) //call Feed.load() to retrieve and output RSS feed.
  54. }
  55. }
  56.  
  57. gfeedfetcher._formatdate=function(datestr, showoptions){
  58. var itemdate=new Date(datestr)
  59. var parseddate=(showoptions.indexOf("datetime")!=-1)? itemdate.toLocaleString() : (showoptions.indexOf("date")!=-1)? itemdate.toLocaleDateString() : (showoptions.indexOf("time")!=-1)? itemdate.toLocaleTimeString() : ""
  60. return "<span class='datefield'>"+parseddate+"</span>"
  61. }
  62.  
  63. gfeedfetcher._sortarray=function(arr, sortstr){
  64. var sortstr=(sortstr=="label")? "ddlabel" : sortstr //change "label" string (if entered) to "ddlabel" instead, for internal use
  65. if (sortstr=="title" || sortstr=="ddlabel"){ //sort array by "title" or "ddlabel" property of RSS feed entries[]
  66. arr.sort(function(a,b){
  67. var fielda=a[sortstr].toLowerCase()
  68. var fieldb=b[sortstr].toLowerCase()
  69. return (fielda<fieldb)? -1 : (fielda>fieldb)? 1 : 0
  70. })
  71. }
  72. else{ //else, sort by "publishedDate" property (using error handling, as "publishedDate" may not be a valid date str if an error has occured while getting feed
  73. try{
  74. arr.sort(function(a,b){return new Date(b.publishedDate)-new Date(a.publishedDate)})
  75. }
  76. catch(err){}
  77. }
  78. }
  79.  
  80. gfeedfetcher.prototype._fetch_data_as_array=function(result, ddlabel){
  81. var thisfeed=(!result.error)? result.feed.entries : "" //get all feed entries as a JSON array or "" if failed
  82. if (thisfeed==""){ //if error has occured fetching feed
  83. alert("Some blog posts could not be loaded: "+result.error.message)
  84. }
  85. for (var i=0; i<thisfeed.length; i++){ //For each entry within feed
  86. result.feed.entries[i].ddlabel=ddlabel //extend it with a "ddlabel" property
  87. }
  88. this.feeds=this.feeds.concat(thisfeed) //add entry to array holding all feed entries
  89. this._signaldownloadcomplete() //signal the retrieval of this feed as complete (and move on to next one if defined)
  90. }
  91.  
  92. gfeedfetcher.prototype._signaldownloadcomplete=function(){
  93. this.feedsfetched+=1
  94. if (this.feedsfetched==this.feedurls.length) //if all feeds fetched
  95. this._displayresult(this.feeds) //display results
  96. }
  97.  
  98. gfeedfetcher.prototype._displayresult=function(feeds){
  99. var rssoutput=(this.itemcontainer=="<li>")? "<ul>\n" : ""
  100. gfeedfetcher._sortarray(feeds, this.sortstring)
  101. for (var i=0; i<feeds.length; i++){
  102. var itemtitle="<a rel=\"nofollow\" href=\"" + feeds[i].link + "\" target=\"" + this.linktarget + "\" class=\"titlefield\">" + feeds[i].title + "</a>"
  103. var itemlabel=/label/i.test(this.showoptions)? '<span class="labelfield">['+this.feeds[i].ddlabel+']</span>' : " "
  104. var itemdate=gfeedfetcher._formatdate(feeds[i].publishedDate, this.showoptions)
  105. var itemdescription=/description/i.test(this.showoptions)? "<br />"+feeds[i].content : /snippet/i.test(this.showoptions)? "<br />"+feeds[i].contentSnippet : ""
  106. rssoutput+=this.itemcontainer + itemtitle + " " + itemlabel + " " + itemdate + "\n" + itemdescription + this.itemcontainer.replace("<", "</") + "\n\n"
  107. }
  108. rssoutput+=(this.itemcontainer=="<li>")? "</ul>" : ""
  109. this.feedcontainer.innerHTML=rssoutput
  110. }

URL: http://www.jquery4u.com/plugins/jquery-rss-feed-display-live/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.