Building a Facebook App - Courses

longtermagonizingInternet και Εφαρμογές Web

13 Δεκ 2013 (πριν από 3 χρόνια και 11 μήνες)

106 εμφανίσεις

(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