Commently

Maybyly I am taking the naming too far, but this is a simple service that allows you to embed comments into your blogging platform.

The comments are synchronized with Buzz based on the feed that you push to Buzz.

It is super simple to start, simply embed the following javascript into your blog or website

Get the Source

All of the source is available on GitHub at https://github.com/PaulKinlan/commently. Fork to your hearts content!

The 10 second "Getting Started" guide

<script>
  var handler = function(data) {
    // data is an Buzz activity
    
    // data.replies is a list of the replies to the thread
    
    // data.likes is a list of the user likes on the thread
  };
</script>
<script src="/lib/comments.js?title=[Blog Title]&username=[Username]&callback=handler">
</script>

Simply replace [Username] with your buzz name (paul.kinlan in my case); replace [Blog Title] with a url encoded title of your article as it appears in your ATOM or RSS feed; fill out the "handler" function with logic to construct a nice looking area for the comments.

Server-side Embed

It is possible to use the JS code on the server side of your application or blog, but what if you want to simply get some HTML rather than mess about with JS objects?

Luckily, that is possible too, simply change the .js to .html to get a nice an clean HTML representation of the comments with sensible CSS class-names so that you can style it up easily.

See a demo here

The code for this page

<script>
  var handler = function(data) {
    var replies = data.object.comments;
    var commentsContainer = document.getElementById("comments");
    
    for(var r in replies) {
      var reply = replies[r];
      var commentElement = document.createElement("div");
      commentElement.className = "buzz-comment"
      
      var content = document.createElement("div");
      content.textContent = reply.content;
      content.className = "buzz-content";
      
      var name = document.createElement("div");
      name.textContent = reply.actor.name;
      name.className = "buzz-name";
      
      var actor = new Image();
      actor.src = reply.actor.thumbnailUrl;
      actor.className = "buzz-actor";
      
      commentsContainer.appendChild(actor);
      commentsContainer.appendChild(name);
      commentsContainer.appendChild(content);
      
      commentsContainer.appendChild(commentElement);
    }
  };
</script>
<script src="/lib/comments.js?title=[Blog Title]&actor.profileUrl=http://www.google.com/profiles/[Username]&callback=handler">
</script>

Comments for this page