Facebook SDK & Graph API

Facebook is a huge platform and accessing their data, known as the Graph API, allows you to build cool and powerful apps. Fortunately, they wrote a library, called an "SDK" and it makes our lives a little easier.

Below are some notes on how to mess around with the SDK and the Graph API but you should also take a look at the working example. It's an app that loads some fo your Facebook events onto the page.

Facebook SDK

SDK, say what? An SDK is a Software Developer Kit. It's basically just a library of code created by, in this case, Facebook to make your life easier. There's a lot of plumbing involved in talking to the Facebook API and the SDK aims to do some of that for you.

Getting started...

To work with Facebook you need to create an App.

1. Go to https://developers.facebook.com
2. Click on "My Apps" and select "Add a New App"
3. Choose "Website" as the platform type
4. Follow the next few instructions

They're going to give you a snippet that looks like this:

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '<your app id goes here>',
      xfbml      : true,
      version    : 'v2.5'
    });
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

Setting up your URL

Eventually you're going to want to set up a real domain but for now we just want to work locally so just tell Facebook that the Site URL is localhost. You'll also need to skip the "Quick Start" and add localhost as an App Domain too.

Then we need to set up your browser to also use localhost. This part is a little tricky so bear with me.

1. Open Terminal (App > Utilties or use Spotlight to find it)
2. Navigate to your project folder (e.g., cd ~/Code/fewd-37)
3. Start a simple web server: python -m SimpleHTTPServer

If all goes according to plan you should be able to open http://localhost:8000/facebook.html, assuming you pasted that previous snippet into a file called facebook.html in the root of your FEWD project folder.

Using the Graph API

Now, you should be able to talk to the Graph API, where Facebook stores all your secrets. Use the Facebook Graph Explorer to figure out what kinds of things you can access.