While building my new blog's comment system I decided to just be lazy and use some other api. For this I decided to use the facebook API. I had previously built a comment system using a modified PHP API, but this time I had no reason to need to run it through my own backend.

Adding the comment box is extremely simply and only needs to use the fb:comments XFBML. it looks a little like this.

<fb:comments url="http://devin.co/blog/ID" xid="devin-blog-ID" numposts="100" width="650">

By specifying a url we can make sure that the likes for the page stay the same even if the title or url of the page changes slightly.

Now that I can receive comments and likes, I needed to get a summary of this info for multiple blog entries on the main blog page. I could have easily added a like button or looped through all the blog entries and queried them with fql.query, but I wanted to get all the info all at once.

My html markup looks something like this

Next I want to loop through all of the blog elements and build a multiquery for fql. Then loop through all the results and update all the blog entries with their counts.

q = ''; // loop through each blog element $('.blog-entry').each(function(i) { // add the comments count query q += (q ? ',' : '') + '"blog-query-' + (i2+1) + '": "select count from comments_info where xid='' + $(this).attr('xid') + '' and app_id=' + FB._apiKey + '"'; // add the like count query q += ',"blog-query-' + (i2+2) + '": "select like_count from link_stat where url='http://' + window.location.hostname + '/blog/' + $(this).attr('xid').replace(/^.*-([\d]+)$/,'$1') + ''"'; }); q = '{' + q + '}';

// send the api request FB.api( { method: 'fql.multiquery', queries: q }, function(r) { $('.blog-entry').each(function(i) { for (x in r) { if (r[x].name == 'blog-query-'+(i2+1)) { // assign the count of the comments $(this) .find('.blog-info-comment .blog-info-text') .html(r[x].fql_result_set.length ? r[x].fql_result_set[0].count : '0'); } else if (r[x].name == 'blog-query-'+(i2+2)) { // assign the count of the likes $(this) .find('.blog-info-like .blog-info-text') .html(r[x].fql_result_set.length ? r[x].fql_result_set[0].like_count : '0'); } } }); } );