Hello, you may be here to know how to display your Facebook feed onto your SharePoint page.
Firstly, you have to register an app at Facebook Developers site and then you get ClientId and ClientSecret, but to get an access_token use below url string:
https://graph.facebook.com/oauth/access_token?client_id={enterClientId}&client_secret={enterClientSecret}&grant_type=client_credentials
Once you have this access_token, use it in the API to get access to the user account and get user feed.
Optional: Use Graph API Explorer tool to get an idea which fields you need.
Here is a sample code:
Next, you have to create a controller as shown:
Then you have to publish the API to your Azure instance, here is test site url: https://{enteryoursite}.azurewebsites.net/api/facebook/GetFacebookFeed?fbUserId={enterFbUserId}
Finally you can use this url in SharePoint using JQuery:
Place below code to a Sharepoint master gallery file, for example: /script/custom.js
Then create a SharePoint page and in edit mode, add a Script editor web part and add below snippet:
Once you save the page, you will see the 20 recent posts loaded onto the web part.
Happy Coding...Hope you like this post!!! Please share or comment if you like it.
Firstly, you have to register an app at Facebook Developers site and then you get ClientId and ClientSecret, but to get an access_token use below url string:
https://graph.facebook.com/oauth/access_token?client_id={enterClientId}&client_secret={enterClientSecret}&grant_type=client_credentials
Once you have this access_token, use it in the API to get access to the user account and get user feed.
Optional: Use Graph API Explorer tool to get an idea which fields you need.
Here is a sample code:
//Helper class
using Newtonsoft.Json;
using System;
namespace Integration.Facebook
{
public static class FbHelper
{
//returns Facebook Feed
public static ICollection< FbFeedItem > ReadFeed(string fbUserId, string accessToken)
{
/***
* Graph API v2.4
* /{user-id}/feed
* The feed of posts (including status updates) and links published by this person, or by others on this person's profile. There are other edges which provide filtered versions of this edge:
* /{user-id}/links shows only the links that were published by this person.
* /{user-id}/posts shows only the posts that were published by this person.
* /{user-id}/statuses shows only the status update posts that were published by this person.
* /{user-id}/tagged shows only the posts that this person was tagged in.
*
***/
//gets recent 20 user posts when limit=20
const string UriJson = "https://graph.facebook.com/v2.4/{0}/posts?fields=message,description,created_time,id,name,link,picture,from,status_type&limit=20&access_token={1}";
var returnFbFeedItems = new List< FbFeedItem >();
try
{
var fbJsonString = Core.Utilities.Json.GetJsonString(String.Format(UriJson, fbUserId, accessToken), null, null, true);
//create a stream to hold the contents of the response and create Facebook Object
var fbObject = JsonConvert.DeserializeObject< FbFeedJson >(fbJsonString);
if (fbObject == null || !fbObject.Data.Any()) return returnFbFeedItems;
else
{
if (fbObject.Data != null)
{
//return feed
returnFbFeedItems = fbObject.Data.Select(fbItem => new FbFeedItem
{
Message = fbItem.Message,
Description = fbItem.Description,
CreatedTime = fbItem.CreatedTime,
PostId = fbItem.Id,
Picture = fbItem.Picture,
Link = fbItem.Link,
Name = fbItem.Name,
FromName = fbItem.From.Name,
FromId = fbItem.From.Id,
StatusType = fbItem.StatusType
}).ToList();
}
}
}
catch (Exception ex)
{
Console.WriteLine("Error : " + ex);
}
return returnFbFeedItems.ToList();
}
}
}
Next, you have to create a controller as shown:
//Facebook controller
public class FacebookController : ApiController
{
public ICollection< FbFeedItem > GetFacebookFeed(string fbUserId)
{
return Integration.Facebook.FbHelper.ReadFeed(fbUserId);
}
}
Then you have to publish the API to your Azure instance, here is test site url: https://{enteryoursite}.azurewebsites.net/api/facebook/GetFacebookFeed?fbUserId={enterFbUserId}
Finally you can use this url in SharePoint using JQuery:
Place below code to a Sharepoint master gallery file, for example: /script/custom.js
//Facebook Feed
function _initFacebookFeed(FbUserId) {
var fbFeed = $('#facebook-feed');
// get facebook posts from api
function __getFacebookPosts(callback) {
var apiUri = 'https://{enteryoursite}.azurewebsites.net/api/facebook/GetFacebookFeed?fbUserId=';
$.ajax({
url: apiUri + FbUserId,
type: 'GET',
success: function (result) {
callback(result);
},
error: function () {
//fbFeed.closest('.ms-webpartzone-cell').hide();
}
});
}
// format the data returned from the facebook api
function __processFacebookPosts(posts) {
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var facebookPostsHtml = '';
var message;
var link;
var description;
var picture;
var date;
var post;
for (var post in posts) {
message = posts[post].Message;
description = posts[post].Description;
link = posts[post].Link;
picture = posts[post].Picture;
date = date.match(/([0-9]{4})\-([0-9]{1,2})\-([0-9]{1,2})/);
date = date[3] + ' ' + months[date[2] - 1] + ' ' + date[1];
if (message.length > 0) {
if ( message.length > 180 ) {
message = message.substring(0, 180) + '...';
}
if (picture != null) {
post = '- '+facebookPostsHtml+'
Then create a SharePoint page and in edit mode, add a Script editor web part and add below snippet:
//Facebook Feed
Once you save the page, you will see the 20 recent posts loaded onto the web part.
Happy Coding...Hope you like this post!!! Please share or comment if you like it.
