Geeks With Blogs

News These postings are provided "AS IS" with no warranties, and confers no rights.
Locations of visitors to this page virtusa corp sharepoint virtusa.com shehan peruma
Shehan Peruma

I was given with a simple requirement – create an online component that has the ability to pull RSS feeds asynchronously from websites.

I could have written a server control, but that would mean I would need to write the logic to read the xml and parse it. Totally doable, but it was late in the day when the requirement came in and I wasn’t about to slave over Visual Studio to write manage code. Smile OK, so long story short I used the Google Feed API to get the job done.

Assuming you know jQuery the code is pretty straightforward. I haven’t included any styling or any other scripts.

   1:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   2:  <html xmlns="http://www.w3.org/1999/xhtml">
   3:      <head>
   4:          <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
   5:          <title>Google Feed API Sample</title>
   6:      </head>
   7:      <body >
   8:          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
   9:          <script src="http://www.google.com/jsapi?key=AIzaSyA5m1Nc8ws2BbmPRwKu5gFradvD_hgq6G0" type="text/javascript"></script>
  10:          <script type="text/javascript">
  11:          /* http://code.google.com/apis/ajaxfeeds/documentation/reference.html#JSON */
  12:              
  13:              /*Array to hold the various feeds.*/
  14:              var myfeeds = new Array();
  15:              myfeeds[0] = new Feed("Facebook","https://www.facebook.com/feeds/page.php?id=85647828805&format=rss20",5);
  16:              myfeeds[1] = new Feed("Twitter","https://api.twitter.com/1/statuses/user_timeline/VirtusaCorp.rss",10);
  17:              myfeeds[2] = new Feed("Yahoo","http://feeds.finance.yahoo.com/rss/2.0/headline?s=VRTU&region=US&lang=en-US",2);
  18:              myfeeds[3] = new Feed("Nasdaq","http://articlefeeds.nasdaq.com/nasdaq/symbols?symbol=VRTU",10);
  19:   
  20:              /* Creates a Feed object */
  21:              /* name - Name of the feed. Will show-up as the button text */
  22:              /* uri - The location of the feed */
  23:              /* count - Number of items to be shown for the feed */
  24:              function Feed(name,uri,count)
  25:              {
  26:                  this.name=name;
  27:                  this.uri=uri;
  28:                  this.count=count;
  29:              }
  30:   
  31:              google.load("feeds", "1");
  32:   
  33:              /* Callback function when feed is loaded */
  34:              function feedLoaded(result)
  35:              {
  36:                  if (!result.error)
  37:                  {
  38:                      $("div#content").empty();
  39:                      $("div#content").append("<ul></ul>");
  40:                      /* iterates through the results and renders them on the page */
  41:                      for (var i = 0; i < result.feed.entries.length; i++)
  42:                      {
  43:                          var entry = result.feed.entries[i];
  44:                          if (entry.title != '')
  45:                              $("div#content ul").append("<li><a href='"+entry.link+"' target='_blank'>"+entry.title+"</a></li>");
  46:                      }
  47:                  }
  48:              }
  49:   
  50:              /* Click event for the feed buttons. Calls the Google API to load the feeds */
  51:              function LoadFeed(uri,count)
  52:              {
  53:                  $("div#content").empty();
  54:                  $("div#content").append("<p>Loading...</p>");        
  55:                  var feed = new google.feeds.Feed(uri);
  56:                  feed.setNumEntries(count);
  57:                  feed.setResultFormat(google.feeds.Feed.JSON_FORMAT);        
  58:                  feed.load(feedLoaded);
  59:              }
  60:              
  61:              /* Dynamically creates and renders the feed buttons based on the contents of the myfeeds array  */
  62:              function RenderButtons()
  63:              {            
  64:                  for (var i in myfeeds)
  65:                  {
  66:                      var markup = "<button type='button' onclick=\"javascript:LoadFeed('"+myfeeds[i].uri+"',"+myfeeds[i].count+");\">"+myfeeds[i].name+"</button>"
  67:                      $("div#buttons").append(markup);                    
  68:                  }
  69:              }
  70:              
  71:          </script>
  72:   
  73:          <div id="buttons"></div>
  74:          <div id="content"></div>
  75:          
  76:          <script>
  77:              RenderButtons();
  78:          </script>
  79:      </body>
  80:  </html>

 

Make sure you obtain an API key that is specific to your site to use in line #9. More info here.

All you need to do is update the myfeeds array with the list of your RSS feeds and the script will do the rest.

Have fun!

p.s. in the above sample, you might notice that I have all the script code within the <body> tag. I purposely did this so I would only have to copy the code within it an paste into a CEWP if I needed to use it in SharePoint.

 

Posted on Thursday, September 1, 2011 5:31 PM JavaScript , Development , jQuery | Back to top


Comments on this post: Google Feeds API

No comments posted yet.
Your comment:
 (will show your gravatar)


Copyright © shehan | Powered by: GeeksWithBlogs.net