SPFx: A Facebook Feed webpart with custom UI
On SPFx
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:
- Limit (which limits the number of posts) it will be added by default for you with value 10
- 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",
},
- 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:
- 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
"
}
}
- 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 !
Happy Sharepointing !