How to make a Facebook feed using the Graph API, JSON and jQuery

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.

UPDATE: Facebook have recently changed their api and policy. To access a feed now requires an access token. We will create a new tutorial soon. P.S. Please don’t copy the code in the source on our working feed, this will expire and is insecure to use on your own website, thanks.

Follow @PrettyKlicks for more news and tips.

CRITICAL NOTICE: There was a security vulnerability kindly pointed out by Rick, this can be fixed very easily. Please update your code. See below!

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

And lastly please feel free to comment. Feel free to use this script. All we ask is you follow us on twitter @PrettyKlicks

Hear about updates to this tutorial?

We are planning on updating this tutorial very soon. We have an email list for developers (only) which we send tips and tricks, tutorials and even free code snippets out to. We don’t spam.

If you would like to hear when we update this tutorial then click the blue button below.

Posted in Tips & Tricks | Tags: , , , | 69 Comments
By |
67 comments

Trackbacks

  1. Our first Jquery plugin of many says:

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

  2. [...] hopefully this code was helpful in your Facebook development. Special thanks to PrettyKlicks for the inspiration to write this. Enjoy! Share and [...]

  3. [...] Append your Facebook Graph url (example link from PrettyKlicks JSON Facebook [...]

RSS Feed
Keep up to date with our latest posts.

Learn more about making the most of your website, marketing and seo. It takes two seconds to subscribe to our rss feed.
Contact
You can get in contact with us via phone or e-mail, we will get back to you very promptly.

+44 (0)131 344 4522
Subscribe!

Join our mailing list to find out about our free giveaways and tutorials. It's free.

Copyright © 2005 - 2014 Pretty Klicks Ltd (prettyklicks.com)