Load annotator comments in a weblog sidebar

gistfile1.js

<!-- make sure to include this after jquery -->
<script type="text/javascript">
  jQuery(function ($) {

    /**
     * Populates a DOM element with Annotator data 
     *
     * Params:
     *
     * annotations     - The data fetched from the Annotator api endpoint.
     * widgetSelector  - CSS3 selector for the dom element within which the annotations will be loaded
     *
     * 
     * Returns nothing.
     *
     */
 
    function populateWidget(annotations, widgetSelector) {
      var listWrapper = $("<ul><h3>Latest annotations</h3></ul>");

      $.each(annotations, function (index, annotation) {
        var listItem = $("<li>" +
          "<span>" + annotation.text + "</span>" +
          ' on <quote><a href="' + annotation.uri + '">' +  annotation.quote + "</a>" + "</quote>" +
          "</li>"
        );
        listWrapper.find("h3").append(listItem);
      });


      $(widgetSelector).append(listWrapper);
    }


    // create the element wherein the annotation data will be displayed.
    // remove this line if the container element you want to use is already in the document

    $("li#user-login").after($('<li id="my-widget"></li>'));

   
    // replace this with your Annotateit account id.
    var accountId="39fc339cf058bd22176771b3e318869b";

    var widgetSelector = "#my-widget";

    // fetch all the annotations created for a specific Annotator account
    // API documentation here: https://github.com/okfn/annotator-store

    $.ajax({
      type: 'get',
      url: "http://annotateit.org/api/search?account_id=" + accountId,
      success: function (data, status, xhr) {
        populateWidget(data.rows, widgetSelector);
      }
    });

  });
</script>