Note: Due to security changes in the Facebook API, this approach may not work with new app registrations.

When building Intranets with SharePoint I often get asked to provide the companies Facebook feed on the home page. Bringing the external Social Activity into the Intranet can be a good way for all the staff to keep up to date with what's going on. I thought I'd share this web part so this post shows how to get it installed and how it works.

There is also a post on a Twitter Web Part.

TL:DR;
  • Signup as a Facebook developer to get an access token
  • git clone https://github.com/TjWheeler/sp-clientapps
  • cd sp-clientapps\PowerShell
  • .\Release.ClientApp.ps1 -siteUrl https://mysharepoint.sharepoint.com -username "myuser@mysharepoint.onmicrosoft.com" -clientApps "C:\Repos\sp-clientapps\Client Apps\Common","C:\Repos\sp-clientapps\Client Apps\Facebook"
  • Add the web part to a publishing page, click Add Web Part -> Client Apps - > Facebook Web Part
  • Click the Gear icon to configure
  • Publish your page

Summary

To use this Facebook Web Part you'll need to:

  1. Sign up as a Facebook Developer (Free)
  2. Run the PowerShell scripts to deploy
  3. Add the web part to a page and configure it

Let's see the web part running, then we'll jump into setting it up.
I'm bringing in the Microsoft AU Facebook feed since we are demoing a SharePoint solution, but this is configurable.

How it works

My name for this type of solution is a SharePoint Client App. Which means it runs completely client side and is structured in a way that allows for automated delivery using PowerShell.
This web part uses:

  • jQuery 3.2.1 - Automatically loaded if jQuery is not already loaded when the web part starts.
  • momentJs - Always loaded
  • font-awesome 4.7 - Always loaded
  • bootstrap-grid - This is just the responsive grid styles for bootstrap 3.3.7

Note: You don't need to install any of these, they are part of the web part.

The web part does the following:

  • Reads configuration from a list called Client App Config
  • Creates a request to the Facebook API
  • Fetches the posts on a specific page (by the page owner only)
  • Renders the posts to the page by using jQuery to update the DOM
  • Renders out a link to the Facebook Page using the configuration

There's also a few nice uX things like a subtle fade in, automatic refresh option and a few others.

Facebook Rate Limits

It's worth pointing out that Facebook does have a Rate Limit. For most people this won't be an issue, but if you are using the automatic refresh, or you have a heap of users you might want to plan out how many times you think the web part will be hitting Facebook. Each time this web part renders, it will hit the API once. If you find yourself hitting the limits, there is an alternative solution design where the results are cached in a list in SharePoint, and every user will just hit the cache. I've done that with a Twitter Web Part, because Twitter's rate limits are substantially lower than Facebooks.

Getting an Access Token

To authenticate you, Facebook requires you hit the API with an Access Token, which will be unique to you and your app.
There's a detailed guide on the Facebook site Creating an App Id.

You will need to sign up as a Facebook Developer and register an app. You won't actually be building or publishing a Facebook App, its just needed to identify you in order to allow the web part to access someones public feed.
This process should only take a few minutes, and you do not need to submit your app for review.
The aim of this process is to acquire an Access Token.

  1. Login to Facebook
  2. Create a Developer Account
  3. Create a new Facebook App
  4. Get a token for your App

Caution: I've seen a few sites telling you how to get an access token, they even offer to get the token for you. All you need to do is put your app id and secret into their page and they will retrieve it for you. Wow, while I'm at it maybe I should give them my credit card number and personal details too. You don't need to give them anything, check out the link in Step 4, Facebook gives it to you.

Take note of the App Token, we'll use it when configuring the Web Part.

Deploying the Web Part

Grab the source from my GitHub repository sp-clientapps
Either download it, or use GIT

git clone https://github.com/TjWheeler/sp-clientapps
cd sp-clientapps

Run the deployment which uses the SharePoint Client Side Object Model:
Deploy to SharePoint Online - Example

This example deploys the Common and Facebook Client Apps to a Site Collection in SharePoint Online.

cd PowerShell
.\Release.ClientApp.ps1 -siteUrl https://mysharepoint.sharepoint.com -username "myuser@mysharepoint.onmicrosoft.com" -clientApps "C:\Repos\sp-clientapps\Client Apps\Common","C:\Repos\sp-clientapps\Client Apps\Facebook"

Note: Check your paths, as this assumes you have cloned to C:\Repos\sp-clientapps

