What data does Facebook.com load?

Jessica YungData Science, Highlights

Today we’re going to look at your Facebook homepage’s source code. This is interesting because it gives you an idea of

  1. the data Facebook is using every time you load your Newsfeed and accompanying ticker and chat windows,
  2. what exactly this data is, and
  3. how this data is stored and formatted.

Here’s an example: (Scroll down for step-by-step instructions on how to get to this stage)

There is a list called “InitialChatFriendsList“. I suspect this list contains information on which friends are loaded in the chat sidebar in the bottom right. It would be cool if we could find out what information Facebook uses to figure out this ordering.

  • (This ordering likely takes place before the page is rendered, but we might still be able to get some insights by looking at the information used and presented.)

Tip: If you’re using Sublime Text, the CTRL-M keyboard shortcut to jump to the corresponding opening or closing parentheses is extremely useful. This saves you time and effort scrolling up or down to find where the end of a list or element is.

Looking at this list and using the CTRL-M shortcut, I mapped the structure of the list as such:

Now we know

  1. The ordering of friends in shortProfiles corresponds to the ordering of friends in the bottom right chat list.
  2. Image thumbnails are hosted on https://scontent-lhr3-1.xx.fbcdn.net/v....
  3. Facebook records one piece of information encapsulating people’s gender and whether or not they are aged above 18, presumably for story and ad-filtering. Why would this information need to be loaded for the chat window though?

Questions:

  1. How is list (list of my friends that has length 2*(the number of friends I have)) ordered? I have a vague sense that I interact with the people at the very top of the list more, so it shouldn’t be random.
  2. Not every friend’s id appears twice in list. So what are the ids that are being loaded and what do the endings -0 and -2 correspond to?
  3. What does the number 26 at the end correspond to?
  4. How are shortProfiles ordered? Why does this ordering differ from that of list?
  5. Aside from type: "friend", what other types are there? (My starred Top Friends are also listed as friends..)

Other interesting parts to investigate include

  • Parts of the Facebook homepage that has been commented out -> What are these sections and why have they been commented out?

How to do it

  1. Get page source (code)
    1. Go to view-source:https://www.facebook.com/ (This works on Chrome)
      • Alternatively, go to www.facebook.com, right click and click ‘View Page Source’ in the menu that appears after you’ve right-clicked.
    2. Copy the code into your favourite text editor.
      • I recommend Sublime Text. You’ll want one with syntax highlighting.
  2. Beautify the code (format it) so it’s readable
    1. JSBeautifier quickly beautified my page source (HTML and Javascript) so it became readable as opposed to being a pile of gunk. http://jsbeautifier.org/
    2. Once beautified, the code is well over 17000 lines.
      • (This will vary depending on the number of friends you have.)
  3. Start investigating.

Have fun and do post your findings in the comments!