Implementing feed of Facebook page in the website - facebook-graph-api

Question

I have to implement the Facebook feed (our website page in Facebook) in the home page.
I tried with this plugin (https://developers.facebook.com/docs/plugins/like-box-for-pages), but I couldn't change the display style. Example, I don't want to display logo, page title and images in the feed.
Graph API + JSON + jQuery seems the way to get and customize the Facebook feed before adding website. Image is attached for how to display the feed.
I went through the API's page of Facebook. But, I need some direction to follow if anyone have already done this.
I am using the below to get the feed.
$(document).ready(function () {
$.ajax({
url: 'https://graph.facebook.com/1234/feed?access_token=cxcx&callback=?', //Replace with your own access token
dataType: 'json',
success: displayFacebookFeed,
error:alertError
});
});
It's working fine, but the message I am accessing has links, which comes as text.
var html="";
$.each(result.data, function (i, item) {
var body = item.message;
if (!body) {
body = item.description;
}
html += "<li>" + body + "</li>";
});
So for an example.
9 Sensational Traits of Highly Promotable Employees | Inc.com https://www.inc.com/jeff-haden/9-sensational-traits-of-highly-promotable-employees.html
In the above feed, I want this as link, but its coming as plain text.
Is there any suggestion?

Answer 1

How about the Activity Feed for your domain, using the Activity Feed plugin?
https://developers.facebook.com/docs/plugins/activity

Answer 2

Here is a solution I came up with for a project a while back. Definitely not plug+play since it is integrated with my javascript architecture but hopefully can get you started:
"use strict";
var Facebook = function(sb, options) {
options = options || {};
var language = options.language || "en_US";
var self = this;
var access_token = encodeURIComponent(YOUR ACCESS TOKEN);
var listenerQueue = [];
var loading = false;
var FACEBOOK;
var appId = YOUR APP ID;
if (window.FB) {
FACEBOOK = window.FB;
}
(function _load() {
if (!loading) {
loading = true;
window.fbAsyncInit = function() {
// init the FB JS SDK
FACEBOOK = window.FB;
FACEBOOK.init({
appId : appId,
status : true,
oauth : true,
cookie : true,
xfbml : true
});
sb.publish("facebook:initialized");
};
// Load the SDK asynchronously
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/" + language + "/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
}
})();
(function() {
sb.subscribe('facebook:initialized', function() {
listenForLogin();
if (listenerQueue.length) {
clearListenerQueue();
}
});
})();
function listenForLogin() {
FACEBOOK.Event.subscribe('auth.authResponseChange', function(response) {
if (response.status === 'connected') {
getLoggedInUserData();
} else {
}
});
}
function getLoggedInUserData() {
FACEBOOK.api('/me', function(response) {
sb.publish('facebook:loggedIn', response);
});
}
function clearListenerQueue() {
if (FACEBOOK) {
for (var i=0; i<listenerQueue.length; i++) {
listenerQueue[i].fn.apply(this, listenerQueue[i].args);
}
listenerQueue = [];
}
}
function sharePage(url, options) {
var opts = options || {};
if (FACEBOOK) {
FACEBOOK.ui(
{
method: 'feed',
name: opts.name || '',
caption: opts.caption || '',
description: opts.description || '',
link: url,
picture: opts.picture || ''
},
function(response) {
var success = (response && response.post_id);
sb.publish('facebook:shared', {response : response, success : success});
}
);
} else {
listenerQueue.push({fn : sharePage, args : [url, options]});
}
return self;
}
function getPosts(fbHandleOrId, options) {
options = options || {};
if (FACEBOOK) {
var limit = options.limit || '10';
var graphPOSTS = '/' + fbHandleOrId +'/posts/?date_format=U&access_token=' + access_token + "&limit=" + limit;
FACEBOOK.api(graphPOSTS, function(response) {
sb.publish('facebook:gotPosts', {response : response, handleUsed : fbHandleOrId});
});
} else {
listenerQueue.push({fn : getPosts, args : [fbHandleOrId, options]});
}
}
function getStatuses(fbHandleOrId, options) {
options = options || {};
if (FACEBOOK) {
var limit = options.limit || '10';
var graphStatuses = '/' + fbHandleOrId + "/feed/?access_token=" + access_token + "&limit=" + limit;
FACEBOOK.api(graphStatuses, function(response) {
sb.publish('facebook:gotStatuses', {response : response, handleUsed: fbHandleOrId});
});
} else {
listenerQueue.push({fn : getStatuses, args : [fbHandleOrId, options]});
}
}
function getNextPageOfPosts(nextPostsUrl, options) {
options = options || {};
if (FACEBOOK) {
FACEBOOK.api(nextPostsUrl, function(response) {
sb.publish('facebook:gotNextPosts', {response : response, handleUsed : fbHandleOrId});
});
} else {
listenerQueue.push({fn : getNextPageOfPosts, args : [nextPostsUrl, options]});
}
}
function getPublicUserInfo(fbHandleOrId, options) {
options = options || {};
var graphUSER = '/'+ fbHandleOrId +'/?fields=name,picture&callback=?';
if (FACEBOOK) {
FACEBOOK.api(graphUSER, function(response) {
var returnObj = {response : response, handleUsed : fbHandleOrId};
sb.publish('facebook:gotPublicUserInfo', returnObj);
});
} else {
listenerQueue.push({fn : getPublicUserInfo, args : [fbHandleOrId, options]});
}
}
function getLikes(pageHandle, options) {
options = options || {};
var graphLIKES = '/' + pageHandle + '/?fields=likes';
if (FACEBOOK) {
FACEBOOK.api(graphLIKES, function(response) {
var returnObj = {response : response, handleUsed: pageHandle};
sb.publish('facebook:gotLikes', returnObj);
});
} else {
listenerQueue.push({fn : getLikes, args : [pageHandle, options]});
}
}
function login() {
if (FACEBOOK) {
FACEBOOK.getLoginStatus(function(response) {
if (response.status !== "connected") {
// not logged in
FACEBOOK.login(function() {}, {scope : 'email'});
} else {
getLoggedInUserData();
}
});
} else {
listenerQueue.push({fn : login, args : []});
}
}
function getNextPageOfPosts(callback) {
callback = callback || function() {};
}
return {
getLikes : getLikes,
getPublicUserInfo : getPublicUserInfo,
getCurrentUser : getLoggedInUserData,
getNextPageOfPosts : getNextPageOfPosts,
getPosts : getPosts,
getStatuses : getStatuses,
sharePage : sharePage,
login : login
}
};

Answer 3

Facebook has now just added;
NOTE: With the release of Graph API v2.3, the Activity Feed plugin is deprecated and will stop working on June 23rd 2015.
The Activity feed displays the most interesting, recent activity taking place on your site, using actions (such as likes) by your friends and other people. https://developers.facebook.com/docs/plugins/activity

Answer 4

you can use the FB Javascript SDK
if i remember correctly this should work should users already have a facebook permission setup for your web site. or you don't mine asking them for basic authentication
FB.login(function(){
FB.api('/v2.0/page_group_address_or_id/feed', 'GET', '', function(feedContent){
// handle rendering the feed in what ever design you like
console.log(feedContent);
});
});
the only other way would be to use server side to get an oAuth access and use your own access token though php making a request to the GraphAPI server