How To Retrieve Facebook Page Feed on Website Using Javascript Facebook API!

Most of the web-developers now-a-days possess atleast some knowledge of Javascript, irrespective of the platform in which they are working. And Javascript implementation is very common! to use third party API’s in their websites. Facebook API is very popular because most of the people are using it in one or other way(Facebook likes/share/login with facebook). Facebook gives us robust implementation of Javascript API.

Here in this tutorial I am going to explain step by step process of retrieving Facebook Page Feed(posts/images/etc.,) on website using Javascript API.

Initialize Facebook JavaScript SDK

Compared to almost all the platforms out their in the world Javascript is very easy to use and integrate because of it’s light weight, and it can even be used as asynchronously.

Get the Javascript SDK code from https://developers.facebook.com/docs/javascript/quickstart

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : 'your-app-id',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v2.10'
    });
    FB.AppEvents.logPageView();
  };

  (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>

Before you call any api functions this piece of code must be initialized!
As you can see in the code FB.init function is asking appId and version. For that you need to goto https://developers.facebook.com/ and create one app get the appId and version of the app and change the appId and version values of FB.init() with your own values.

Using Graph API Explorer to make api call

You can goto https://developers.facebook.com/tools-and-support/
to Test, create, and authenticate API calls and debug responses. once you open graph API explorer you will find options like Application , Get Token and Get method with submit button.
1. First you need to select your application and then generate user access token by clicking on Get Token button, in the popup window select the options for which you want use the particular token after the submission it will ask again particular options Submit Review(If you are doing it for the first time you need to submit them for review).
2. In the Get method we are going to pass the parameters like yourpageID/photos?fields=images in response we will get JSON format data. Here I am particularly asking for photos.

Play with graph API explorer and find out your desired output

In our application we are going to make Graph API call like this

 
var token="Your- Token";
    FB.api(
       'Your Page-id'/photos?fields=images',
	'GET',
	{"fields":"images"},
            function(response) {
		console.log(response.data);
				
					}
	   )}
{access_token: token}); 

response data will be in response object handle it as you wish.

Any questions ask me in the comments I am happy to help you.