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)
- 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></span>"
}
}
</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 NICKNAME with 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 ;)
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)
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.
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.
Just posted an updated version for the "old" blogger that should (hopefully) even work for Louis ;)
On...
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.
@louisgray says I rock! This is like some sort of Blogger fantasy land
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.
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.