Facebook application tutorial: Using the Graph API Explorer | lynda.com

Uploaded by lynda on 25.06.2012

Facebook provides a number of tools for working with apps. One of the coolest tools is the
Graph API Explorer. It allows you to preview the data the API returns in JSON format. Let's
take a look. If you have been following along with the exercises, we have seen the data
we receive from the API, can be sent to the Console. So if I go to the Develop menu and
Show Web Inspector, so if we open up this Object that we output to the Console, you
can see all the data that we've gathered from the Facebook API. This is not exactly in JSON
format, it has been interpreted for us, and this is actually a good way of visualizing
the data. But sometimes you want to see--especially since we are talking about JSON itself--the
raw data that comes from Facebook. To do that, we can use the open Graph API Explorer. To
find it, just go to the Developers section and under the Tools section, if you're in
the JavaScript SDK, it's right underneath it. Just click on Tools and open up the Graph
API Explorer. So when you run it, you will see the basic user information that anyone
can access about our account. So this is public data, the name of this user, first_name, last_name
and the link to their profile plus their gender and their locale. Now if we try to access
some of this other data, you can see the connections that can be made to other types of data. Let's
try to click on family and see what happens. You will see that it says that "An access
token is required to use this resource." So this is kind of interesting, too, if you actually
put this in a browser, you will be able to get this to this data as well. So if we grab
that number--and I am going to open up a new tab. The URL is a little bit funky, graph.facebook.com,
so graph.facebook.com, and I'll put a slash and that number. So this is actually our ID
number, and as you can see, anybody can actually type that into a browser and get this user
information about you, including your ID, first_name and last_name and whatever you
have made publicly available in your Permissions and your Profile. So Facebook is doing exactly
this. It's actually sending a request to the graph. You can see this is graph.facebook.com
and retrieving the data, and it comes back in JSON format. So if we go back to the API
Explorer, and we switch over to our application--right now we only have one application, and it's
this one right here--you'll see that it creates an Access Token, that's this security measure
right here. It's just an encrypted piece of text that allows Facebook to make sure that
this is a good request. We can see a lot more data, scroll down here because we have authorized
this application to let us see a lot more data than we have. So now, if we do something
like go to albums, we'll be able to see the albums for this user. Now still some of this
data is not going to be available to us. Let's see this, activities might be just empty because
the user didn't fill anything out. But if we try to click on addaccounts, you could
see that managing this requires extended permissions that we didn't ask for. So we could see the
friends lists, doesn't really have anything, the user's feed and notice how the Graph API
URL also changes. So we can actually make calls within our application to the Facebook
Graph API with these different URLs and get the data that we need for whichever part of
the application we're working on. You also have the ability to do a GET or a POST or
a DELETE command, so you can send different types of commands to the Graph API. And when
you go through developing applications, you'll know that--let's go back to the Developers
let's just Command-click to create a new tab--a lot of times you will be asked to do certain
things like create a post or a GET command to access different types of elements, so
back to the JavaScript SDK here. So some of these functions say FB.api will perform some
of those calls to the URL exactly like what we're doing in the Graph API, and get a response.
The response will be the JSON data in the format that we saw in the Graph API. So by
taking a look at the Graph API, you can see the data that returns. By taking a look at
this URL, you can see what you need to type into the FB.api command, you just paste the
URL right here, and then the response that you get will be that nicely JSON formatted
data that we've been seeing so far. So if we go into our application, you could see
that this Console doesn't exactly give you the data in JSON format, but it's sometimes
a little bit more useful because you know that if you need to get say the education
of this user, you need to go to the object that you get back, the data, and then get
an array--and right now, I guess this array only has one item. So we can get to this data
in the exact same way that we would get to an array. So if I wanted to get to say, the
user's first degree here, the degree name then we could do something like--and I'll
switch back into BBEdit, scoot it over side by side. So if we wanted to print something
else out, we could get to that same object by querying the Graph API with the me function--that
just gets the data for whichever user happens to be logged in at the moment--and then we
type in education because it's the next node right here, and then the education is going
to be an array, and we want the first item in the array which is the 0th item. Don't
get confused by this Array 1 thing. That just means that that there is one object in that
array. The index of the array is zero. So we have to type in education 0, and then we
just type in name which is the next thing that we want, and then we can just hit Save,
and go back into our App and reload. And then it looks like we are undefined for some reason,
so education, this should be education, and then zero, and then object, the 0th object
and looks like I missed something. Let's go back into BBEdit and see how I wrote it. So
info.education, and then it looks like I forgot--I put name, but I didn't put the name of which
thing that I want which will be degree or school. Let's open up school here, school
name, okay, great, so I'll switch back here, and I just forgot the words school right here,
school.name, save that and Refresh and hopefully I get it right this time, and we get the school
name for that particular user. So when you want to sort of visualize what the JSON data
looks like, so that you know how to get this, you can either use the Console--just log in
the object to the Console, it's a little bit easier to read. If you want to see the raw
data, you can use the API Explorer.