You Too can be a Facebook Developer

VIInternet and Web Development

Feb 13, 2012 (5 years and 4 months ago)

757 views

As a US college student chances are quite good that you are, or have been, an active Facebook user. If so, have you ever given any thought to how Facebook creates and maintains that complex online social environment that allows you to add and interact with friends from "virtually" anywhere? Or, have you wondered how it is that Facebook was able to add the new "timeline" feature that gives easy access to posts and pictures from your past? The simple answer is that every interaction that you have on Facebook whether it's a post, a comment, adding a new friend, "liking" something, or whatever is recorded in a database. Presumably forever.

You Too can be a Facebook Developer
As a US college student chances are quite good that you are, or have been, an active Facebook
user. If so, have you ever given any thought to how Facebook creates and maintains that complex
online social environment that allows you to add and interact with friends from "virtually" anywhere?
Or, have you wondered how it is that Facebook was able to add the new "timeline" feature that
gives easy access to posts and pictures from your past? The simple answer is that every
interaction that you have on Facebook whether it's a post, a comment, adding a new friend,
"liking" something, or whatever is recorded in a database. Presumably forever.
As a user it may be a bit daunting to realize that all of this information about you is stored and
available to Facebook whenever and however they want to use it. As a up and coming Facebook
Developer (which is what you are if you are taking this lesson :) this news should be very exciting
because the nice folks at Facebook have created the Facebook Open Graph so that you too can
access this vast stockpile of information (with permission of course) and create unique experiences
with it. Let's create one!
Create a place for the application
Your Facebook application needs a place to live. FTP into your account and create a new folder
called fb (you can name that folder anything you want to, henrietta for example, but stick with fb for
now). Once you are done, the URL of the new folder that you created should be
http://mynmi.net/
student/your_user_name/fb
. Visit the URL with your browser to make sure that you created it
correctly.
Register as a Developer
To become a Facebook developer you first must register. Here are the steps:
1.
Browse to facebook.com/developers. When the
message shown at right appears click allow.
2.
Now click
.
3.
Give you app a name (don't worry about the
namespace part for now), agree to the Facebook
Policies and click Continue.
4.
Get past the security captcha. You know how
5.
Next you will be asked to
verify your account via either cellphone or credit card. This is the one time it's OK to receive a
phone call in this class so you may want to take it!
6.
After you are verified as a
developer a screen should
appear that looks like the one at
right. Take particular note of your
App Id and App Secret. You will
use both of these soon.
7.
Add mynmi.net into the App
Domain field and press return.
8.
Click on Website and enter the url of the fb folder that you created earlier.
9.
As you look further down the page you will note that the second option after Website is
A few other options appear as well:
Mobile Web, Native Ios and Android apps and Page Tab. Ignore those options for now and
click
.
Build the App
1.
Download facebook.zip from free.mynmi.net. Once it is unzipped, drag the facebook folder
into your mysite folder.
2.
Before we do any actual work, lets open the facebook folder and look inside. You should see
two php files named index and config, and a folder called lib.
a.
Open the lib folder and note that it contains two additional php files. These two files are the
PHP API for Facebook. You don't have to do anything to these files other than link to them
but be aware that they are there and that they are important. They contain a bunch of
intimidating looking PHP code that will allow your PHP application to interact with the
Facebook Open Graph and extract user information.
3.
Open config.php with Dreamweaver and look at the code. Note the line at the top that says
require_once 'lib/facebook.php'. This line calls the PHP API for Facebook that your were just
reading about.
4.
The next two lines
ask for your app id and app secret. Enter your
app's id and secret in the appropriate locations without disturbing the quotations marks.
5.
Near the bottom of the page you should see a line that mentions req_perms:
. These are the permissions that
your app will ask users to grant in order for the app to function. Once you app is ready for
production it is important to ask users for as few permissions as possible. If you ask for too
many permissions potential users will become nervous and may decide to reject your app.
6.
Open index.php. The rest of the work toward will take place
between the php tags shown at right.
7.
Click to the left of ?> and press return a few times to enter some
space. Below the require_once line enter:
$me = $facebook->api('/me');
Wonder what that does? In a nutshell, the variable $me is set as an array to be equivalent to
all of the user's Facebook data. This array serves as the starting point to extract specific
information about the user and his or her friends such as names, posts, pictures, etc. We
haven't learned about arrays but, for now, be aware that arrays can hold a whole lot of data!
8.
Enter the following into a new line:
$myname=$me['name'];
Now you have created a
variable named me that extracts the user's full name.
9.
Let's do something with that information. On a new line enter
echo $myname;
10.
Save index.php and upload the contents of the entire facebook folder into the fb folder that
you created in your web account.
11.
Browse to the fb folder and try it. You will be prompted to authorize the app, so authorize it.
Did it work? If so, let's take this a little further.
12.
Your name showed up but not in a very impressive font. Let's wrap some html code around
your name to make it look better. Change the line that says echo
echo $myname;
to
instead say
"<h1>".$myname."</h1>";

