Socializing Baekdal.com

Published: Tuesday, April 07, 2009 in articles » technology by Thomas Baekdal

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).

• Facebook: Pulls your name, profile picture, ads a link to your Facebook profile and give you the option to ‘write back to your wall'
• Twitter: Pulls your name, profile picture, your public description, ads a link to your Twitter page and to your website (if that is part of your profile).
• Flickr: Pulls your name, profile picture and ads a link to your Flickr page.

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).

A few tips:

• If you connect via Facebook, Twitter and Flickr, then your profile will show up with all your links. The image comes from the last network you have connected with.
• You can click on the little white button next to the Flickr icon, and customize the data before the comment is submitted. This also allows you to add a Facebook link without actually connecting with Facebook.

Developer notes:

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).

Facebook Connect

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.

Twitter API

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 API

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.

Gravatars

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
E.g. http://www.gravatar.com/avatar/3b3be63a4c2a439b013787725dfce802.jpg

Baekdal.com simply adds this image if you enter your email address when submitting a comment.

Other notes:

• Facebook Connect doesn't work with Opera - at all (huge problem on mobile phones)
• Facebook Connect and Firefox are strange. Instead of simply requesting the data, it first renders the data without your data (as if you are not signed in), and then refreshes it. This means that it sometimes appear that Facebook couldn't connect.
• Firefox continues running the JavaScript even if the last operation isn't complete. So if you request updateFacebook, then look at the resulting code, you sometimes get ‘null' simply because updateFacebook isn't finished (this was why I wrote ‘Firefox is a pain in the a...' on Twitter).
• Facebook connect actually outputs different data for each browser - most noticeably comparing IE8 and Firefox. (Another problem with not having an API to work with).
• Facebook Connect and mobile phones is ‘complicated'. Not at all user-friendly (yet another reason why I want and API instead).
• Facebook Connect is exceptionally fast in every browser than Firefox.
• The standard ShowFeedDialog command, that Facebook Connect uses to update your wall, is displayed inline. This means that you have to submit your form using AJAX. Normal form submit will redirect you to a new page, and thus also remove the dialog.
• Twitter has a limit of 100 request/hour (unless your app has been white-listed). This means that you have to cache the results, and not keep people's profile data up-to-date (imagine a page with 50 comments, all of them requesting Twitter profile data on each page view...)
• Twitter API is rather slow to respond (it sometimes takes about a second to request data).
• Flickr API just works, it literally took 10 minutes to implement.
• I also wanted to add Linked-in API, but it is only available to ‘partners'

Final impressions:

• Facebook Connect. Very powerful, very secure, very user-friendly. Not very controllable, not exactly stable, doesn't work in every browser, doesn't work consistently, not an API (and thus not an open system), limits the way you can create interaction with people.
• Twitter API. Very powerful, great API, very controllable, easy to work with. Insanely insecure (once you go past public data), not usable for web based third-party applications.
• Flickr API, Very powerful, extremely secure, great API, very controllable. Not very user-friendly (extremely technical).

So there you have it :)

• iTunes 9, these are not the droids you are looking for
• Google Chrome OS is 7 years too late
• The MacBook Hybrid
• Google Andriod
• Some of the Magic Behind Baekdal.mobi

• Usability
• Management
• Branding
• Technology
• All Articles

Baekdal.com is (nearly) everywhere. Check out our social profiles:

• FaceBook
• Twitter
• LinkedIn
• YouTube
• FriendFeed
• Delicious

© MMVIII Baekdal.com
Want to republish this article on your own site? Read our republishing guidelines.

Baekdal.com - Articles - Design Magazine - Future Trends - Blog
About Baekdal.com - Search - Subscribe to RSS - Contact Information - Privacy Policy