Continuing on our expansion into the wonderful world of the Open Graph, we are now happy to bring your open source commits into Facebook! What this means is that your Facebook timeline can now include some details on how much code you have been pushing, and here is mine after I created a new project called aws-ssh:

Probably the most interesting time of the project is when it is just starting, and you get to explore what is possible. When putting data in the Open Graph, you have to model the data around actions that people would do in real life. For example, let’s take this simple sentence: “A developer writes code”. Awesome, sounds like something we can all identify with. But wait, “writing code” is a bit hard to quantify. So let’s see how code gets written:

1. Close reddit tab (see ya latter kittens!)
2. Open up vim
3. Write some code
4. Test written code
5. Commit code
6. Push commit
7. Release to production
8. PROFIT

Alright, so “commit code” and “push commit” sound like key points that can be quantified. I was actually going to go with “commit code”, but the object needs to be a countable noun due to the way Facebook creates the sentences (“<verb> a(n) <object>”). So that is how I came up with “push” as the action and “commit” as the object.

Next up, we need to look at what attributes can be associated with a pushed commit. These were actually pretty easy to figure out, as we are using Github’s API and they give us all the attributes that can be seen in their Repo Commits API. So to be safe, I do what any sane engineer would do, just horde all the data in the database! Currently a commit object will have the following attributes in the Open Graph:

• Lines added
• Lines deleted
• Total number of lines changed
• Number of files changed

And then I realized that there was an object that could be related to the commit — the repository. So I ended up creating a new Open Graph object, and added the Repository as an attribute of the Commit as well. Currently the attributes for the repository are the number of watchers and number of forks on Github. That way when you see a commit, you can interact with the repository as well, like this:

In addition to this tech post, I created a walkthrough video that I want you to see. It really is magical how smooth everything works and I can’t wait to start seeing developer stats inside Facebook. So connect with Facebook and link your Github account right now! Without further ado, enjoy the walkthrough video:

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

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