Designing a Google Reader API Widget
Google Reader is a popular RSS platform put out by Google, Inc. They offer great syndication for some of the most popular news stories, articles, and any type of social media website. The service has been credited frequently for offering some of the best features for an online RSS reader.
In this short tutorial I’ll be showing how you can design a custom RSS widget to display your Google Reader count. This widget can be placed in the sidebar of your blog or personal website and it’s a great way to draw attention towards your works.
The end goal is to have a share list of the last 5 links from your Reader account. These are stories which you’ve read and shared to all of your followers – a simple goal.
The HTML Code
To start off we should get our core document ready. This means setting up our directory to house our JavaScript code and frontend HTML/CSS design.
We’ll be working within the jQuery library as well. This will make rapid prototyping much easier and allows for a quicker dev environment. You can access Google’s hosted version for a speedier performance.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="s.js"></script>
After the include for both our external script and the jQuery library we can get onto our main code. There isn’t much to cover, and if you understand even basic HTML/CSS this should be no problem.
Below we’ve got a sample HTML page with just the bare essentials. Our header contains all the code we’ll need for jQuery to run and have our external script pull Reader data. We have a div under the ID googleshareditems which will hold our return data.
Also the block of jQuery towards the bottom is used to adapt for each piece of data. The two variables should be self-explanatory, but in detail userName will hold your Reader ID so the parser can pull your latest shares. Consequentially numberToDisplay sets the variable for how many stories to pull.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Google Reader Shares</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="s.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#googleshareditems').googleReaderShared({
userName: 'your google reader user id goes here',
numberToDisplay: 5
});
});
</script>
</head>
<body>
<h1>Recent Google Shares</h1>
<div id="googleshareditems"></div>
</body>
</html>The JavaScript
Now we can get into the core of our script and figure out the inner workings. To start we set 3 constructor variables which can hold constant data throughout our script. We’ve also written a simple loop function titled RecieveData which, as the name suggests, will contain code to pull and receive our Reader shares.
The internals contain a simple counting loop which checks to see if our loop has reached the maximum number of stories. If not it’ll go through one more time and add to our counter until we hit the limit (in this case 5).
var __mainDiv; var __preLoaderHTML; var __opts;
function __ReceiveData(data) {
var cnt = 0;
$.each(data.items, function(i, e) {
if (cnt < __opts.numberToDisplay) {
var out = '<li><h3><a href="' + e.alternate.href + '" target="_blank" title="' +
e.title + '">' + e.title + '</a></h3><p>From: <a href="' +
e.origin.htmlUrl + '">' + e.origin.title + '</a>';
if (e.summary != null) { out = out + '<br />' + e.summary + ''; }
out = out + '</p></li>';
__mainDiv.append(out);
cnt = cnt + 1;
}
});
$(__preLoaderHTML).remove();
__mainDiv.show();
}
Next we just need a function to format our output. In this case we can write a brand new function passing in the jQuery object as our core parameter. This function is named googleReaderShared() and will put together all of our HTML output.
The lines within the if/else statement are creating a unique unordered list element and append all the JSON data inside. If no username (or in this case User ID) is presented, then we can’t gather any data and the attempt returns null.
(function($) {
$.fn.googleReaderShared = function(options) {
var readerDiv = $(this);
$.fn.googleReaderShared.defaults = {
userName: null,
loadingText: "Loading...",
numberToDisplay: 5
}
__opts = $.extend({}, $.fn.googleReaderShared.defaults, options);
if (__opts.userName != null) {
readerDiv.append("<ul id=\"reader_div\"></ul>");
__mainDiv = $("#reader_div");
__mainDiv.hide();
__preLoaderHTML = $("<p class=\"loader\">" + __opts.loadingText + "</p>");
readerDiv.append(__preLoaderHTML);
var urle = "http://www.google.com/reader/public/javascript/user/" +
__opts.userName + "/state/com.google/broadcast?callback=?";
$.getJSON(urle, function(data) { __ReceiveData(data); });
}
};
})(jQuery);
And that’s all there is to it! You can download the project source code below and try messing around with the script yourself. The only data you need to provide is your custom reader ID.
If you don’t know this off the top of your head (who does?) just log into your reader account and look for the “Sharing Settings” link under your followers list. Clicking that will offer you 2 options as either your Google username or your ID.
You can even prop this script up further with a bit of CSS design and even some backend code. This type of design makes a perfect widget for popular content management systems such as WordPress, Pligg, or Social Engine.
huh… sorry, where is the link to download??