Deploy to SharePoint 2013 - Example

This example deploys the Common and Facebook Client Apps to a Site Collection in SharePoint 2013.

cd PowerShell
.\Release.ClientApp.ps1 -siteUrl https://mysharepoint.sharepoint.com -username "mydomain\myuser" -clientApps "C:\Repos\sp-clientapps\Client Apps\Common","C:\Repos\sp-clientapps\Client Apps\Facebook" -spOnline:$false -csomVersion 15

Note: Check your paths, as this assumes you have cloned to C:\Repos\sp-clientapps

Client Apps are deployed to {SiteCollection.URL}/Style Library/Client Apps/[Client App Name].
Typically they are html pages hosted within a Content Editor Web Part, or perhaps a Script Editor. This allows the ability to still use the "Add Web Part" function in SharePoint by a user, here's an example:

So really, the Facebook web part is actually a Content Editor Web Part that points to /Style Library/Client Apps/Facebook/app.html and I put on a shiny new icon.

This works really well and allows us to embed a client side app in a page, from there it will load everything we need to run the app.

What I've done here is to build a reusable Settings feature that only shows in edit mode. So after the web part is added to the page, you see:

Clicking on the Gear Icon, the control kicks into life and slides down a configuration panel.

Here's what's happened:

  • The client app starts up, detects Edit Mode and loads up the configuration from a list called "Client App Config", which is basically a key value pair data store for all the client apps.
  • As there was no config yet, its using the default values.
  • The app uses jQuery to update the DOM, and wire up a click event on the Update button.

The thing that's worked well for me is that this is a reusable component that I've integrated into multiple client apps, saving a bunch of time and still providing a similar experience for configuration of the web part.

After entering the configuration we can save this page and let the app do its thing.
There is a brief loading animation, then the web part fades in.

Each thumbnail image has a small icon (bottom right) to indicate if its a video, link, story or photo. The likes and comments are shown along with how long ago in a user friendly way. The read more button at the bottom of the web part will link to whatever the configuration value is for "Read More Link Url".

Web Part Configuration

Once the web part is added to the page, click the Gear icon. The configuration values are:

  • Title - Optional, if specified renders out a title with the value you enter here and a facebook font-awesome icon.
  • Access Token - This is the value you got from Facebook in the Get an Access Token section and is used to identify you when you call the Facebook API.
  • API Version - This web part was built using version 2.9 of the API. Facebook updates this every now and then and eventually deprecates the older version. This value is used to aid in upgrading against the API. Leave it as the default 2.9.
  • Refresh Seconds - If set to a number greater than 0 the web part will check for any new posts every X seconds. Be careful not to make this value too low or you may end up hitting the Rate Limits. I'd recommend at least 60 seconds if you want to refresh but it will depend on your user base.
  • Page Id - This is the identifier of the Facebook page you want to query. I get this by looking at the url of the logo image on that site. Eg; https://www.facebook.com/488310257929059/photos/523757901050961/
    The page id is the first set of numbers, in this case 488310257929059.
  • Page Size - How many posts to show. (Note there is no paging support at this stage so this number shows the most recent X posts. It will also only show posts by the page owner)
  • Read More Link Text - The bottom of the web part contains a button that is intended to link to the Facebook page. This is the text of that button.
  • Read More Link URL - This is the URL of the button. Generally you want this to be the actual Facebook page Url, in our demo this is: https://www.facebook.com/MicrosoftAU
  • Rollup Characters - This number defines how many characters to show before the "...read more" link is displayed. Clicking on that link shows the full post and hyperlinks any hashtags.
  • Default Icon - (Optional) If no thumbnail image can be found, the url specified here will be used to render an image in its place. This could be your company logo, or a default stock image.

Final Notes

These client apps require the presence of the Style Library which is provisioned in a Publishing Site. You could create this library manually for non-publishing sites but this scenario has not been tested.

The Client App "Common" is a special Client App that should be deployed first. Other Client Apps will utilise libraries or other assets from here.
If you don't want to trust the CSOM DLL's in the repo, the versions can be downloaded from:
15 - https://www.nuget.org/packages/Microsoft.SharePoint2013.CSOM/
16 - https://www.nuget.org/packages/Microsoft.SharePointOnline.CSOM/
The assemblies must be extracted and placed in the CSOM/15 or CSOM/16 folder.

...and here's the final result.