This was a presentation given by Cardinal Blue (info@cblue.tw) for the Facebook Developer Garage Taipei on August 21, 2010

1. Graph API
Facebook Developer Garage Taipei
CardinalBlue
john, godfat @

2. Graph API
•What is it?
• What to do?
• What’s new?

3. Graph API: What is it?
• Launched at F8 (April 2010)
• Simple REST API
• Completely new!

4. Your apps
will fail...
soon.
APP

5. http://graph.facebook.com
http://graph.facebook.com/cocacola/picture
http://graph.facebook.com/hellokitty/picture
http://graph.facebook.com/4/picture
http://graph.facebook.com/search?q=taiwan

6. http://graph.facebook.com/hellokitty
{
"id": "40444963499",
"name": "Hello Kitty",
"picture": "http://profile.ak.fbcdn.net/hprofile-ak-snc4/
hs625.ash1/27537_40444963499_5441_s.jpg",
"link": "http://www.facebook.com/hellokitty",
"category": "Public_figures_other",
"username": "hellokitty",
"affiliation": "Sanrio Inc. USA",
"birthday": "11/01/-001",
"personal_info": "Hello Kitty's Official Fan Page!nHello Kitty lives in the
suburbs of London with her parents and her twin sister Mimmy. She has lots of
friends at school with whom she shares many adventures.nHer trademark is
her red bow that she always wears over her left ear.nHello Kitty is as heavy as
three apples and as tall as five apples.",
"personal_interests": "Traveling, listening to music, reading, eating yummy
cookies, and making new friends. As Hello Kitty always says, u201cYou can
never have too many friends!"nShe collects small, cute objects like ribbons,
hair accessories, candy, stars, and goldfish.",
"fan_count": 267913,
"type": "page"
}

7. Connections
http://graph.facebook.com/hellokitty?metadata=1
"metadata": {
"connections": {
"feed": "http://graph.facebook.com/hellokitty/feed",
"posts": "http://graph.facebook.com/hellokitty/posts",
"tagged": "http://graph.facebook.com/hellokitty/tagged",
"statuses": "http://graph.facebook.com/hellokitty/statuses",
"links": "http://graph.facebook.com/hellokitty/links",
"notes": "http://graph.facebook.com/hellokitty/notes",
"photos": "http://graph.facebook.com/hellokitty/photos",
"albums": "http://graph.facebook.com/hellokitty/albums",
"events": "http://graph.facebook.com/hellokitty/events",
"videos": "http://graph.facebook.com/hellokitty/videos"
}
}

8. object
connection
objects

