Google AJAX Feed API Example with Socialbrowse

Today I learned that Google has a really awesome AJAX API for RSS and Atom feeds. It allows you to access RSS or Atom feeds using JavaScript in both JSON and XML format without having to setup your own proxy or deal with anything on the server side.

They have a lot of great examples, but I thought I’d share mine with the usecase of showing the feed of my Socialbrowse shares. In your Socialbrowse settings you can specify a public share name. Once added 3 feeds will be created for you

profile: http://socialbrowse.com/shares/PUBLIC_NAME/
shares rss: http://socialbrowse.com/rss/uname/PUBLIC_NAME/
feed rss: http://socialbrowse.com/rss/socialfeed/PUBLIC_NAME/

where PUBLIC_NAME is the share name you chose.

For this example we’re going to fetch and display the “shares rss” feed using the Google AJAX Feeds API. The example is simulating the Socialbrowse blog widget Zack created a few months ago.

To use the Feeds API you need to get a key.

Now we have everything we need. Create an HTML file and paste in the following code. Make sure to change YOUR_API_KEY, and the feed_title and feed_url variables to your values.

<html>
  <head>
	
	<script>
	  var feed_title = "Dave's Socialbrowse Feed";
	  var feed_url = "http://socialbrowse.com/rss/uname/PUBLIC_NAME/";
	</script>

    <script  type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAmcnSI-mFmfJW8bidL13qfRQHElLAWyCZ_TZ_pzrAvWp3ncTV5hRgCPRM76Ub8GIqowNBQZMVWYastg"></script>
    <script type="text/javascript">

      google.load("feeds", "1");

      function initialize() {
        var feedControl = new google.feeds.FeedControl();
        feedControl.addFeed(feed_url, feed_title);
        feedControl.draw(document.getElementById("feedControl"));
      }
      google.setOnLoadCallback(initialize);

    </script>
  </head>

  <body>
    <div id="feedControl">Loading</div>
  </body>
</html>

Viewing the page in a browser will result in something that looks like this

feed

Its not very pretty but its easy enough to style it however you like using CSS. This code can be added anywhere you’d like to display your Socialbrowse shares.

Finally, note that this code can be used with any feed, not just Socialbrowse. If you want to display the latest Google News for example simply change the feed variables to

	  var feed_title = "Google News";
	  var feed_url = "http://news.google.com/news?pz=1&ned=us&hl=en&topic=h&num=3&output=rss";
Advertisements
1 comment
  1. Pavan said:

    can u give me the code to display 2 options .. based on user choice we can give the news

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s