Question

我在Facebook JS SDK上遇到了一些麻烦，特别是在使用FB.api（）方法时。我有一个列表，通过使用JQuery.get（）调用php脚本来填充，并且对于每个列表项，都有Facebook用户ID。有三种类型的“列表项”，每种类型都有不同的HTML，我需要为每个项目进行FB.api（）调用，因为每个项目都来自不同的用户。

以下是我目前正在使用的代码：

function( data ){ 

        // Parse the json data
        var parsed = jQuery.parseJSON( data );

        // Create arrays for each message type
        notifications = parsed.notifications;
        gifts = parsed.gifts;
        requests = parsed.requests;

        // Counter and message to add
        var i = 0;
        var message = '';
        var userData;
        var displayPicUrl = '';

        //
        // NOTIFICATIONS
        //

        if( notifications && notifications.length > 0 ) {

            // Loop through and create a new list item for each notification
            for( i = 0; i < notifications.length; i++ ) {

                // Get originator user data
                FB.api( notifications[i].originator, function( response ) { 

                    userData = response;

                    displayPicUrl = "http://graph.facebook.com/"+userData.id+"/picture";

                    message = '<li class="message">' +
                                '<img src="'+displayPicUrl+'" width="50" height="50" alt="Not one of the five birds I know." title="Not one of the five birds I know" />'+
                                '<p class="messageText">'+notifications[i].message+'.</p>' +
                                '<button class="acceptButton">Ok</button>' +
                                '</li>';

                    document.getElementById( 'notifications' ).innerHTML += message;
                });
            } //end loop

        } //end if

        //
        // GIFTS
        //

        if( gifts && gifts.length > 0 ) {

            // Loop through and create a list item for each gift
            for( i = 0; i < gifts.length; i++ ) {

                FB.api( gifts[i].originator, function( response ) {

                    if( !response || response.error ) {

                        alert( 'An error occured retrieving gifts')

                    } else {

                        userData = response;


                        displayPicUrl = "http://graph.facebook.com/"+userData.id+"/picture";

                        message = '<li class="message">' +
                            '<img src="'+displayPicUrl+'" width="50" height="50" alt="Not one of the five birds I know." title="Not one of the five birds I know" />'+
                            '<img class="giftImage" src="'+gifts[i].url+'" width="50" height="50" title="'+gifts[i].name+'" alt="'+gifts[i].name+'" />' +
                            '<p class="messageText">'+gifts[i].message+'</p>' +
                            '<button class="declineButton giftDecline">Decline</button>' +
                            '<button class="acceptButton giftAccept">Accept Gift</button>' +
                            '<span style="display:none;" id="giftId">'+gifts[i].giftId+'</span>' +
                            '</li>';

                        document.getElementById( 'gifts' ).innerHTML += message;

                    }

                });
            }
        } // end if

        //
        // REQUESTS
        //

        if( requests && requests.length > 0 ) {

            // Loop through and create a list item for each request
            for( i = 0; i < requests.length; i++ ) {

                FB.api( requests[i].originator, function( response ) {

                    if( !response || response.error ) {
                        alert( 'An error occured retrieving Requests' );
                    } else {

                        userData = response;

                        displayPicUrl = "http://graph.facebook.com/"+userData.id+"/picture";

                        message = '<li class="message">' +
                           '<img src="'+displayPicUrl+'" width="50" height="50" alt="Not one of the five birds I know." title="Not one of the five birds I know" />'+
                            '<img class="giftImage" src="'+requests[i].url+'" width="50" height="50" />' +
                            '<p class="messageText">'+requests[i].message+'</p>' +
                            '<button class="declineButton requestDecline">Decline</button>' +
                            '<button class="acceptButton requestAccept">'+requests[i].okButtonLabel+'</button>' +
                            '</li>';

                        document.getElementById( 'requests' ).innerHTML += message;
                    }
                });
            }
        } // end if

我似乎遇到的问题是，一旦它点击礼物和请求的部分，礼物和请求数组都变得“未定义”，这很奇怪，因为代码在回调中没有包装时工作得非常好FB.api（）......奇怪的是，通知部分似乎没有出现这个问题。礼物，请求和通知只是从数据库返回的对象数组，正如我所说的那样使用JQuery.get（）并且在我用api（）方法包装东西之前没有问题。

非常感谢任何帮助。

干杯

Answer 1

如果它们仅在包裹在FB.api()时未定义，那么您将获得Facebook错误。造成这种情况的原因有很多，所以很难找出确切的原因，但我会抛出一些方法来解决这些问题：

在您的图表调用中添加访问令牌，一些Facebook调用需要它。

您需要确保您的应用程序中包含正确的Facebook代码。对于HTML包括：

您还需要在某些document.ready种调用中包含此代码：

//Facebook iFrame include
window.fbAsyncInit = function () {
    FB.init({ appId: AppID, status: true, cookie: true, xfbml: true });
    FB.Canvas.setAutoResize();
};

(function () {
    var e = document.createElement('script');
    e.async = true;
    e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
} ());

您在Facebook中如何设置可能存在问题。确保所有网址都匹配。如果他们没有，那么您的应用程序将抛出错误。这必须是准确的（www.ex.com和ex.com是不同的，只有一个可以工作）

Facebook Developers page

确保在“在Facebook上”Canvas URL和Tab URL匹配

您的图表调用错误。尝试为您的代码添加alert(displayPicUrl);调用，它可能会显示您正在获得的错误。如果这不起作用，那么尝试重现图形url调用并在自己中输入以查看返回的内容。

希望其中一项工作

FB.api（）导致其他变量变为未定义

1 个答案: