使用facebook api获取专辑封面

时间:2012-08-14 09:13:16

标签: javascript facebook-graph-api facebook-javascript-sdk asynccallback

我正在尝试通过JavaScript和Graph API从facebook上获取相册列表。我是这样做的:

FB.api('/me/albums', function(response){
    //
});

专辑封面以照片ID的形式返回,而不是我可以插入到HTML中的网址。所以,我需要在第二步获得一个网址。但是,通过应用程序设计,我以后无法获取URL并插入图像。我需要返回一个包含album propereties(id,name,cover url)的完整数据对象。我的最后一次尝试如下:

FB.api('/me/albums', { fields : 'id,name,count,cover_photo' }, function(response){

    if (!response || response.error) {
        callback.call(false);
        return;
    };

    var parsed = $(response.data).map(function(){

        if (this.count > 0) {

            var result = {
                aid : this.id,
                title : this.name,
                cover : this.cover_photo
            };

            return result;
        };
    });

    for (var i = 0; i < parsed.length; i++) {

        (function(i){

            FB.api('/' + parsed[i].cover, { type : 'album' }, function(response){
                parsed[i].thumb = response.picture;
            });

        })(i);

    };

    callback.call(parsed);
});

问题是循环不等待封面查询和前进,留下没有封面网址的返回对象。我认为做起来并不困难,但我找不到足够长的解决方案。欢迎任何想法。

2 个答案:

答案 0 :(得分:6)

window.getAlbums = function() {
FB.api({
     method: 'fql.multiquery',
     queries: {
        query1: 'select aid,name,link,photo_count,cover_object_id from album where owner = me()',
        query2: 'SELECT pid,src FROM photo WHERE object_id  IN (SELECT cover_object_id FROM #query1)'
     }
    },
    function(response) {
        var parsed = new Array();
        $(response[0].fql_result_set).each(function(index,value){
                var result = {
            aid : value.aid,
            title : value.name,
            cover : response[1].fql_result_set[index].src,
                            link :value.link
        };
                parsed.push(result);
        })
    getdata(parsed);
});

};

使用

处理您的相册详情
function getdata(data){

$(data).each(function(index,value){
    // console.log(value.aid + ' - '+ value.cover+ ' - '+ value.title );
    $("#fb_albumb").append('<h3>'+ value.title +'</h3><a href="'+ value.link  +'" target="_blank" ><img src="'+ value.cover +'" title="'+ value.title +'" /></a><br/>');
})

}

HTML

<fb:login-button scope="user_photos" onlogin="getAlbums()">Grant Permissions to Allow access to Photos and Albums</fb:login-button>

可能会对你有帮助。

答案 1 :(得分:2)

  

问题是循环没有等待封面查询和前进,留下没有封面网址的返回对象。

当然,因为FB.api是异步方法。

  

我认为做起来并不困难,但我找不到足够长的解决方案。

你必须在循环中对你的第二个FB.api调用使用回调函数,并在其中实现一个计数器 - 当这个计数器显示所有请求都已完成时,然后你可以将数据传递到其他地方(或者在那个函数中使用它,因为“返回”它不起作用 - 因为该方法是异步的。)

也许最好立即使用FQL,因为在那里你可以将所需的数据“加入”并在一次调用中完成所有操作;像f.e。

这样的多重查询
{
  "q1" : "SELECT aid, name, cover_object_id FROM album WHERE owner = me()",
  "q2" : "SELECT aid, src_big FROM photo WHERE object_id IN
                 (SELECT cover_object_id FROM #q1)"
}

Test this query in the Graph API explorer.