Hey all,
After scouring the internet for a tutorial I took it on myself (after realising there was none) to teach the world how to use the new cool Facebook graph api with JSON along side with jQuery to make a cool feed for use on websites.
From this you can do anything and even do a live feed using ajax. Maybe i’ll do a tutorial on that sometime soon.
Follow @PrettyKlicks for more news and tips.
Check out our demo here: DEMO
So first things first. You need to set up your page for jQuery by adding the lines:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
You need to place this into the tags.
The URL
Now we need to identify where our json results are coming from facebook and the url for it so we can fetch the data.
This is our url for Pretty Klicks:
http://graph.facebook.com/prettyklicks/feed
Notice the /feed this is because we need to tell facebook not only is it the username prettyklicks but also we want to get the results for the feed. We’re not done yet. We need to add some extra things to the url.
http://graph.facebook.com/prettyklicks/feed?limit=5&callback=?
First of all we called the limit parameter to tell facebook we only want the 5 latest wall posts and more importantly we added callback=? This is because JSON is not meant to work cross domain. Therefore so we can work around this and to help jQuery set the callback itself and then process our JSONP we add the ‘?’ to let jQuery do it for us.
Parsing the JSON result with our jQuery function
Right so now we need to create our javascript to parse the json results. I have commented the code to show you what each bit does.
function fbFetch(){
//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 = "http://graph.facebook.com/prettyklicks/feed?limit=5&callback=?";
//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.
//XSS ATTACK FIX AS OF 6/1/12 PLEASE UPDATE TO THIS ASAP.
$.each(json.data,function(i,fb){
html += "<li>" + $('<div>').html(fb.message).text() + "</li>";
});
html += "</ul>";
//A little animation once fetched
$('.facebookfeed').animate({opacity:0}, 500, function(){
$('.facebookfeed').html(html);
});
$('.facebookfeed').animate({opacity:1}, 500);
});
};
(I just broke it into 3 sections to make it easier to read)
Now we have our function set in thewe need to set out our html and initiate the function onload. Our html should look something like this at the very least.
<body onLoad="fbFetch()">
<div class="facebookfeed">Loading...</div>
And thats a wrap! All we need to do now is style it out.
Check out our demo here: DEMO
….Some shameless seo:
Deeside Web Design
Subscribe 
60 Comments
Hi,
I used this on my site, now it stopped working since FB updated the graph API. Anyone has a workaround for this? Apparently it now requires an appkey, but the site is not an app, nor is the page I am trying to get the feed from, so what now? Thanks!
Kobus
Your demo does not seem to work any more. I suspect that this is because you now need an authorization token to access the feed.
The demo don’t seem to work, so I guess this doesn’t work anymore?
Does not work for me. It return this json object :
jsonp1308940357967({
“error”: {
“type”: “OAuthException”,
“message”: “An access token is required to request this resource.”
}
});
It seem i need the access token. How can your code work ?
Any idea ?
Hi…I’ve some problems
If I write in the firebug console (the url is that in the FB documentation) :
$.getJSON(‘https://graph.facebook.com/19292868552?callback=?‘); end execute…I can’t see anything!
/the
Thanks.. saved my day.
!!!!
!!!!
not working – mayby facebook change API????!!!!!!!!!!!
saved my day toooo
!!! nice
Hey this thing isn working with me any help
Thanks but this code does not work…
Yep Facebook have changed their api! – I will be updating the post soon.
Any idea when the new tutorial will be available? It seems to work if I simply copy your access token from the demo page but I’m sure I’ll run in to problems later if I do that…
Hi Andreas, Very busy in the studio at the moment. We will get on it ASAP.
Not a good idea copying and pasting our access_token. It’s insecure and also will expire.
Thats the access_token for the Pretty Klicks facebook app.
Thanks,
Stefan
Hey Benji, I used your plugin and it’s awesome! Any way to add events as well?
I’m really looking forward to you updating the tutorial if it’s still in the cards. Also, I’d love to know how to parse out Graph field data from a Facebook page itself, such as “likes,” not just the feed. Thanks for providing this, though!
Hey guys, I managed to integrate this quite nicely into my website by looking at your source code of your demo and tweaking it to work to my liking, except for one thing. Would any of you know how to integrate the time and date of the post as it shows on the facebook page too?
Thanks alot
You have XSS vulnerabilities in your code sample, and now everyone has copied it. Oops.
So what happens if fb.message is a script tag and inside the script tags is some nasty javascript?
Hi Rick, thanks for this, you are correct. However, this will only be a major issue in two circumstances. 1) If the feed is coming from a facebook page not within control of the user / website who is displaying the feed. or 2) The users facebook page is hacked. Thanks for raising this as educational purposes this is a classic and good example. We will be re-writing this tutorial soon anyway to incorporate the work around for getting the access token. Do you work in security?
I have double checked and users who post on the specified facebook page wall also appear which does pose a risk. Looking into a solution to recommend users with. Any suggestions welcome to resolve this asap. Thanks again for raising this!
I have now updated the blog post with a fix that should prevent XSS attacks, I used a jQuery method as we are using the jQuery library anyway. Thanks again to Rick!
3 Trackbacks
[...] does this called Tweet there isn’t anything for Facebook. Inspired by the code written by Pretty Klicks we wrote a simple little plugin called fbStatus. Plans in the next revision will be to more of the [...]
[...] hopefully this code was helpful in your Facebook development. Special thanks to PrettyKlicks for the inspiration to write this. Enjoy! Share and [...]
[...] Append your Facebook Graph url (example link from PrettyKlicks JSON Facebook [...]