open graph api and how to use it : facebook developers circle meetup 2017
TRANSCRIPT
AAYUSH SHRESTHA
FIND ME AT :
FB.COM/SHRESTHAAAYUSH
@AAYUSHSHRESTHA
UI/UX DEVELOPER - VIVEKA HEALTH CO-FOUNDER - LISHN
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
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
INTRODUCTION
SOCIAL GRAPH - EDGES
▸ The connection between these “things” are edges.
▸ Feed
▸ Tagged
▸ Posts
▸ Picture
▸ Friends
▸ Activities
▸ Interests
▸ Likes
▸ Photos
▸ Statuses
▸ The information about these “things” are fields.
▸ User has : name, age, birthday, etc.
▸ Page has : name, description, category, etc
INTRODUCTION
SOCIAL GRAPH - FIELDS
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 Explorerhttp://developers.facebook.com/tools/explorer
LET’S USE GRAPH API
TRAVERSING THROUGH THE GRAPH
▸ Authentication : OAuth 2.0
▸ Selection (or Query)
▸ Basic Operations (Publishing, Updating and Deleting)
▸ Searching
▸ Introspection
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,name2./me?field=album.limit(10){name,likes,count},photos3./album_id4./page_id
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/friends2. /me/friends/friend_id3. /albums4. /photos?type=uploaded
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’}
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!!
LET’S USE GRAPH API
DELETING
▸ Make DELETE Request on the node
▸ graph.facebook.com/{node_id} - DELETE Request
▸ TRY THESE
1./{story_id}
LET’S USE GRAPH API
SEARCHING
▸ graph.facebook.com/search
▸ TRY THESE
1./search?q=john&type=user2./search?q=facebook+meetup&type=event3./search?q=coffee&type=place¢er={lat},{lon}&distance=1000
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
OPEN GRAPH STORIES
OPEN GRAPH STORIES
▸ Rich, Structured Posts
▸ Strongly Typed API
▸ Implemented using
▸ Web SDK (JS)
▸ Android SDK
▸ iOS SDK
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
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
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'} },
})
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
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" />
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