Facebook Graph API tutorial

Project by Tim, Zaw, & Zarni

Tutorial by Tim, honorable mention to Matt, for helping make it all work

This tutorial will take you through the steps to make a webpage that uses Facebook authentication, and some of the features of the facebook graph API, which allows you to access information about users who log in to your page, and about their friends.

What you will need for this project

-A facebook account

-A web server (like WampServer , or the Cornell people server)

-A text editor (like notepad++)

-A browser (protip- you have one already)

-Some understanding of HTML. Some Javascript, Jquery, and JSON wouldn't hurt either.

Step 1

Create an HTML document, and save it somewhere in the www folder of your server. Determine the URL of your file

Step 2

Make sure you have the facebook dev app installed. If not, you can get it here

Step 3

Within the devoeloper app, click the "create new app" button
-enter a name for your app in the popup window, and agree to the terms
-fill out the captcha, assuming you're a human and not a program

Step 4

Under the settings->basic tab (get here by clicking the "edit app" button if you're lost)
-enter the domain for the website you want to make (example: people.cornellcollege.edu).You do not want the entire URL here, only the domain.
-Under the header "Select how your app integrates with Facebook", click on website, and enter the full URL of the site you intend to make. *There are other options, but this tutorial only covers the website aspect.
-Find your app ID at the top of the page, you'll need it later.
-Click "Save Changes." Congratulations, you can make an app now!

Step 5

The first step in making your friends list app is Facebook Authentication
-Copy the following code into your HTML document:

<html>
<head id="theHead">
<title>Client Flow Example</title>
</head>
<body>
<p id="userName"></p>
<script>

//displays "Greetings, + 'user name'"
function displayUser(user) {
var userName = document.getElementById('userName');
var greetingText = document.createTextNode('Greetings, '
+ user.name + '.');
userName.appendChild(greetingText);
}

//facebook's auth code
var appID = YOUR_APP_ID;
if (window.location.hash.length == 0) {
var path = 'https://www.facebook.com/dialog/oauth?';
var queryParams = ['client_id=' + appID,
'redirect_uri=' + window.location,
'response_type=token'];
var query = queryParams.join('&');
var url = path + query;
window.open(url);
} else {
var accessToken = window.location.hash.substring(1);
var path = "https://graph.facebook.com/me?";
var queryParams = [accessToken, 'callback=displayUser'];
var query = queryParams.join('&');
var url = path + query;
// use jsonp to call the graph
var script = document.createElement('script');
script.src = url;
document.body.appendChild(script);
}

</script>
</body>
</html>

Please note that this code is from a facebook developer tutorial. Feel free to read up on the 'client-side authentication flow' section of this page- it's good information.

-Where the sample authentication code has the text "var appID = YOUR_APP_ID;", replace the filler with your app id from the developer app (be sure it's your app ID, not your secret ID.)
*If you save your HTML and open the page in a browser, it will ask you to allow the app access to your facebook profile info. If you tell it yes, it will display a greeting containing your username. You can authenticate users now!

Step 6

The next step involves using the facebook graph API. This tutorial explains how to list friends using the Graph API. Other features will work similarly.
-Add the JQuery library to your page. For detailed instructions, visit w3schools
Into the <body> section of your HTML code, paste the following:

<div id="friendsList"></div>
<iframe id="frame" name="frame" style="visibility:hidden"></iframe>

-The <div> you're creating gives your webpage a place to insert the list of your friends
-The invisible <iframe> you're creating will be used to store the JSON data that facebook returns, containing the friend list.

Into the <script> section of your HTML code, paste the following:

//load the JSON in an invisible iFrame using the php script getpage.php
document.getElementById("frame").src = "getpage.php?url=" + escape("https://graph.facebook.com/me/friends?"+ accessToken);

//once the iFrame is finished loading,
document.getElementById("frame").onload = function()
{
//create an array of all the stuff from the JSON
eval("friends = " + document.getElementById("frame").contentDocument.body.innerHTML + ";");
//iterate through the array Friends, append each name to #friendsList
for (var $i in friends.data)
{
$("#friendsList").append ("Name: " +friends.data[$i].name + "<br/>");
}
}

-This code will get the JSON data from facebook, and load it into the invisible iFrame, then use JQuery to eval said data, and iterate through it with a for loop, appending the names of everyone on the friends list into the "friendslist" div.

-Save getpage.php as a php file (preferably named getpage.php,) and put it in the same folder as your HTML file. Thanks to Matt for writing this script!
*Note! You should be able to do this without the PHP file, using the JQuery function getJSON(). However, facebook doesn't seem to like this function, so the PHP is a workaround.
-Save everything and open your page in a browser. It should display a list of all the friends of whichever user is logged into facebook. If no user is logged in, it should take you to a login page.


Here is our final code. Best of luck!