a.
By now you should know what the <h1> tag does. The reason that you added
quotation marks is because PHP needs them in order to output the <h1> tag properly.
The dots between "<h1>" and "</h1>" and the $myname variable serve as connectors
(remember concatenation?) .
13.
Save, upload, and test the file again. Your name should appear significantly larger and in bold.
14.
Now that we have your name, let's add your picture. Before we get to this part, lets do a little
experiment to help you understand what is going on. First, login to Facebook and figure out
you id. If you have never registered a username with Facebook, this part is easy. Just go to
your wall and your ID will appear as part of the URL as in:
http://www.facebook.com/profile.php?id=100002819961941

If you do have a username you can get the ID by browsing to
http://graph.facebook.com
/ and
appending your username as in:
http://graph.facebook.com/emuelaldridge
.
15.
Once you have your user id, use it to pull your picture by browsing to graph.facebook.com/
your_user_id/picture as in
http://graph.facebook.com/4947239/picture
. You should see a
thumbnail of your picture. Want to see a bigger picture? Append ?type is large to the url as in
http://graph.facebook.com/4947239/picture?type=large

16.
Now look at the line of code shown below which instructs PHP to do exactly what you did in
the previous step. Referring back to the PHP lesson that you just had, "echo" tells the browser
to output something, in this case a line of code that calls your picture. The first part, "<img
src= tells the browser that you want to display an image. Everything to the right of the = sign
tells the browser where to find your Facebook by using your user id image.
17.
Lets break it down a little further. For starters \ is not standard html. The \ is in play because
quotes are being used inside of quotes; something that PHP normally interprets to mean that
you want to output a string. To appease PHP you add the \ in front of the internal quotes. That
way PHP knows that those internal quotes are not about enclosing a string but are instead
part of a string.
https://graph.facebook.com
targets the Facebook graph where all good
things come from. The next part $me['id'] extracts your user id from the $me array that you
created earlier. Everything else, starting with picture? tells FB that you want to see the picture
associated with that particular user id. ?type=large lets FB know that you want to see the BIG
picture, not that wimpy little thumbnail that it would otherwise display. And that's it. You can
get this code from
http://free.mynmi.net/copycode.html
and paste it right into your file.
18.
Save, upload, and test. If your picture appeared you are ready for the next step: displaying
pictures of your friends!
19.
This time we have several lines of code for you to look at.

a.
The first line of code assigns data about your friends to an array called $friends.
b.
Line 2 sets up a loop, similar to the while loop that was explained in the PHP lesson.
This loop should make intuitive sense to you because it almost states what it does in
plain English: For each friend, do something.
c.
Line 3 sets a new variable, $friendpic to be equal to the URL that displays a given
friend's picture. This step generates almost exactly the same URL that just displayed
your picture. The only thing different is that a friend's ID is appended instead of yours.
d.
Line 4 adds <img src=" to the beginning of the $friendpic variable and > to the end.
When all of this is echoed it generates the code that tells a browser to display the
picture.
e.
The foreach loop continues until all of your friends are displayed.
20.
Save, upload, and test. If everything works correctly, you should soon see ALL of your
Facebook friends. Scary?
21.
Let's take this one step further. Suppose you don't want to see ALL of your friends but would
like to see five of them. Here's how to do it.
a.
Insert a new line between lines one and two and enter:
$numfriends=0;

b.
Right before the line that starts with $friendpic= insert:
$numfriends++;
c.
After the line that starts with echo insert:
if ($numfriends>4){ break;};
d.
When you are done the code should look like the image below.
22.
Save, upload and test. If you get this right you should see just 5 friends this time. FYI, these
five friends were the first among all of your friends to get a Facebook account because the
app that you have set up automatically starts with the lowest number.
23.
But how did that work and why 5 friends when you entered 4 instead of 5? First you defined a
variable,
$numfriends
, that started with 0.
$numfriends++
increments the variable by 1 each
time the foreach loop is executed. Once
$numfriends
reaches for, the
break
tells the loop to
stop; ie. take a break.
24.
break; Ie., take one yourself.
Well, that is your first Facebook Graph lesson. If you feel drawn to this kind of activity let me know
and we will try to work out a plan for you to learn even more about extracting and using data from
Facebook.