Underneath Facebook

A myriad of us spend a considerable amount of our free time on one site, Facebook. A few others might spend all their time, and there are a few who have already spent a lifetime. All of us know Facebook as how it appears from the outside. All information in our profile, wall, albums and pages, beautifully rendered in that blue and white layout. Friends. Photos. Status Updates. Comments. Likes. Videos. Apps. Games. Everything under one platform. Facebook has evolved to that point where it in itself has become as much a phenomenon as the whole Internet is.

For how it has become very much a part of our lives, it would do some justice for us to know a bit about how things work underneath.

I have been interning at this startup called QuiKast for the past two weeks, and as a part of my project over there it was required that I learn about Facebook. So while what I talk about in this post will no way be related to programming and development, I sure will come back with a post talking about a Facebook app. But now, let’s get to the Facebook Graph.

Now for all the people who don’t know what a graph is yet, a graph is a set of nodes connected by edges. The general representation of anything in a graph is with ‘objects’ acting as nodes, and the ‘relationship’ between two objects acting as an edge. I think that describes it in a fairly simple and concise manner.

Here is how things work. ‘Facebook’ is a graph. The whole of it. To some such a perception would sound absurd. But that’s how things are. Everything in Facebook is an object. Every piece of anything on Facebook is an object. You are an object on the Facebook graph. Your friend is an object on the graph. Your status update is an object of its own. Your photos are objects of their own. And what holds them together is the relationship between them, the edges, except that there are different kinds of relationships between different objects. The relationship could be something like ‘friend’, or something like ‘like’, or ‘tag‘, or ‘own’, or anything else you could think of. Probably this image is going to help you with the visualization.

Facebook Graph

That sure does make things a lot easier to understand. So Facebook identifies and knows certain kinds of relationships as I told you about. And the objects that interact can be virtually anything. Of course, it knows of people, pages, groups and apps but whatever it is, is a property of the object. And whatever the object is, is given an unique identifier. The object of my profile on Facebook has the ID 559736373. And the object of Mark Zuckerburg has the ID 4. The Facebook ID of the official page of Adidas is 182162001806727. And the ID of the Texas HoldEm Poker app is 2389801228. Now here’s what happens when I go and like Adidas. An edge is drawn between 559736373 and 182162001806727. And the relationship that describes the edge is ‘Likes‘. Suppose I upload a new photo. It is given a new identifier. And then there’s a relationship ‘Photo From‘ between myself and the photo. And then I tag a couple of my friends in it. Two new edges are introduced into the graph. Between each of my friends and the photograph. By the relationship ‘Tags‘. Even external objects residing anywhere on the internet is mapped onto the graph once it starts interacting with Facebook. Take for example the “Like” box that you see on the top right corner of this site. The first thing that happened when I added the “Like” box was that Facebook created an object for ‘http://www.arjunabhynav.com’. Now the moment someone likes it, a new edge is drawn between them and this site.

I think we’ve come one step down now. It makes more sense to get looking into things with a more hands-on approach. Let’s start exploring the Facebook Graph. Externally. Not from within Facebook. Let’s visit http://graph.facebook.com/56134108238. And please do this through Firefox or Google Chrome. What do you observe? There you see the object of the page Internet Society. Now this is an object, and it has some attributes which you can see from the graph. These attributes are properties of that object. Now try http://graph.facebook.com/559736373. That’s me.

Okay. This doesn’t seem to define all of me properly, does it? It doesn’t show all the details that you see in my profile, does it? Nope. There is more to my profile. I link to different objects. The different things that define me. My wall posts. My photos. My friends. And everything else. It is very much possible to view them all through the graph. Say you want to check all my friends. http://graph.facebook.com/559736373/friends. And the music that I like. http://graph.facebook.com/559736373/music. Well, I know this didn’t work. You need something called an access token to view my profile details. Then the URL would become something like http://graph.facebook.com/559736373/friends?access_token=1234ABCD. This isn’t really a valid access token. I can give you an access token, but then it would expire in a while and wouldn’t work if you try. I would rather go with screenshots. You can view my friend list here. And the music that I like here. Observe that each music band that I like and each friend of mine has an unique ID, and also check out the awfully long access token on the URL. Likewise you can access just about any detail of mine, anything like a photo or any of my wall posts, using an access token. You would have to go to /photos or /feed or /groups or /videos or /likes or other relationships. And you would require an access token to access any of these, because that’s how my privacy settings are. Within Facebook, when you click on my profile, you get to see all these details, but that’s because being a friend, Facebook internally gives you access privileges and then you make a request to view my details. And say when you visit the profile of someone who is not a friend, then Facebook does not give you privileges to view his posts or photos. It’s all about privacy.

Let’s jump into a photo that is public and can be viewed by anyone. Check this out. http://graph.facebook.com/281666035202449. If you can follow the braces, then you’d get the real feel of the graph. You can see the “from” tag which gives the owner of the photo. You can see the names and IDs of the people who have been tagged in it, who have liked it, who have commented on it. You can even check out the comments in the “message” tag. Note that every comment also has its own ID. And not to forget, you can check out the link of the photo under “images:source”, the URL where it really resides on the web.

And you can see that Facebook is a lot about traversing through these graph structures, generating them, and rendering the right content at the right place. But it’s one messed up graph, and what seems simple isn’t really all that simple. Mad coding, defining Data Structures that can handle these, and continuous optimization runs behind the scenes.

I think we’ve come to an end here. I really appreciate it if you read through the whole thing. It sure is good to know more about something you are passionate of. I tried to be as descriptive as possible, but I can’t be telling that I explained the whole of it. There’s always more to learn, and best way to do is to visit the Developers page in Facebook and start reading up on things. However, I’m sure this would have given you a good insight into how things are ‘Underneath Facebook’.



5 Comments

  1. Sandeep

    December 28th, 2011 at 6:19 PM

    Cool!What is ur project on?

  2. Anuj Ramakrishnan

    December 29th, 2011 at 7:44 AM

    great article, never imagined such complex coding goes into what we seem to take for granted. waiting for the next entry!

  3. Arjun

    December 29th, 2011 at 11:02 AM

    @Sandeep: I’m working on integrating their website with Facebook. It’ll let people connect to their website through Facebook but the Facebook users have to get registered onto the existing database. It’s done, actually. For the last few days I’ve been doing a bit of other small things.

    @Anuj: Probably we never thought of it. We don’t tend to imagine things this way. And even I didn’t know until a few weeks back. :)

  4. Chitra

    December 29th, 2011 at 11:49 AM

    Really good article. :)

  5. Lohath

    December 29th, 2011 at 2:43 PM

    @arjun: awesome



Comment




TweetBytes is now @Tweet

@tweetbytes is now @tweet, thanks to txtWeb’s recognition of the popularity of the app amongst txtWeb users. Now that it got a snappier keyword, what does it mean for the current users? Simply put, it just got better, and easier to access. Existing users of @tweetbytes needn’t do anything to access the application through the […]

Read More
View the Blog »

55444 Search for Chrome

Got a week's break, and at least one night had to be some night of hacking. I was going through ...

My First WordPress Plugin

With great delight, I have contributed my first official piece of code to the WordPress repository! http://wordpress.org/extend/plugins/stack-overflow-activity-feed-widget/ I was always eager to ...

Copyright © Bits and Bytes | Arjun Abhynav. Powered by WordPress.