Unobtrusive Google Reader Shared Items Badge

This is a small script that allows you to add items you shared on Google Reader unobtrusively into your pages.

Example

Usage

To use the badge, simply add a link to your shared reader items and the script itself, for example:

<div id="greader-shared-items" class="items5">
  <p>
    <a href="http://www.google.com/reader/shared/07479231772993841072">My Shared Items on Google Reader</a>
  </p>
</div>
<script src="google-reader-badge-v1.0.js"></script>

The greader-shared-items ID is mandatory and the items5 class defines how many items you want to display. If you want 10 items, make it items10. If you don't provide a class the script has a pre-set of five items.

Full source

1:	greaderbadge = function(){
2:	  var config = {
3:	    amount:5,
4:	    id:'greader-shared-items',
5:	    loadingMessage:' (loading)'
6:	  };
7:	  var out = false;
8:	  var source = false;
9:	  function init(){
10:	    out = document.getElementById(config.id);
11:	    if(out){ 
12:	      if(out.className.indexOf('items')!==-1){
13:	        var amount = out.className.match(/items([\d]+)/);
14:	      };
15:	      var amount = amount[1] || config.amount;
16:	      source = out.getElementsByTagName('a')[0];
17:	      var id = source.href.replace(/.*\/+/,'');
18:	      var loadingNode = document.createTextNode(config.loadingMessage);
19:	      source.appendChild(loadingNode);
20:	      var url = 'http://www.google.com/reader/public/javascript/user/' + 
21:	                 id + '/state/com.google/broadcast?n=' +
22:	                 amount + '&callback=greaderbadge.seed';
23:	      var s = document.createElement('script');
24:	      s.setAttribute('type','text/javascript');
25:	      s.setAttribute('charset','utf-8');
26:	      s.setAttribute('src',url);
27:	      document.getElementsByTagName('head')[0].appendChild(s);
28:	    }
29:	  }
30:	  function seed(data){
31:	    var html = [];
32:	    html.push('<ul>');
33:	    var is = data.items;
34:	    for(var i=0,j=is.length;i<j;i++){
35:	      html.push('<li>');
36:	      html.push('<a href="'+is[i].alternate.href+'">'+is[i].title+'</a>');
37:	      html.push('</li>');
38:	    }
39:	    html.push('</ul>');
40:	    source.removeChild(source.lastChild);
41:	    out.innerHTML += html.join('');
42:	  }
43:	  return {init:init,seed:seed};
44:	}();
45:	greaderbadge.init();

Explanations

1:	greaderbadge = function(){

The configuration object, you can specify the amount of links being displayed and the id of the DIV that should get the links.

2:	  var config = {
3:	    amount:5,
4:	    id:'greader-shared-items',
5:	    loadingMessage:' (loading)'
6:	  };

Assume the right elements are not available.

7:	  var out = false;
8:	  var source = false;
9:	  function init(){

Check if it is available, rejoice if it is and start the show.

10:	    out = document.getElementById(config.id);
11:	    if(out){ 

Check if there is a class with the name items and if there is, get the amount of links to display from it. If there isn't, just use the pre-set amount of links defined in the config.

12:	      if(out.className.indexOf('items')!==-1){
13:	        var amount = out.className.match(/items([\d]+)/);
14:	      };
15:	      var amount = amount[1] || config.amount;

Grab the first link inside the container and get the id from it.

16:	      source = out.getElementsByTagName('a')[0];
17:	      var id = source.href.replace(/.*\/+/,'');

Then add the loading message.

18:	      var loadingNode = document.createTextNode(config.loadingMessage);
19:	      source.appendChild(loadingNode);

Assemble the correct URL for the REST API, and create a script node calling it.

20:	      var url = 'http://www.google.com/reader/public/javascript/user/' + 
21:	                 id + '/state/com.google/broadcast?n=' +
22:	                 amount + '&callback=greaderbadge.seed';
23:	      var s = document.createElement('script');
24:	      s.setAttribute('type','text/javascript');
25:	      s.setAttribute('charset','utf-8');
26:	      s.setAttribute('src',url);
27:	      document.getElementsByTagName('head')[0].appendChild(s);
28:	    }
29:	  }

The seed() method will be called when the REST call was successful.

30:	  function seed(data){

Start a new array and push in the HTML we want to create. Start with the UL and then loop over the items in the data returned from the API. Add link items for each entry and a link pointing to the right resource with the title as the link text.

31:	    var html = [];
32:	    html.push('<ul>');
33:	    var is = data.items;
34:	    for(var i=0,j=is.length;i<j;i++){
35:	      html.push('<li>');
36:	      html.push('<a href="'+is[i].alternate.href+'">'+is[i].title+'</a>');
37:	      html.push('</li>');
38:	    }
39:	    html.push('</ul>');

Remove the loading message and append the final HTML to the innerHTML of the badge container and

40:	    source.removeChild(source.lastChild);
41:	    out.innerHTML += html.join('');
42:	  }

Both the init() method and the seed() method need to be public.

43:	  return {init:init,seed:seed};
44:	}();

Call the init() method once the whole object was created (this is an Opera fix).

45:	greaderbadge.init();