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?

this is the fact that facebook statuses are just text just they have a processor that they run are through before display to change links into HTML and any Open Graph standards, http://stackoverflow.com/questions/507436/how-do-i-linkify-urls-in-a-string-with-php as your using javascript you can just use http://stackoverflow.com/questions/37684/how-to-replace-plain-urls-with-links#answer-7123542 — Barkermn01, Aug 26 '14 at 12:45

score 1 · Answer 1 · answered Jul 23 '14 at 13:07

1

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

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

answered Jul 23 '14 at 13:07

Roemer

3,566
1
16
32

score 1 · Answer 2 · answered Jul 29 '14 at 06:23

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
    }
};

score 1 · Answer 3 · answered Mar 27 '15 at 17:38

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

score 0 · Answer 4 · answered Jul 29 '14 at 17:07

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

Implementing feed of Facebook page in the website

4 Answers4