FriendFeed provides a super API for getting access to posts and doing things like creating likes or comments. Those that don’t require a login, search or display of posts, can be done in JavaScript.

In my previous post I explained why I moved to using FriendFeed to handle my blog comments – how hosting my blog on GitHub works for my git-based workflow. Here’s how display the appropriate FriendFeed posts, using nothing but JavaScript. Here’s what this code does:

• It shows all FriendFeed items that link to a particular post. There can be more than one of these, we show them all
• Each FriendFeed thread can have many comments. We show all of those, too
• A link connects to the thread on FriendFeed, which is where folks must go to comment

The disadvantage is that somebody needs a FriendFeed login to leave a comment. Because FF accepts FaceBook, Google or Twitter logins, though, that may not be such a big hurdle

h3. Querying FriendFeed

FriendFeed’s API let’s you pull a JSON version of posts and comments with a single query.

http://friendfeed.com/api/feed/url?url=[your url here]

This gives us every FriendFeed item that refers to a particular URL. (The current post, in this case.) Those results come back in JSON format, where we can act on them in script. For convenience, FF let’s us name a JavaScript function that will be called when we get the data. I’ve called mine ffDisplay, as you can see.

callback=ffDisplay

To get this to work, we put the url and callback parameter together in a script tag, like this:

<script type="text/javascript"
  src="http://friendfeed.com/api/feed/url?url=http://el-studio.com/code/howto-include-friendfeed-comments-javascript&amp;callback=ffDisplay"
  defer="true"></script>

Then it’s up to us to format these the way we want. To do this, we’ll need our ffDisplay function This simply walks the structure of the JSON results, as documented by the FriendFeed API. We also need a place on the page to put the comments. This script puts comments inside a div with an id of “ff_comments”.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function ffDisplay(ff) {
  var results = "";
  if (ff.entries.length > 0) {
    results = "<p>Join one of these FriendFeed discussions:</p>\n\n"
    for(i=0; i<ff.entries.length; i++) {
      entry = ff.entries[i];
      var url = entry.link;
      // FF doesn't give us the url to items from a user's feed,
      // so we have to be sneaky here
      if (!url.match(/^http:\/\/friendfeed.com/)) {
        url = "http://friendfeed.com/" + entry.user.nickname + "/" + entry.id.substr(0,8);
      }
      results += "<div class='ff-comment'>\n";
      results += "<p><span class='slug'>" + entry.user.name.replace('<', '&lt;') + "</span><a href='" + url + "'>" + entry.title.replace('<', '&lt;') +
        "</a> <span class='likes byline'>" + entry.likes.length + " likes</span></p>\n";
      if (entry.comments.length > 0) {
        results += "<ul>";
        for (c=0; c<entry.comments.length; c++) {
          var comment = entry.comments[c];
          results += "<li>" + comment.body.replace('<', '&lt;') + " <span class='byline likes'>" + comment.user.name.replace('<', '&lt;') + "</span> " + "</li>\n";
        }
        results += "</ul>\n";
      }
      results += "</div>\n\n";
    }
  }
  document.getElementById('ff_comments').innerHTML = results;
}

As the comment on lines 8 and 9 notes, there is one tricky thing here. The url value in the JSON is either the URL we want (the one for the FriendFeed discussion) or the blog post’s URL (which we don’t want). In our case, anything that’s not a FriendFeed URL points to the original post. To link to the FriendFeed discusion, we combine the userid and post id into an undocumented FriendFeed URL that works just fine. I hope this behavior doesn’t break in the future.

So there we go. FriendFeed comments on page, courtesy of the FriendFeed API and JavaScript.

One last plug for the FriendFeed API. JavaScript just touches the surface of that API. If you’re using WordPress or MovableType to run your blog, there are other options. Look for the FriendFeed Comments plugin for WordPress or an import plugin for MovableType. But if you’re limited to JavaScript by something like Jekyll or Blogger, then this JavaScript method just might work for you.

Let me know how it goes in the (FriendFeed) comments.