On

So , this post might look trivial or pretty straight forward. However, it's not about how complex it could be from SPFx point of view I hate to break it to you guys It's really simple.

If you would like to aggregate social posts from various platforms in one single view using your own UI elements and design this post could be useful. Otherwise, it will be a complete waste of time :). So yes you'd better embed your Facebook feed via an iframe if you don't want to customize the UI or aggregate multiple social posts in one view.

Before we start you need to have the following artefacts:
  • A  Facebook App (go to http://developer.facebook.com ) and follow simple steps to have your app created
  • A Facebook page for testing purpose / or use an existing page that you have access to.

To play around with Facebook graph API and take a look of how the feed JSON object is structured; you can navigate to graph explorer tool at https://developers.facebook.com/tools/explorer and try it out. The endpoint we are after is very simple which is a GET request to v3.1/{yourPageID}/feed

When you start playing around with the tool you will find out that there are two main parameters:
  1. Limit (which limits the number of posts) it will be added by default for you with value 10
  2. Fields (which dictates which fields you want to retrieve) if you didn't supply the fields you will have the default results set returned which is as below:
"data": [
    {
      "created_time": "2018-07-23T04:49:18+0000",
      "message": "Sydney Global Office 365 Developer Bootcamp 2018",
    },

  1. You will need the access token which is a bearer token passed part of the header of the request, for the purpose of this application you might choose one of two options:
    1. Use an application token --> this will require review of your app , see below what you get if you tried your app token
{
  "error": {
    "message": "(#10) To use 'Page Public Content Access', your use of this endpoint must be reviewed and approved by Facebook. To submit this 'Page Public Content Access' feature for review please read our documentation on reviewable features: https://developers.facebook.com/docs/apps/review.",
    "type": "OAuthException",
    "code": 10,
    "fbtrace_id": "
Hl1PW01GfO1
"
  }
}

  1. Use a page access token --> which will need you as an admin of the page to grant the app access to the page posts

The drawback of this option is that you will have a very short-lived access token and Facebook is no longer provide token that is never expires (offline access token since 2012 yup I'm referencing something that is deprecated for more than 6 years ago).

But there is still hope you can somehow extend your access token using the method documented here which will allow you to convert your short lived token (about 2 hours) into a long lived token which expires in 60 days

From SharePoint perspective we are going to create a simple webpart that has three properties
  • Limit
  • Page Id
  • Access Token
The webpart is very simple and straight forward, I didn't try to include any fancy styles and it's a single react component called FbPostList which is consists of list of FbPost components


The main issue here is , Do I want the site owner to update the access token every 60 days, it's sounds very irritating and utterly stupid to be honest :) so I've built an azure function that runs every 30 days and it is responsible of updating the access token which I've stored in storage account, the SharePoint webpart now is responsible to read the access token that is stored in storage table. also make sure to store your Facebook app secret somewhere safe (Azure key vault)

Happy Sharepointing !