Implementing feed of Facebook page in the website

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

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 2

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

Answer 3

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 4

How about the Activity Feed for your domain, using the Activity Feed plugin?

https://developers.facebook.com/docs/plugins/activity