9. http://graph.facebook.com/hellokitty/posts
{
"data": [
{
"id": "40444963499_420034668499",
"from": {
"name": "Hello Kitty",
"category": "Public_figures_other",
"id": "40444963499"
},
"message": "Check out the cute Hello Kitty Nerds tote featured in Us Weekly! Find this and more Hello Kitty
u201cNerdsu201d stuff at Sanrio.com and select Sanrio Boutiques.nnhttp://bit.ly/brVYHTn",
"picture": "http://photos-h.ak.fbcdn.net/hphotos-ak-ash2/
hs003.ash2/33501_420032663499_40444963499_4947695_6515646_s.jpg",
"link": "http://www.facebook.com/photo.php?pid=4947695&fbid=420032663499&id=40444963499",
"name": "Nerd Alert!",
"caption": "5 new photos",
"icon": "http://static.ak.fbcdn.net/rsrc.php/z2E5Y/hash/8as8iqdm.gif",
"type": "photo",
"created_time": "2010-08-20T01:04:30+0000",
"updated_time": "2010-08-20T01:04:30+0000",
"likes": 892,
"comments": {
"count": 76
}
},
{
"id": "40444963499_419689583499",
"from": {
"name": "Hello Kitty",
"category": "Public_figures_other",
"id": "40444963499"
},
"message": "Weu2019ve been playing with the Hello Kitty 35 mm Fisheye camera by Lomography and wanted to share
some of the fun pictures weu2019ve taken! Has anyone else taken any awesome pictures with their Hello Kitty Fisheye
cameras? Post them to our wall, we wanna see them! nnThe Hello Kitty Fisheye Camera is now available at Sanrio.com, select
Sanrio Boutiques, Urban Outfitters, Lomography.com and Lomography gallery stores. nnhttp://bit.ly/91unb4n",
"picture": "http://photos-f.ak.fbcdn.net/hphotos-ak-snc4/
hs389.snc4/45262_419686073499_40444963499_4941020_5615227_s.jpg",
"link": "http://www.facebook.com/photo.php?pid=4941020&fbid=419686073499&id=40444963499",
"name": "Fisheye Camera Photos",
"icon": "http://static.ak.fbcdn.net/rsrc.php/z2E5Y/hash/8as8iqdm.gif",
"type": "photo",

10. Most data
requires
explicit user
permission

11. Access Token
•Obtained when a user gives
permissions to a Facebook
application
•Used for making Graph API calls
For testing, try: http://oauth.twoalex.com

12. Access Token Usage
https://graph.facebook.com/me?access_token=...
https://graph.facebook.com/me/feed?access_token=...
https://graph.facebook.com/me/likes?access_token=...
https://graph.facebook.com/me/friends?access_token=
https://graph.facebook.com/4/feed?access_token=...
Explore Graph API:
http://aiphone1.heroku.com

13. How to get an access token
• Redirect to OAuth
• https://graph.facebook.com/oauth/authorize ...
• https://graph.facebook.com/oauth/access_token ...
• Javascript SDK
• User clicks on login button
• SDK stores the access token into a cookie

14. Extended Permissions
When authenticating, can ask the user for
extended permissions:
• user_photos, friend_photos
• user_likes, friend_likes
• read_stream, publish_stream
• email
• offline_access
• and many more....

17. Graph API
•What is it?
• What to do?
• What’s new?

18. Types of Facebook Apps
• Canvas FBML
• Canvas iframe
• Website
• Mobile website
• Mobile (native)
• Desktop

19. Canvas apps
• Canvas FBML
• Canvas iframe

20. Canvas apps
• Canvas FBML
• Canvas iframe

21. Major Changes for Canvas Apps
By end of this year (2010):
1. Canvas FBML will be deprecated...
you must use Canvas iframe!
2. The Facebook “session_key” will disappear...
you must use access_token for API calls!
3. The “fb_sig” parameters will disappear...
you must query and cache user data!

22. 1. Must use canvas iframe
• Many FBML tags not supported in iframe
• Use Javascript SDK to get XFBML (which is a
subset of FBML tags for iframe apps)
<fb:name uid=’4’></fb:name>
• After end of 2010, FBML apps cannot be created.

23. 2. Must use access token
• You need to upgrade your SDK library
• All calls to Facebook must be made with an
access token:
‣ FQL Query
https://api.facebook.com/method/fql.query?query=...&access_token=...
‣ Old REST API calls
https://api.facebook.com/method/stream.publish?access_token=...
https://api.facebook.com/method/pages.isFan?page_id=...&access_token=...

24. Facebook’s PHP SDK
http://github.com/facebook/php-sdk/
$me = $facebook->api('/me');
$mark = $facebook->api('/4');
$loginUrl = $facebook->getLoginUrl();
<a href="<?php echo $loginUrl; ?>">
Click to Login
</a>

25. Our Ruby SDK
http://github.com/cardinalblue/rest-graph

26. 3. Must query and cache user data
• Instead of many “fb_sig” parameters, Facebook will
only pass a signed_request (containing access
token and user id)
• Many parameters will disappear, so you will need
to query and cache them yourself...
• fb_sig_friends =>
https://graph.facebook.com/me/friends?...
• fb_sig_locale =>
https://api.facebook.com/methods/users.getInfo?...

28. Types of Facebook Apps
Authentication Markup Access Token
Canvas
FBML
FBML signed
request
Canvas
iframe Redirect to
OAuth
from cookie
Javascript
(placed by
Website SDK XFBML Javascript
SDK)
Mobile
website

29. Summary: What to do?
• Switch to new SDK
• Use new login and get permissions
• Convert all FQL queries and Old REST
API calls into Graph API calls
• Remove any references to fb_sig
• For performance, set up caching

30. Graph API
•What is it?
• What to do?
• What’s new?

31. What’s new?
• Open Graph Protocol
• Facebook Places API

32. anything can be an
object
http://graph.facebook.com/http://www.facebook.com
even an URL!

33. not much
information though
{
"id": "http://www.facebook.com",
"shares": 666837
}

34. but this one...
http://graph.facebook.com/http://www.imdb.com/title/tt0117500/
{
"id": "114324145263104",
"name": "The Rock (1996)",
"picture": "http://profile.ak.fbcdn.net/hprofile-ak-snc4/
hs344.snc4/41581_114324145263104_7037_s.jpg",
"link": "http://www.imdb.com/title/tt0117500/",
"category": "Movie",
"description": "Directed by Michael Bay. With Sean Connery, Nicolas Cage, Ed
Harris. A group of U.S. marines, under command of a renegade general, take over
Alcatraz and threat San Francisco Bay with biological weapons. A chemical weapons
specialist and the only man to have ever escaped from the Rock are the only ones
who can prevent chaos. Visit IMDb for Photos, Showtimes, Cast, Crew, Reviews, Plot
Summary, Comments, Discussions, Taglines, Trailers, Posters, Fan Sites",
"fan_count": 931
}

35. ...has connections
http://graph.facebook.com/http://www.imdb.com/title/tt0117500?metadata=1
{
"id": "118133258218514",
[...],
"metadata": {
"connections": {
"feed": "http://graph.facebook.com/http://www.imdb.com/title/tt0117500/feed",
"posts": "http://graph.facebook.com/http://www.imdb.com/title/tt0117500/posts",
"tagged": "http://graph.facebook.com/http://www.imdb.com/title/tt0117500/tagged",
"statuses": "http://graph.facebook.com/http://www.imdb.com/title/tt0117500/statuses",
"links": "http://graph.facebook.com/http://www.imdb.com/title/tt0117500/links",
"notes": "http://graph.facebook.com/http://www.imdb.com/title/tt0117500/notes",
"photos": "http://graph.facebook.com/http://www.imdb.com/title/tt0117500/photos",
"albums": "http://graph.facebook.com/http://www.imdb.com/title/tt0117500/albums",
"events": "http://graph.facebook.com/http://www.imdb.com/title/tt0117500/events",
"videos": "http://graph.facebook.com/http://www.imdb.com/title/tt0117500/videos"
}
},
"type": "page"
}

36. adding <meta> tag
to any web page
turns it into a
facebook object

37. Open Graph Protocol

38. Facebook Places

39. Graph API for checkins
Extended permissions:
user_checkins, friend_checkins
https://graph.facebook.com/[user id]/checkins
https://graph.facebook.com/[place page id]/checkins
https://graph.facebook.com/search?type=checkins

40. See where your friends have checked in:
http://fbfetcher.heroku.com/
welcome/places

41. Graph API
• What is it?
Simple new REST API with OAuth2.0
• What to do?
Rewrite your apps using new SDKs
• What’s new?
Open Graph, Facebook Places.