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)
- Go to your “Layout” tab and click “Edit HTML”
- Click the check box next to “Expand Widget Templates”
- Search for the line
<b:include data="'comment'" name="'commentDeleteIcon'/"> - Not far after that line, there should be a
</b:loop>tag followed by</dl> - Right after
</dl>insert the following code…
<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&_render=json&ffid=YOUR_FRIENDFEED_NICKNAME&url=" + data:post.url'>
</script>- Obviously, replace
YOUR_FRIENDFEED_NICKNAMEwith your own FriendFeed nickname (MUST be all lowercase) - Now we’ll insert a couple lines of CSS so that the FriendFeed icon appears next to comments from FriendFeed
#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&_render=json&ffid=YOUR_FRIENDFEED_NICKNAME&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 😉;)