trying to pull the number of likes from a facebook fanpage using JSONP and JQuery

问题

So I'm trying to pull and print just the number of "likes" a certain fanpage has, after doing some research - I found that this should work, but its not pulling anything. Any help?

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">

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 = "https://graph.facebook.com/tenniswarehouse?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>
                        <li>" + likes + "</li>
                    </ul>";

        //A little animation once fetched
        $('.facebookfeed').animate({opacity:0}, 500, function(){
            $('.facebookfeed').html(html);
        });

        $('.facebookfeed').animate({opacity:1}, 500);
    });
};

</script>
</head>
<body onload="fbFetch()">
    <div class="facebookfeed">
        <h2>Loading...</h2>
    </div>
</body>
</html>

回答1:

I get a javascript error in the console. Try to run the function on jquery document ready instead of body onLoad. Also, likes is not defined, it should be json.likes.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
  $(function() {
    //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 = "https://graph.facebook.com/tenniswarehouse?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><li>" + json.likes + "</li></ul>";
        //A little animation once fetched
        $('.facebookfeed').animate({opacity:0}, 500, function(){
            $('.facebookfeed').html(html);
        });
        $('.facebookfeed').animate({opacity:1}, 500);
    });
  });
</script>
</head>
<body>
    <div class="facebookfeed">
        <h2>Loading...</h2>
    </div>
</body>
</html>

回答2:

Have you tried to call the url by it's ID instead? Also the https / http same protocol applies here. You may need to call the url with document.location.protocol, to match the current protocol of the calling document.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">

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 = document.location.protocol + "//graph.facebook.com/tenniswarehouse?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>
                        <li>" + likes + "</li>
                    </ul>";

        //A little animation once fetched
        $('.facebookfeed').animate({opacity:0}, 500, function(){
            $('.facebookfeed').html(html);
        });

        $('.facebookfeed').animate({opacity:1}, 500);
    });
};

</script>
</head>
<body onload="fbFetch()">
    <div class="facebookfeed">
        <h2>Loading...</h2>
    </div>
</body>
</html>

来源：https://stackoverflow.com/questions/7194086/trying-to-pull-the-number-of-likes-from-a-facebook-fanpage-using-jsonp-and-jquer

标签

jquery

json

facebook

facebook-graph-api