Social networks have quickly become THE way to get your business name into the market. Word of mouth has always been the strongest means of advertisement in the world and social networking pushes that even further. For an online presence, the social scene is seen as the fastest way to get ahead, especially Facebook.

How often do you now see a sign in a cafe or restaurant to like their Facebook page for special deals? Do they really want to give you special deals that bad? Of course not, they just want they elusive “person count” to go up even more so they can say, “we are the best restaurant in town, just look at how many people think so!”.

With that aside, we web developers are always asked to include social networking into sites, some more than others, and occasionally you’ll get a client that wants to get real smart and show their Facebook wall on their site. Now if said client had said to me they wanted their Twitter or Tumblr account’s wall to be displayed somewhere on their website, I wouldn’t even hesitate in saying no problem. But with Facebook’s recent security increases on accounts, it has become increasing more difficult to port the information across. Not to mention that every time they do make a considerable update, you need to redo the way you are porting the information across.

Just recently I had a situation with another developer at work that had to get a Facebook and Twitter feed of their wall onto the website. Twitter was done in a matter of minutes. Facebook on the other hand, given that it had been few and far between the last time I had done the port, I began to think was also going to be a simple’ish’ task. How wrong was I!? I have found that there just isn’t a spelt out way to do this process. I had to piece together different peoples methods of doing this and decode Facebook’s API explanation as to what to do. SO this is what this post is for. Spelling out EXACTLY what needs to happen to get a Facebook feed onto a website.

I am basing this off getting a Facebook Page wall onto a site. What you need to do this is:

• A Facebook Account
• A Facebook Page with the above Facebook account as an Admin to the page
• A website

Ok, so not the hardest list in the world right?

Step 1) Create a Facebook App
Log into the Facebook account that is an admin of the Facebook page you want to port the wall from and go to https://developers.facebook.com/apps. Click on the “Create New App” button, fill out the form (Name and Namespace) and submit. Congratulations, you have just created a Facebook App. This can be used for a whole range of things to do with Facebook, not just for what we’re doing here. Facebook apps like the games and things are created this way. An option in the advanced settings of the app under “Migrations” needs to be disabled, “Remove offline_access permission”. This needs to be set to disabled to allow an extended access token allowance.

Step 2) Get your Access Code
I would have to say that this is the most undocumented part of the process. Facebook do have a great way to retrieve the dreaded Access Token for your application however very well hidden. Down the left hand side of the screen you are on for your newly created app, you should see a link for “Graph API Explorer”. Open this in a new tab/window. You should be shown your own details for your account when loaded. You can have a little bit of fun here. Facebook have been very smart in how they allow permissions to gain access to your pages for external use at the same time as giving maximum security to your data. Their API uses the “graph” extension of Facebook to make all of these calls. Basically you can call any Facebook ID or User ID into the graph and get all of the publicly accessible information. What we want to do here is get the information from a page, so go ahead and replace the ID number that has been automatically added to the graph URL with your pages link ID (this is either the numbered ID of your page or the chosen URL you have). In my case, it is “durhamnetau” and hit submit. You will be shown some information about your page.

Now obviously this isn’t enough to get your status updates from as you can see. At the top of the page, you should see a dropdown with the label “Application”. Your newly created app should already be selected. If not, select it now and click on the “Get Access Token” button. You will be given a popup window to set the permissions you want to give the app for your page. This is up to you what you want to allow the app to have control over your page. What we need most for this example is under the Extended Permissions tab. Check the “Publish Stream” option which should be in the first column, 5 down. And also the “offline_access” which is in the third column, 3 down. Go ahead and click on “Get Access Token”, you will be asked to “Login” to approve of this action in another window, then to allow the app to post on your behalf. Allowing this will close the window and populate the Access Token box with a very long string. You now have the access token you need to continue.

Step 3) Add some jQuery to your website to do the heavy lifting
There are a few people that have written code to pull the information you need out and return it to you in a way that you can format any way you would like. I have found a nice lightweight script from http://www.prettyklicks.com using the getJSON function in jQuery. I have had to do some tweeks to bring the script up to latest standards and to use the access token. Create a javascript file on your server, lets call it fbwall.js, grab the following code and paste it in:


(function($){
$.fn.fbstatus = function(options) {
set = jQuery.extend({
username: '', // [string] required
count: 5, // [integer] how many status updates to display?
access_token: '', // [string] Access Token
loading_text: null // [string] optional loading text, displayed while tweets load
}, options);
function fbstatus_link(text){
return text.replace(/(href="|)?[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+/g, function($0, $1) {
return $1 ? $0 : $0.link($0);
});
}
//Set Url of JSON data from the facebook graph api. make sure callback is set with a '?' to overcome the cross domain problems with JSON
var url = "https://graph.facebook.com/"+set.username+"/feed?access_token="+set.access_token+"&limit="+set.count+"&callback=?";
$(this).each(function(i, widget){
var loading = $('<p class="loading">'+set.loading_text+'</p>');
var theObject = $(this);
if (set.loading_text) $(widget).append(loading);
//Use jQuery getJSON method to fetch the data from the url and then create our unordered list with the relevant data.
$.getJSON(url,function(json){
var html = "<ul>";
//loop through and within data array's retrieve the message variable.
$.each(json.data,function(i,fb){
if (fb.message) {
html += "<li>" + fbstatus_link(fb.message) + "</li>";
}
});
html += "</ul>";
//A little animation once fetched
theObject.animate({opacity:0}, 500, function(){
theObject.children(".loading").remove();
theObject.append(html);
});
theObject.animate({opacity:1}, 500);
});
});
};
})(jQuery);


Basically what the above code is doing is using the graph API call on Facebook with the username, access token and the amount of items you want to pull and outputting them into a tidy list for you. Add either your page’s ID or name (mine is durhamnetau) as the username, put in your access token, and chose the amount of feeds you want to pull and save your script. You can also add some loading text if you would like.

Step 5) jQuery code to output the data to a specific area on your site
Now that everything is in place, add the following code to your page, whether it be in a functions js file or in the header or footer of your page directly:


<script type="text/javascript" src="fbwall.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#fb_wall").fbstatus();
});
</script>


Alternatively you can change any of the settings at this point aswell:


<script type="text/javascript" src="fbwall.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#fb_wall").fbstatus({
username: 'durhamnetau',
loading_text: 'Loading Feeds...'
});
});
</script>


Add a div or span to your page where you would like the feed to go with the id ‘fb_wall’. Save it all and refresh your page and watch your Facebook feeds rush onto your sites pages!

So that was pretty simple right? Sure, when its documented like that, its a piece of cake….now. You can see mine in action on the main page of this site: http://durham.net.au