Open Graph API And How To Use It : Facebook Developers Circle Meetup 2017

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