The document discusses the Open Graph API and how to use it. It provides an introduction to the Facebook social graph and its nodes, edges, and fields. It then covers how to use the Graph API including authentication, traversing the graph through selection, publishing, updating, deleting, searching, and introspection. It also discusses using the API to create Open Graph stories, including key concepts like actors, actions, objects, and how to implement actions and objects.

1. OPEN GRAPH API
AND HOW TO USE IT.
FACEBOOK DEVELOPERS MEETUP

2. AAYUSH SHRESTHA
FIND ME AT :
FB.COM/SHRESTHAAAYUSH
@AAYUSHSHRESTHA
AAYUSHONWEB@GMAIL.COM
UI/UX DEVELOPER - VIVEKA HEALTH
CO-FOUNDER - LISHN

3. INTRODUCTION
GRAPH API
▸ Primary way for apps to get data in and out of the
Facebook Social Graph
▸ HTTP Based REST API
▸ You can :
▸ query data
▸ post status and stories
▸ upload pictures and videos and more …
▸ V2.8

4. INTRODUCTION
SOCIAL GRAPH
▸ Representation of the information on Facebook
▸ NODES
▸ EDGES
▸ FIELDS

5. INTRODUCTION
SOCIAL GRAPH - NODES
▸ Every “thing”, such as a user, a photo, a comment, a page is a
node.
▸ User
▸ Photo
▸ Album
▸ Event
▸ Group
▸ Page
▸ Comment
▸ Story
▸ Video
▸ Link
▸ Note

6. INTRODUCTION
SOCIAL GRAPH - EDGES
▸ The connection between these “things” are edges.
▸ Feed
▸ Tagged
▸ Posts
▸ Picture
▸ Friends
▸ Activities
▸ Interests
▸ Likes
▸ Photos
▸ Statuses

7. ▸ The information about these “things” are fields.
▸ User has : name, age, birthday, etc.
▸ Page has : name, description, category, etc
INTRODUCTION
SOCIAL GRAPH - FIELDS

8. LETS USE GRAPH API!!

9. BUT, HOLD ON!

10. LET’S USE GRAPH API
BEFORE JUMPING IN
▸ Making Graph API calls require an Access Token
▸ Get your Access Token using Facebook Login or one of the
SDK’s
▸ Get familiar with the Graph API Explorer
http://developers.facebook.com/tools/explorer

11. LET’S USE GRAPH API
TRAVERSING THROUGH THE GRAPH
▸ Authentication : OAuth 2.0
▸ Selection (or Query)
▸ Basic Operations (Publishing, Updating and Deleting)
▸ Searching
▸ Introspection

12. LET’S USE GRAPH API
SELECTION - SELECTING NODES
▸ graph.facebook.com/{node_id}
▸ graph.facebook.com/{node_username}
▸ graph.facebook.com/{node_id}?fields=id,name
▸ TRY THESE
1./me?field=id,name
2./me?field=album.limit(10){name,likes,count},photos
3./album_id
4./page_id

13. LET’S USE GRAPH API
SELECTION - SELECTING CONNECTIONS
▸ graph.facebook.com/{node_id}?fields={connection_name}
▸ graph.facebook.com/{node_id}/{connection_name}
▸ graph.facebook.com/{node_id}/{connection_name}?
fields=id,name
▸ TRY THESE
1./me/friends
2./me/friends/friend_id
3./albums
4./photos?type=uploaded

14. LET’S USE GRAPH API
PUBLISHING
▸ Publishing is done in edges
▸ graph.facebook.com/{node_id}/{connection_name} - POST
Request
▸ TRY THESE
1./me/feed - Fields : message=Hello World!
2./me/feed - Fields : message=Hello World!, privacy = {value : ‘SELF’}

15. LET’S USE GRAPH API
UPDATING
▸ Make POST Requests, now on nodes
▸ graph.facebook.com/{node_id} - POST Request
▸ TRY THESE
1. /{node_id} - Fields : message=Hello World Again!!

16. LET’S USE GRAPH API
DELETING
▸ Make DELETE Request on the node
▸ graph.facebook.com/{node_id} - DELETE Request
▸ TRY THESE
1./{story_id}

17. LET’S USE GRAPH API
SEARCHING
▸ graph.facebook.com/search
▸ TRY THESE
1./search?q=john&type=user
2./search?q=facebook+meetup&type=event
3./search?q=coffee&type=place&center={lat},{lon}&distance=1000

18. LET’S USE GRAPH API
INTROSPECTION
▸ graph.facebook.com/{node_id}?metadata=1
▸ JSON comes with the metadata of the node
▸ What type of node is this?
▸ What are its fields and what do they represent?
▸ What connections does this node possess?
▸ TRY THESE
1./me?metadata=1

19. ADVANCED STUFF
OPEN GRAPH STORIES

20. OPEN GRAPH STORIES
OPEN GRAPH STORIES
▸ Rich, Structured Posts
▸ Strongly Typed API
▸ Implemented using
▸ Web SDK (JS)
▸ Android SDK
▸ iOS SDK

21. OPEN GRAPH STORIES
KEY CONCEPTS
▸ Actor : The person who posts the story
▸ App : The app that created the story
▸ Action : Activity the Actor performs (Verb)
▸ Object : The thing that the Actor interacts with

22. OPEN GRAPH STORIES
KEY CONCEPTS - ACTOR

23. OPEN GRAPH STORIES
KEY CONCEPTS - APP

24. OPEN GRAPH STORIES
KEY CONCEPTS - ACTION

25. OPEN GRAPH STORIES
KEY CONCEPTS - OBJECT

26. OPEN GRAPH STORIES
OPEN GRAPH STORIES ON WEB
▸ Create Facebook App ID
▸ Configure your web App
▸ You should have access to a public web server

27. OPEN GRAPH STORIES
OPEN GRAPH STORIES : ACTIONS
▸ Actions are verbs in stories
▸ Created using Graph API. e.g. to create a “like” action, we use
og.likes API Endpoint
FB.api({
'https://graph.facebook.com/me/og.likes',
'post',
{
object: obj,
privacy: {'value': 'SELF'}
},
})

28. OPEN GRAPH STORIES
OPEN GRAPH STORIES - ACTIONS
▸ Some Actions that are available to use
▸ og.likes
▸ og.follows
▸ save.saves
▸ book.reads
▸ book.rates
▸ games.achieves
▸ games.plays
▸ music.listens
▸ music.playlists

29. OPEN GRAPH STORIES
OPEN GRAPH STORIES : OBJECTS
▸ Created by adding meta tags on the page where your
content is.
<meta property="fb:app_id" content="148285558994270" />
<meta property="og:type" content="book" />
<meta property="og:url" content="https://aayushshrestha.github.io/AayushShrestha/
mynewbook.html" />
<meta property="og:title" content="I Like Cats" />
<meta property="og:image" content="http://www.rd.com/wp-content/uploads/sites/2/2016/04/01-cat-
wants-to-tell-you-laptop.jpg" />
<meta property="og:description" content="I Like Cats" />

30. OPEN GRAPH STORIES
OPEN GRAPH STORIES - OBJECTS
▸ Some Objects that are available to use
▸ article
▸ books.book
▸ books.author
▸ fitness.course
▸ game.achievement
▸ music.album
▸ music.song
▸ music.playlist
▸ place
▸ product
▸ restaurant.menu

31. THANK YOU!!
FIND ME AT :
FB.COM/SHRESTHAAAYUSH
@AAYUSHSHRESTHA
AAYUSHONWEB@GMAIL.COM