Baekdal.com now features a completely redesigned commenting system that tabs into the power of social networks. Instead of manually typing in your name, you simply press a button. How amazing is that...
Anyway, Baekdal.com now allows you to connect your comment with Facebook. You can pull your public profile data into Baekdal.com, and also post feeds back to your wall, letting people know that you are currently discussing a topic.
All you do is to click the Facebook connect button, authorize that baekdal.com may pull your profile data, and the rest is then done 100% automatic.
Then when you submit a comment, an inline dialog will appear, asking if you want to add this to your wall. And the next time, you don't even have to press anything, because Baekdal.com remembers your preferences.
On top of this, your comment will appear with your name, your picture and a link to your Facebook profile.
But wait... There is more...
Facebook connect is pretty cool, but I personal favors Twitter. This means that you also can connect via Twitter, and via Flickr. Pulling the public profile information from both networks. Each services pulls different information (and you can connect with as many as you like).
The new system also supports Gravatars. This is a system that links your email address to a profile picture. So, if you want to use your Gravatars, you can simply add your email, and it will figure out the rest.
And finally, the commenting system is now 100% AJAX based (or rather SJAX based).
Making this was both fairly simple, and hugely complicated. In these developer notes I am going to talk about the good and bad things about each part of the system (warning: this is going to be a bit technical).
There has been a lot of talk about Facebook Connect, and it is a pretty impressive system. It very quickly allows anyone to tab into Facebook using a very simple system. There are two videos that you need to see:
It basically only takes 15 minutes to incorporate Facebook Connect into your site, and apart from Opera (and occasionally Firefox), it works great.
But there is a catch. Facebook Connect is not an API. It is a closed specialized system that you have to integrate into your site. What is the difference you ask? Well, a lot actually.
An API is a system that allows you to work with the data of another site. It allows you to request and submit the data itself, usually formatted as XML. This is great because that means you have full control over the experience, and how people interact.
Facebook does not allow you to work with the data. It enables you to add Facebook specific elements to your site, but it is then Facebook that requests and submits data. The good thing about this is that it is very easy to implement. The bad thing is that you, as a developer, have very little control over the experience - and over what goes on in your own site.
As a developer I much prefer the to work with an API, than a closed system.
Note: You can get around some of these things using server-side elements... But it is tricky.
I did however cheat a bit. Instead of using the Facebook element, I extracted the result from those elements, and use that. Facebook wants you to use e.g. fb:name as 'your name' but that is not very usable, when you also wants to use other networks. So instead I allow Facebook to render the fb:name tag in a hidden DIV, and then I extract the real name (e.g. Thomas Baekdal) and put that into the name field of the form.
Not exactly the the Facebook way of doing things.
The Twitter API is, however, much better. While it is less user-friendly, it is far more powerful and controllable. You simply request the data you need, and Twitter sends back the code in a nicely open format. You don't have to incorporate special Twitter code, nor adjust your interaction with their system.
There is, however, one major flaw with Twitter, and that is security.
While both Facebook and Flickr employ highly secure authentication systems, Twitter is the most insecure system you can possible think of.
One example. In order to update the status of a person, e.g. to allow them to tweet that they have been reading and commenting on an article, you have to send the following command:
curl -u username:password -d status="your message here" http://twitter.com/statuses/update.json
The problem is the username:password part. Because in order for baekdal.com to update your status, when you post a comment, you have to give me your username and password.
Let me repeat that. YOU have to give SOMEONE ELSE your username and password.
That is of course completely ridicules way to handle user authentication in an API. Both Facebook and Flickr handles user authentication in ways so that external sites never gain access to people's login data. Instead they control what permission each API-app get directly - completely securing people's profiles.
Twitter doesn't, and that is really bad.
I am aware that Twitter is starting to authenticate using OAuth. This is great news, and will, with time, solve the security concerns I might have. For now, not even OAuth is secure enough, since it is either no access, or full access. I want to be able to update the status, but not change e.g. people's names and profile information.
Note: Be careful about this when you are asked to sign into Twitter on other sites. You are actually giving away your username and password to a third party. And once they have that, they can do everything.
As a result I decided not to implement 'update my Twitter status', because I do not want to know your username and password. Nor do you want to tell me. Baekdal.com will ONLY request your public profile data, based on your Twitter id. It cannot request any other data.
Flickr is different. Because while it is much more technical than both Twitter or Facebook, it is highly secure. You can of course request public data (like what I am doing on Baekdal.com), but you can also request data on 3 other levels. Read, read+write, or read+write+delete.
So people can authorize how much access they want to give to external sites for each application. That is pretty cool.
On Baekdal.com I am only requesting your public profile data, which includes your name, profile picture and URL to your photo page, and as such you are not required to authorize access.
And finally Gravatars. A few of my readers have requested support for Gravatars, so I decided to add it as a bonus. It is a pretty straightforward system.
Users can sign-up at Gravatars, with their email address, and upload an image. Then external sites can request that image by requesting a special URL:
http://www.gravatar.com/avatar/[MD5 hash of email address].jpg
Baekdal.com simply adds this image if you enter your email address when submitting a comment.
So there you have it :)
Founder, media analyst, author, and publisher. Follow on Twitter
"Thomas Baekdal is one of Scandinavia's most sought-after experts in the digitization of media companies. He has made himself known for his analysis of how digitization has changed the way we consume media."
Swedish business magazine, Resumé