open graph api and how to use it : facebook developers circle meetup 2017

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

Upload: aayush-shrestha

Post on 13-Apr-2017

198 views

Category:

Technology


2 download

TRANSCRIPT

OPEN GRAPH API AND HOW TO USE IT.

FACEBOOK DEVELOPERS MEETUP

AAYUSH SHRESTHA

FIND ME AT :

FB.COM/SHRESTHAAAYUSH

@AAYUSHSHRESTHA

[email protected]

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

▸ Representation of the information on Facebook▸ NODES

▸ EDGES

▸ FIELDS

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

LETS USE GRAPH API!!

BUT, HOLD ON!

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&center={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

ADVANCED STUFF

OPEN GRAPH STORIES

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

KEY CONCEPTS - ACTOR

OPEN GRAPH STORIES

KEY CONCEPTS - APP

OPEN GRAPH STORIES

KEY CONCEPTS - ACTION

OPEN GRAPH STORIES

KEY CONCEPTS - OBJECT

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

THANK YOU!!

FIND ME AT :

FB.COM/SHRESTHAAAYUSH

@AAYUSHSHRESTHA

[email protected]