How to read Facebook Graph API feed using JQuery

By | December 18, 2010

If you want to display the Facebook feed information of your business on your site, you can take advantage of the getJSON feature of JQuery. Facebook feed information does not require you to authenticate with the Facebook Graph API before you can access it. In this example we will view the Graph API feed information for In Touch Ministries.

You will need to add the JQuery code to your site either by downloading the JQuery code to host on your site directly or by referencing one of the available CDN hosted references.

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/InTouchMinistries/feed?limit=20&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 = "
    "; //loop through and within data array's retrieve the message variable. $.each(json.data,function(i,fb){ if(fb.link){ html += "
  • "+ fb.message + "
  • "; }else{ html += "
  • "+ fb.message + "
  • "; } }); html += "
"; //A little animation once fetched $('.facebookfeed').animate({opacity:0}, 500, function(){ $('.facebookfeed').html(html); }); $('.facebookfeed').animate({opacity:1}, 500); }); };

Using this code will display the Facebook feed of the Facebook page in an non formatted list. One thing to mention is that you most likely will need to test this on a web server since some of the browsers restrict the running of some scripts locally. Just download/install the free Apache server and test it out.

In the example above, I used a CDN hosted copy of JQuery (http://code.jquery.com/jquery-latest.min.js) and referenced it in the header of my HTML file. Then I added the code below within the body of the HTML. Here is the HTML head information:


  
  


  

Well hopefully this code was helpful in your Facebook development. Special thanks to PrettyKlicks for the inspiration to write this. Also if you are looking for Facebook advertising tips, the visual step by step guide to Facebook advertising may help with that. You can find that here. Enjoy!



2 thoughts on “How to read Facebook Graph API feed using JQuery

  1. Pingback: Tweets that mention How to read Facebook Graph API feed using JQuery -- Topsy.com

  2. computer services

    Useful blog website, keep me personally through searching it, I am seriously interested to find out another recommendation of it.