Add a Google Reader Shared Items widget to any site with jQuery
The final new widget for my home page to document is the “Latest Shared Feed Items” widget. This one displays the last 3 items that I’ve shared from Google Reader. I’m no longer displaying this widget but it was a custom designed plug-in (for the most part) so I wanted to share the code.
Like the previously discussed widgets this one uses no server-side code it is all JavaScript. I could not find a “stock” jQuery plugin that I liked for displaying Google Reader Shared Items so I took information learned from the article “Processing an RSS Feed with Javascript using Google Reader + JSON + jQuery” and combined it with a modified version of the YouTube plugin that I used previously to create a plugin that did what I needed.
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();
}
(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);I placed the above code in a file named jquery.googlereader.shared.js. To implement you just need to add a script reference to that file and the jQuery library, a container to hold the rendered HTML, a few lines of JavaScript to wire everything up, and finally some CSS tweaks to display as desired.
<script type=”text/javascript”
src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script>
<script type=”text/javascript” src=”jquery.googlereader.shared.js”></script>
<div id="googleshareditems" class="googleshareditems"></div>
<script type="text/javascript">
$(document).ready(function() {
$('#googleshareditems').googleReaderShared({
userName: 'your google reader user id goes here',
numberToDisplay: 3
});
});
</script>You now have a Google Reader Shared Items widget! I hope you find it useful.