From the Engineering Team: Facebook Integration

A few weeks ago we launched Facebook integration and have been adding pieces of Geeklist to Facebook’s Open Graph. Initially, we only supported creating accounts and logging in with Facebook IDs. By having more than one login option, you could link your account to both authentication providers and get “login failover” to allow logins to proceed when (not if) Twitter has downtime.

After login was done, we integrated with the Facebook Open Graph API. You can now share the following activities with your Facebook friends:

Creating a new card or micro
Using our bookmarklet to post a link
Highfiving a card, micro, or link
Joining communities
Posting a github commit (after you integrated your github account)

In order to get all of these great benefits, you will have to go to your Settings and link your Facebook account from there. This is what you should see:

Personally, I think the way Facebook presents the actions from applications was done in a great way so that if you get someone high fiving things left and right, it shows up as 1 group of activities in the feed and timeline. Here is a quick look at how your activities will show up on your timeline in Facebook:

Now, since this is a blog that is read by lots of geeks, I’d like to take the time to dive a little bit deeper into things.

Ease of Implementation

As you may know, we use node.js for our server, so I had to find a library to integrate with the Facebook API. After looking at a few out there, I decided it was just simpler to create my own mini-library. There are great times to re-use libraries that are out there, but the Facebook API is just so simple that it can be done quickly. In our case, I made use of the request module to handle the HTTP(S) requests.

Next up was getting our actions into Facebook via the Open Graph. The meta data is added to the <head> tag in the HTML body, so I did it in the most simple way possible… add it to template file that includes every page. It is not the most optimized solution, but it gets the job done. We are using the wonderful jade template engine, so it just required adding a few lines to add the meta data depending on what local variables where present for the template.

Pain Points

I’m sure lots of geeks out there have some good war stories about any API, and Facebook is no different. Most of the pain points I ran into were related to my workflow. For example, to verify the post to the Open Graph, Facebook will retrieve the URL of the action to get the meta data. So I had to create a reverse tunnel to my local dev machine (I know, easy to do with a remote server and SSH… but still requires that step).

I also like to keep my settings separated by environment, so I created a few apps on Facebook. However, there was no way to copy the settings and Open Graph definitions across apps. Perhaps if I managed everything in one app, that would be fine… but like I said, I have my own workflow style.

What is Coming?

Once you go Open Graph, you don’t go back… expect more updates, we have been working with Facebook about adding new Open Graph functionality to Geeklist.

Geek Trivia

So for all the people who have read this far, I’d like to give you some swag :) The first person who answers this question correctly in the comments below will win themselves some Geeklist swag! So without further ado: Which common Facebook API that gets called from the server does not return a proper JSON response?

I hope you enjoyed this post! The above work was just a small part of what our great engineering team is pushing to production everyday!

Jon Keating
Sr. Software Engineer
http://geekli.st/emostar