OLD: FriendFeed Comments in Blogger



Update: This post is completely outdated and here for archival purposes only. None of this works anymore.
If you have any interest in getting it up and running again, all of the code can be found on GitHub. I am more than happy to accept Pull Requests, but probably won’t be investing too much effort, as I am no longer using FriendFeed nor Blogger. :(


Disclaimer: This post is very geeky has nothing to do with what I usually talk about, so unless you want to know how to integrate comments from FriendFeed with your Blogger blog, stop reading now. K-thanks.

Obviously, the best way to integrate comments from FriendFeed with Blogger comments would be using Blogger Data APIs. The people best positioned to accomplish this is the FriendFeed team themselves (through AuthSub authentication).

Until this happens, I’ve come up with a simple (relatively speaking) JavaScript solution that will display FriendFeed comments along with Blogger comments on post pages.

Remember, always back up your Blogger template before playing with the Widget Templates!!

If you’re using “the new Blogger” (if you have a hosted blog, chances are this is what you’re using)

<script> 
function friendfeedcomments(json) {
if (json.count > 0) {
var ffsection = ""
for (var i = 0; i < json.count; ++i) {
var ffcomment = json.value.items[i];
ffsection = ffsection + "<dt class='comment-author friendfeed-comment-icon'><a href='" + ffcomment.link + "'>" + ffcomment.title + "</a>"
ffsection = ffsection + " <data:commentPostedByMsg/></dt><dd class='comment-body'><p>" + ffcomment.description + "</p></dd>"
}
document.getElementById("comments-block").innerHTML = document.getElementById("comments-block").innerHTML + ffsection;
document.getElementById("comments").getElementsByTagName("h4")[0].innerHTML = (json.count + <data:post.numComments/>) + " 
<data:commentLabel/>:<br/><span style='font-size:.6em;font-weight:normal;'>Including comments from <a href='http://www.friendfeed.com/'>FriendFeed</a>"
}
}
</script>
<script expr:src='"http://pipes.yahoo.com/pathawks/ffcomments?_callback=friendfeedcomments&amp;_render=json&amp;ffid=YOUR_FRIENDFEED_NICKNAME&amp;url=" + data:post.url'>
</script>
#comments .friendfeed-comment-icon, .friendfeed-comment-icon { line-height:16px; background:url(http://friendfeed.com/static/images/icons/internal.png) left no-repeat; padding-left:20px; }

That should be it for the “new” Blogger.

If you’re using the “old” Blogger (like ftp publishing or classic templates) you’ll want to insert the following code right after the line </BlogItemComments>

<script>
function friendfeedcomments(json) {
if (json.count > 0) {
var ffsection = "<h4>FriendFeed Comments:</h4>"
for (var i = 0; i < json.count; ++i) {
var ffcomment = json.value.items[i];
ffsection = ffsection + "<dt class='comment-author friendfeed-comment-icon'><a href='" + ffcomment.link + "'>" + ffcomment.title + "</a>"
ffsection = ffsection + " says...</dt><dd class='comment-body'><p>" + ffcomment.description + "</p></dd>"
}
document.write(ffsection);
}
}
</script>
<script src='http://pipes.yahoo.com/pathawks/ffcomments?_callback=friendfeedcomments&amp;_render=json&ffid=YOUR_FRIENDFEED_NICKNAME&amp;url=<$BlogItemPermalinkUrl$>'>
</script>

For now, I’m going to bed…
and hoping for a comment from Louis Gray or Thomas Hawk.


Update: Well, I got my comment from Louis Gray (and a mention in his blog), and he says I rock.

I must admit, this is generating even more interest than I expected.

So a lot of people want “Likes” to be displayed as well.

Fair enough, I should have expected that.

My only question is, should one snippet of JavaScript display the likes and comments, or should I make a separate snippet for likes, so you could include one without the other or put them in different places?

Leave a comment and let me know, and I’ll have a likes script sometime next week.

Stay tuned 😉;)