Jquery ajax with facebook social graph json

Question

Hey all, I'm trying to create a feed using jquery ajax and requesting data from facebooks social graph using json method.

Can someone please tell me why it isn't working? i've tried $.getJSON(); to no luck!

This is the code I have just tested and still no luck:

 $(document).ready(function(){ 


    var url = "http://graph.facebook.com/prettyklicks/feed?limit=3&callback=?pk";

        $.getJSON(url,function(json){

        var html = "<ul>";

    $.each(json.data,function(i,fb){

        html += "<li>" + fb.message + "</li>"; 

    });

    html += "</ul>";

    $('.facebookfeed').html(html);

});

});

Answer 1

You cannot get the data from different domain because of Same Origin Policy using Ajax. However, have a look at JSONP to get around it.

Answer 2

You are close, just remove the 'pk' from the json url, let jquery provide the name of the callback for you:

$(document).ready(function(){ 
  var url = "http://graph.facebook.com/prettyklicks/feed?limit=3&callback=?";
  $.getJSON(url,function(json){
    var html = "<ul>";
    $.each(json.data,function(i,fb){
      html += "<li>" + fb.message + "</li>"; 
    });
    html += "</ul>";
    $('.facebookfeed').html(html);
  });
});

sAc is right with his answer, you do need to use JSON-P. But jQuery will automatically take care of that for you if you pull JSON from a different domain.