Surfacing Google Sidewiki Comments Within a Web Page

As recent readers may know, I’ve been blogging lately over on the Arcadia Project Blog, a site I have authoring permissions on but not admin rights. At the moment, comments on the site seem to be disabled except to project team members (I’m not sure how they are whitelisted?), which is a bit of a pain because I want wider comments on the site.

So what to do? The blog is hosted on Blogspot, which means I can add embed codes and javascript to a post and hence embed a Disqus comment thread on each post I write.

Alternatively, (additionally), commenters who are running the enhanced Google Toolbar can comment on the page using Google Sidewiki.

Sidewiki is all well and good (or, errr, not – maybe it’s really evil…?) but it means that unless you’re logged in to Google and running the Google toolbar, or you’ve got a Greasemonkey script or bookmarklet to check for Sidewiki comments related to a page you’re probably not going to see the Sidewiki comments.

Fortunately, for the moment at least, Sidewiki comments for a page can be accessed without authentication via a GData/RSS feed: Retrieving Sidewiki entries written for a particular web page:

GET http://www.google.com/sidewiki/feeds/entries/webpage/webpageUri/full

where webpageUri is the URI of the page you want to see comments for, suitably encoded. In Javascript, I think encodeURIComponent(window.location) should do the trick…

How to get a JSON version of the feed, wrapped in a callback function that can be used to display the feed, is documented on the GData API site: Using JSON with Google Data APIs – just add ?alt=json-in-script&callback=myFunction.

Reusing the sample code on the GData site, it was easy enough to create a function to display a Sidewiki comment feed for a particular page:

<div id="demo"></div>

<script type="text/javascript">
function c(root) {
  var feed=root.feed;
  var entries=feed.entry || [];
  var html=['<ul>'];
  for (var i=0; i < entries.length; ++i) {
    var entry=entries[i];
    var title=entry.title.$t;
    var description=entry.content.$t;
    var link=entry.link[0].href;
    html.push('<li><em><a href="',link,'">', title,'</a><br/>',description,'</em></li>');
  }
  html.push('</ul>');
  document.getElementById("demo").innerHTML=html.join("");
}
</script>

<script src="http://www.google.com/sidewiki/feeds/entries/webpage/http%3A%2F%2Farcadiaproject.blogspot.com%2F2009%2F10%2Fwanted-library-hardware-hacker-for.html/full?alt=json-in-script&callback=c">
</script>

Note that I have explicitly named the page for the feed I want in the above example and that WordPress has messed it up because I’m using the HTML code view. It should be:

http://www.google.com/sidewiki/feeds/entries/webpage/
http%3A%2F%2Farcadiaproject.blogspot.com%2F2009%2F10%2Fwanted-library-hardware-hacker-for.html/full?alt=json-in-script&callback=c

See it in action here: Wanted: Library Hardware Hacker for Desktop Tattle Tape Detector (bottom of the page).

A general purpose script would add the script dynamically using an encoded version of the URI for the current page. Something like this, maybe?

var s=document.createElement('script');
s.setAttribute('type','text/javascript');
var uri='http://www.google.com/sidewiki/feeds/entries/webpage/' + encodeURIComponent(window.location)+'/full?alt=json-in-script&callback=c';
s.setAttribute('src',uri);
document.body.appendChild(s);

Adding this function along with the c function and ‘demo’ ID’d display div to a page template should display any Google Sidewiki comments associated with a page within the page…

… which might be dangerous, of course, given the lack of control a page owner has over the Sidewiki comments associated with it…