Digging My Blog

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.