Building a Facebook App - Courses

(Part 2)

From Part 1 We …


Signed up to be
facebook

developers


Verified our
facebook

account.


Added
facebook

developer app.


Setup a
Heroku

facebook

application


Made a small modification to the app


Downloaded a local copy of the source code
to our computer.


Pushed the change back to
Heroku
.


Deployed the change to our app.

In Part 2 We Will …


Learn about the
facebook

graph API


What information is available & how to
access it


Learn how to modify our app to do cool
things!


Learn a little PHP


Share some debugging strategies



All source code will be available on the
class website!

What is the open graph?


A structure that connects objects
(people, organizations, ideas) through
relationships

Yi Zhang

Sarah Tyler

UCSC

Knows

Attends

How does the open graph work?


Entities are identified via an ID

Sarah Tyler

Sarah Tyler

Sarah Tyler

Sarah Tyler

Sarah Tyler

Sarah Tyler

ID: 100003271715513

How does the open graph work?


Attributes and relationships are stored
with the entity

Sarah Tyler

ID: 100003271715513

Knows: 762859350 (Yi Zhang)

Attends: 8686764758 (UCSC)

Gender: Female

Location: US

Yi Zhang

UCSC

What does
facebook

data look
like?


User data displayed as JSON element









https://graph.facebook.com/8686764758

What does
facebook

data look
like?


A Handy PHP function to view an object
print_r
.


<?
php

print_r
($basic); ?>



(The ‘$basic’ object was created in the
Heroku

Sample app,
we’ll show where in a few slides)

How to access public
facebook

data (with PHP)


To access the contents of the object
‘$basic’


Access an array using the [] notation

○
Ie
. $basic[name] is the username

○
$basic[education] is an array of objects that
represent
eductation


$basic[
eductation
][0] is the first
eductation

entity in
the user profile


$basic[
eductation
][0][school][id] is the id of the first
education entity




How to access public
facebook

data (with PHP)


To get the graph data of an entity with id,
$id, and load it into variable, $
var


<?
php

$
var

=
json_decode
(
file_get_contents
('https://graph
.facebook.com/'.$ID)); ?>

How to access public
facebook

data (with PHP)


To access the contents of the object
‘$
var
’


Access an
stdObject

using the
-
> notation

○
Ie
. $
var
-
>[name] is the username




What if you want access to the
private data?


First you need to
authenticate your app


You need an access
token


A token is a variable that
contains information for
both the user and the app

○
Recall users had to approve
what data each app could
have access to

○
Users may give different
permissions to different
apps


<?
php



define('YOUR_APP_ID', '189978644425758');


define('YOUR_APP_SECRET', '6c2dc6234e25244aa8edca98fb2c991f');



function
get_facebook_cookie
($
app_id
, $
app_secret
) {



$
args

= array();



parse_str
(trim($_COOKIE['
fbs
_' . $
app_id
], '
\
\
"'), $
args
);



ksort
($
args
);



$payload = '';



foreach

($
args

as $key => $value) {



if ($key != 'sig') {



$payload .= $key . '=' . $value;



}



}



if (md5($payload . $
app_secret
) != $
args
['sig']) {



return null;



}



return $
args
;


}



$cookie =
get_facebook_cookie
(YOUR_APP_ID, YOUR_APP_SECRET);





if (
isset
($cookie)){






$user =
json_decode
(
file_get_contents
(



'
https://graph.facebook.com/me?access_token=' .



$cookie['
access_token
']));



}





?>

App ID is public, used to
identify your app

App secret is
private,

like a
password

Gets the token

Another way to access
facebook

data


Heroku

uses
FBUtils.php


A collection of open
source
facebook

utility scripts





$token =
FBUtils
::login(
AppInfo
::
getHome
());


if ($token) {




// Fetch the viewer's basic information, using the token just
provided



$basic =
FBUtils
::
fetchFromFBGraph
("
me?access_token
=$token");



$
my_id

=
assertNumeric
(
idx
($basic, 'id'));


}


What data is available?


https://developers.facebook.com/tools/explorer


See public data of any entity

A text description of the fields

Additional fields that can be
accessed

Create an access token to view private data

Getting User Permission (From
Facebook’s

tutorial)


<html>



<head>



<title>My
Facebook

App</title>



</head>



<body>



<div id="
fb
-
root"></div>



<script>



window.fbAsyncInit

= function() {



FB.init
({



appId

: <?
php

echo YOUR_APP_ID; ?>,



status : true,



cookie : true,



xfbml

: true



});



};



(function(d){



var

js
, id = '
facebook
-
jssdk
'; if (
d.getElementById
(id)) {return;}



js

=
d.createElement
('script'); js.id = id;
js.async

= true;



js.src = "//connect.facebook.net/
en_US
/all.js";



d.getElementsByTagName
('head')[0].
appendChild
(
js
);



}(document));



</script>






<div class="
fb
-
login
-
button" data
-
perms="
user_status
">



Login with
Facebook



</div>



</body>


</html>


Permissions you are requesting from
the user

http://developers.facebook.com/docs/
reference/api/permissions/

Getting User Permission (
Heroku
)


Using the
FBUtils
, there is a function called
FBUtils
::login in FBUtils.php


Permissions defined in the $scope variable

○
$scope =
'
user_likes,user_photos,user_photo_video_tags
';


Adding permissions requires the user to re
-
authenticate the app.


That’s all folks!


Questions? Need Help?


Feel free to email
skt@soe.ucsc.edu



Handy Resources


https://developers.facebook.com/docs/appsonf
acebook/tutorial/


http://developers.facebook.com/docs/samples/


http://php.net/manual/en/funcref.php