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 
[...] 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 [...]