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.

 Google Reader Shared Items

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.

Comments,

  • Trackbacks,
  • and Pingbacks
blog comments powered by Disqus

 

Trackbacks and Pingbacks


  1. You've been kicked (a good thing) - Trackback from DotNetKicks.com

  2. Pingback from Twitter Trackbacks for Add a Google Reader Shared Items widget to any site with jQuery : Digging My Blog [danhounshell.com] on Topsy.com

Shortcuts

Where is Dan?


My Blog
My Blog
Twitter
Twitter
Facebook
Facebook
LinkedIn
LinkedIn
Flickr
Flickr
YouTube
YouTube
Delicious
Delicious
Foursquare
Foursquare
Pinterest
Pinterest
GetGlue
GetGlue
Pintley
Pintley
XBOX Live
XBOX Live
Last.fm
Last.fm
Windows Live
Windows Live
Telligent.com
Telligent
Graffiti CMS on CodePlex
Graffiti CMS
Popular

Recent Posts