facebook-graph-api

#facebook-
graph-api
Table of Contents
About 1

Chapter 1: Getting started with facebook-graph-api 2

Remarks 2

Examples 2

Installation or Setup 2

Chapter 2: Display Facebook feed, data on your website 3

Examples 3

Getting FaceBook Access Token to read and write to the Facebook social graph 3

Credits 6
About
You can share this PDF with anyone you feel could benefit from it, downloaded the latest version
from: facebook-graph-api

It is an unofficial and free facebook-graph-api ebook created for educational purposes. All the
content is extracted from Stack Overflow Documentation, which is written by many hardworking
individuals at Stack Overflow. It is neither affiliated with Stack Overflow nor official facebook-
graph-api.

The content is released under Creative Commons BY-SA, and the list of contributors to each
chapter are provided in the credits section at the end of this book. Images may be copyright of
their respective owners unless otherwise specified. All trademarks and registered trademarks are
the property of their respective company owners.

Use the content presented in this book at your own risk; it is not guaranteed to be correct nor
accurate, please send your feedback and corrections to [email protected]

https://riptutorial.com/ 1
Chapter 1: Getting started with facebook-
graph-api
Remarks
The Facebook Graph API is one of the most useful tools available to app developers today. It is
used to integrate Facebook functionality such as login or retrieving photos, friends and other data
one might need from Facebook into one's own app.

Examples
Installation or Setup

Detailed instructions on getting facebook-graph-api set up or installed.

Read Getting started with facebook-graph-api online: https://riptutorial.com/facebook-graph-

api/topic/2364/getting-started-with-facebook-graph-api

https://riptutorial.com/ 2
Chapter 2: Display Facebook feed, data on
your website
Examples
Getting FaceBook Access Token to read and write to the Facebook social
graph

This document details the steps to obtain the facebook access tokens and the using the tokens to
fetch FB feeds.

Example: A live example is available in

https://newtonjoshua.com

Introduction to Graph API: The Graph API is the primary way to get data in and out of
Facebook's platform. It's a low-level HTTP-based API that you can use to query data, post new
stories, manage ads, upload photos and a variety of other tasks that an app might need to do.

FaceBook Apps:

https://developers.facebook.com

Create a Facebook app. You will get an App_Id and App_Secret

Graph API Explorer:

https://developers.facebook.com/tools/explorer/{{App_Id}}
/?method=GET&path=me%2Ffeed&version=v2.8

You will get an access_token which is short lived. So this will be our short_lived_access_token.

note: while creating access token select all the fb fields that you require.This will give permission
to the access token to fetch those fields.

Access Token Extension:

https://graph.facebook.com/oauth/access_token?grant_type=fb_exchange_token&client_id=
{{App_Id}}&client_secret={{App_Secret}}&fb_exchange_token={{short-lived-
access_token}}

You will get an access_token with a validity of 2 months.

Access Token Debugger:

https://developers.facebook.com/tools/debug/accesstoken?q={{access_token}}
&version=v2.8

https://riptutorial.com/ 3
you can check check the details of the access_token.

Facebook SDK for JavaScript: Include the below JavaScript in your HTML to asynchronously
load the SDK into your page

<script>
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {
return;
}
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

Graph API: Let's make an API call to get our FB id, profile pic, cover pic and feeds.

<script>
window.fbAsyncInit = function () {
FB.init({
appId: '{{App_Id }}',
xfbml: true,
version: 'v2.7'
});
FB.api(
'/me',
'GET', {
fields: 'id,picture{url},cover,feed',
access_token: {{access_token}}
},
function (response) {
if (response.error) {
console.error(response.error.message);
}
if (response.picture.data.url) {
profilePic = response.picture.data.url;
}
if (response.cover.source) {
coverPic = response.cover.source;
}
if (response.feed.data) {
feeds = response.feed.data;
feeds.forEach(function (feed) {
// view each feed content
});
}
if (response.feed.paging.next) {
nextFeedPage = response.feed.paging.next;
// a request to nextFeedPage will give the next set of feeds
}

}
);
};

</script>

https://riptutorial.com/ 4
Use the Graph API Explorer to design your querry that should be entered in the 'fields' (eg:
'id,picture{url},cover,feed')

Now you can fetch your facebook data from Facebook Graph API using your access_token. refer
https://developers.facebook.com/docs/graph-api/overview/

note: Your access_token will expire in 2 months. Create a new access_token after that.

Read Display Facebook feed, data on your website online: https://riptutorial.com/facebook-graph-

api/topic/7373/display-facebook-feed--data-on-your-website

https://riptutorial.com/ 5
Credits
S.
Chapters Contributors
No

Getting started with

1 Cameron637, Community
facebook-graph-api

Display Facebook
2 feed, data on your Newton Joshua
website

https://riptutorial.com/ 6