--- uuid: "6225047548712044713" title: "OLD: FriendFeed Comments in Blogger" date: "2008-06-12" permalink: "/2008/06/comments.html" description: categories: ---

Update: I just posted an updated version that supports "likes" and a bunch of requested tweaks. This post is completely outdated and here for archival purposes only.
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 (realitivly 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></span>"
}
}
</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 ;)

In case you're curious, I have not implemented this on my own blog yet, only because I've customized my template beyond the point of recognition.
I'm talkin' crazy spaghetti code.
The other thing is that nobody comments on my FriendFeed stuff, so it'd be kinda pointless (right now, anyway)

Pat, here's the obligatory comment. :-)

One of the odd things behind my blogging template is that I'm nowhere near widgets. In fact, I'm still on the old blogger, thanks to all the customization. That's in part why I had to have Daniel Ha's help for Disqus install.

He even made a testbed there:
http://oldbloggertest.blogspot.com/

Hopefully he doesn't abuse my look and feel. :-)

So... this all means I can't even test your product, as far as I know. Maybe I'll poke around.

As Louis knows, I've been grumbling about doing this myself for a while, but I've been working on a server side solution.

Just looking at the code for what it is, I don't see a reason why this can't work on the old blogger. I'll play with it tonight and report what I find.

The old Blogger uses different template tags.
Just posted an updated version for the "old" blogger that should (hopefully) even work for Louis ;)

In the "MainOrArchive" tag area right?

No, It'll be inside the <ItemPage>
On...
No, It'll be inside the <ItemPage>
On classic templates, you want the code to go right between "</BlogItemComments>" and "<$CommentPager$>"

Also, keep in mind all classic templates are a little (or substantially) different, unfortunately, so you may have to fiddle around and see what looks best on your template.

Update: Now plays nice with FeedB...
Update: Now plays nice with FeedBurner

i'm playing around with it pat - one thing i n...
i'm playing around with it pat - one thing i noticed right off the pat is that you're gonna want to & those ampersands, i fixed those but there is something else the XML doesn't like, still poking around. maybe you have some idea.

by that ampersand sign i of course meant & followed by 'amp' and then a semi-colon - forget the comment read HTML too :)

It works! Hallelujah! You rock, Pat.

i got it working as well pat, tweaks i needed are a bit too long for comments but i'll do a post on it later. thanks for this, you rock.

@MG SieglerYou're right, they need to be coded correctly. Thanks for pointing that out.
@louisgray says I rock! This is like some sort of Blogger fantasy land

I'm probably being a bit of a dunce, but I can't get it to work. I found the appropriate part of my template, copied and pasted the code, replaced the capitalized text with my friendfeed nick in lowercase, pasted in the CSS just after it, and it told me it couldn't save it because my XML is not well formed. My blog is http://worldofslippy.blogspot.com - I assume it's the new blogger?

Forgot to check the email followups box, so please excuse this otherwise pointless comment. :-)

Unfortunately Slippy, you're not the only one having problems with the new Blogger.
It does work some of the time, and other times it seems like Blogger changes some of the code while trying to save (turning ">" into ">" and things of that nature).
So, stay tuned. I'll post a new version sometime this week that fixes these problems, and it will integrate Likes as well.

Umm.... I meant to say it turns ">" into "&gt;"

haha, ok, much too late to the conversation it seems. I've gotta pay better attention. I just installed it and yep, this ROCKS. One little thing I'd love to see (I'm using the old blogger ftp script), I'd love to see a link that takes people to the actual conversation on FriendFeed in case they want to add comments there. Excellent work Pat!

Just posted the updated widget with instructions, so this page is now officially outdated.
Note, before you go to the new version, you should probably remove all the tweaks from this version, otherwise FriendFeed comments will show up twice, and who wants that?
Nobody.