Open Graph API And How To Use It : Facebook Developers Circle Meetup 2017
3 likes2,398 views
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.
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!!
- 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¢er={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