Amy Westlake

< Back to blog

Custom Javascript Facebook Feeds

Displaying a custom facebook page feed on your website

Get Your Access Token

For this custom feed you will need your facebook page url (this will either be a number or a name depending on how you’ve set your page up) and your access token.

To get your access token go to dev.facebook.com, sign in and create your App.

Get The Data

The only library you will need for this is jQuery, you could rewrite this in plain javascript if you really didn’t want to include jQuery but as it’s required for most projects so I’ll be sticking with it.

In your custom scripts file you need the following function.

function fbFetch(){
    var url = "https://graph.facebook.com/YOUR-PAGE-NAME-OR-ID/posts?access_token=YOUR-ACCESS-TOKEN&limit=15&callback=?"; // Limit can be changed to suit your needs

    $.getJSON(url,function(json){ // Get the data from the feed
      console.log(json); // Print it out into the console
  });
}; // end fbFetch
fbFetch(); // Call the function

Open your console and you should see something similar to the below:

Console log output of json data

It should be pretty obvious that each object is a post from your page, open the object and you’ll get all the data associated with it. Now we need to get that data onto your webpage, it’s no good to the customer in the console.

Displaying Your Feed

Create a div with a class of facebookfeed in your html, we will now attach the data to that div.

Inside the getJSON function, just after the console.log, add the following:

  var html = "<ul>";
  $.each(json.data,function(i,fb){
    html += "<li>" + fb.message + "</li>";
  });
  html += "</ul>";
  $('.facebookfeed').html(html);

If you reload your page the div will now be dynamically filled with the feed results.

Various Post Types

Depending on the results of your page feed you may get a nice and easy list of text only Facebook statuses but that’s unlikely. Your feed will more likely be a mix of status updates, shared posts, uploaded pictures and videos. This wont be the neatest, it will be a mix of text and long, ugly Facebook links. The way I’ve decided to handle this is to check for the data passed for each status and handle the output based on what’s passed.

Linking Up Posts

Each status will have a fb.link which is a url for the post itself, you may not want this, but it allows the user to view the post on Facebook.

Image Posts

If a post is an image upload it will have no fb.message field so we can detect if that is missing. If no message, simply print out that an image was uploaded.

if(!fb.message){
  html += "<li class='news__item'><a href='" + fb.link + "' target='_blank'><span class='message'>PAGE added a new photo</span></a></li>";
}

Shared

If the post is a shared post from another page the fb.status_type will be set to shared_story. We can check for this in the if-else statement and then output the relevant data instead of a horrible unreadable link.

else if(fb.status_type == 'shared_story'){
    html += "<li class='news__item'><a href='" + fb.link + "' target='_blank'><span class='message'>" + fb.description + "</span></a></li>";
}

Getting Images

If you want to get the image that’s been uploaded with the status you will need the fb.object_id and that id will need to be added to a graph.facebook.com url as below:

<img src='https://graph.facebook.com/"+ fb.object_id +"/picture'/>

Final Code

That should cover the most used status types, I’ve included all my code below as a reference but the benefits of this is being able to style how you like. Embeddable Facebook feeds are generally very ugly and slow loaded in an iframe, I’m much happier with this. It could also be extended to include likes, shares etc but for my purpose this is unnecessary. Just checkout the data in the console to have a look at what’s available and add it into the if-else statement.

function fbFetch(){
    var url = "https://graph.facebook.com/PAGE-NAME/posts?access_token=ACCESS-TOKEN&limit=5&callback=?";

    $.getJSON(url,function(json){
      var html = "<ul>";
      $.each(json.data,function(i,fb){
          if(!fb.message){
            console.log('none');
            html += "<li class='news__item'><a href='" + fb.link + "' target='_blank'><span class='message'>Page added a new photo</span></a><div class='clearfix'></div></li>";
          }
        else if(!fb.picture){
          html += "<li class='news__item'><a href='" + fb.link + "' target='_blank'><span class='message'>" + fb.message + "</span></a><div class='clearfix'></div></li>";
        }
        else if(fb.status_type == 'shared_story'){
            html += "<li class='news__item'><a href='" + fb.link + "' target='_blank'><span class='message'>" + fb.description + "</span></a><div class='clearfix'></div></li>";
        }
          else{
          html += "<li class='news__item'><a href='" + fb.link + "' target='_blank'><span class='message'>" + fb.message + "</span></a><div class='clearfix'></div></li>";
          }

        });
      html += "<div class='clearfix'></div></ul>";
    $('.facebookfeed').animate({opacity:0}, 500, function(){
      $('.facebookfeed').html(html);
    });
    $('.facebookfeed').animate({opacity:1}, 500);
  });
}; // end fbFetch
fbFetch();

< Back to blog