Embed facebook page feed on my website

This post explains on how to create Facebook App ID, App secret, Access Token and retrieve facebook feed using facebook Graph API and any server side language. If you are looking for a way to display your facebook page feeds on your feeds then this post would help you.

Different ways of embedding Facebook feed on a website

There are different options to embed Facebook feed on a website depending on how the website is developed.

1. If your website is setup using a CMS like Wordpress: There would be lot of plugins which can be easily installed and configured. This doesn't require any programming knowledge. Here is an example of one such app - social streams

2. If your website has just few HTML pages without any server side code: Then you can use the Facebook page plugin provided by Facebook. This requires a very basic knowledge of HTML. Detailed steps on the implementation are documented here - Facebook Page Plugin

3. If your website is developed using a service side language: If your website is developed using some server side language like asp.net, java or PHP and you want to customize the way you want to display the feed on to your website, then this blog post is the one you are looking for.

Creating facebook App ID, App Secret and Access Token

1. Login to facebook developers page using your facebook account here – https://developers.facebook.com.

2. From the top right drop down click on ‘Add a New App’.

3. Select the platform as WWW(Website). In our example we selected WWW, as we are displaying facebook feed on a website.

4. Provide some name for your new app and create the App ID. (No – Is this a test version of another app?)

5. Once you are finished, select the newly created app from the top right drop down. If your new app is not listed there, refresh the page and check.

6. Once your app is opened, you could see your ‘App ID’ and ‘App Secret’. Make a note of these two.

7. Place your App id and App secret in the URL below and run it in the browser to get the Access Token.

    https://graph.facebook.com/oauth/access_token?client_id=CLIENT_ID&client_secret=APP_SECRET&grant_type=client_credentials
   

8. Now your access token is ready and you can use this to get the feed details.

Note: Do not share your Access Token and also do not use your AccessToken in your javascript because it can be seen by anyone. It is suggested to use only inside a service side language

Getting page feed using Access Token, Facebook Graph API

1. In the facebook developer page, select your app and go to Tools&Support at the top. Then go to Tools>Graph API Explorer.
2. There will a access token field with some value. It is a temporary access token and would expire soon. SO just ignore and don’t use that. Click on ‘Get Token’ and the ‘Get Page Access Token’ and then authorize ‘Graph API Explorer’ to manage your pages.
3. There will a FQL Query field below that. You can enter any FQL query and click on submit to check the result of your query. Here we shall build a FQL query to get the facebook page posts feed.

Sample FQL Query: FBPageName/posts?fields=full_picture,picture,link,message,created_time&limit=5&access_token=YOUR_ACCESS_TOKEN_HERE

The above FQL query gets the below fields of the facebook page posts.

• full_picture
• picture
• link
• message
• created_time

The number of feeds you need can be set by using the parameters ‘limit’. Eg:limit=5 You can even test this link directly from the browser with complete URL as shown below and get the JSON result.

https://graph.facebook.com/FBPageName/posts?fields=full_picture,picture,link,message,created_time&limit=5&access_token=YOUR_ACCESS_TOKEN_HERE

Once you could see the JSON response, you are done with most of the part. Now use any of your favorite server side language and do a GET request to the above URL and get the JSON response. Populate that response in to Html and you could see the facebook posts feed.

Please do share if you like this post! Thanks