facebook javascript API 中的分页如何工作?

Posted

技术标签:

【中文标题】facebook javascript API 中的分页如何工作?【英文标题】:How does paging in facebook javascript API work? 【发布时间】:2011-06-28 18:26:09 【问题描述】:

我正在尝试使用 javascript sdk 在我的 facebook 新闻提要中恢复上周的帖子。 我能够获得第一页,但随后,我不知道如何继续遍历其他页面。我用下面的代码试过了:

 $('#loadPosts').bind('click', function()      
            FB.api('/me/home',since:'last week', getPosts);   
          );

 getPosts = function(response)
        for (element in response.data)
            post = response.data[element]
            console.log(post);          
          

          previousPage = response.paging.previous;        
          console.log(previousPage);

          // can i call FB.api(previousPage, getPosts); ??      

      

但我得到了一个作为上一页的 URL,我不知道如何从该 URL 进行 javascript FB.api 调用。有什么想法吗?

【问题讨论】:

请参考***.com/questions/17416787/… 是的,你可以做你期望的事情:FB.api(previousPage, getPosts); 【参考方案1】:

好吧,我仍然相信我的旧答案澄清了一个简单的问题,似乎有很多抱怨。无论如何,让我照顾你。 :)

第一页:我发现您不能真正从第一页转到“上一页”。理想情况下,我应该。因此,这是我提交的一个错误,您可能需要关注:https://developers.facebook.com/bugs/391562790938294?browse=search_50fcac3ce094e7068176315

第二:如果这是设计使然,你不能从第一页回到“上一个”(因为那里没有上一个),但你肯定可以去到“下一步”。但是,由于 API 的行为类似于光标,并且您已经向前移动,现在您的“上一个”页面可以工作了。

问题的答案:我得到一个 URL 作为上一页,但我不知道如何从该 URL 进行 javascript FB.api 调用。有什么想法吗?

是的,您可以调用 FB.api。但我建议您改为进行 HTTP GET 调用,因为它更容易。另外,请注意,previous 可能会返回空数组,例如 "data":[]

如何获取上一页/下一页? 在这里,我正在编写一个使用 jQuery 的小代码。如果不想看代码,有两种方法:

    使用上一个/下一个 URL 并发出 HTTP GET 请求。其中,如果不为空,将带有下一组“上一个”、“下一个”链接。 解析 URL,获取 JSON 格式的查询字符串并将其传递给 FB.api。我使用jQuery BBQ pluging 进行解析。

重要提示:在示例中,我使用“下一个”URL,因为在第一个请求中,如果我使用“上一个”,它会给出空 JSON,而不是给出过去的帖子。但是,一旦我向前移动了几页,我就可以使用“上一个”URL。与 Google 搜索结果一样,您不能在第 1 页上转到上一页,但您可以从任何 > 1 页开始(参见下面的示例 3)。这称为分页。

示例 1:使用 HTTP GET 的代码(首选):(我将加载 3 个帖子/页面并查看三个下一页)

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" src="https://raw.github.com/cowboy/jquery-bbq/master/jquery.ba-bbq.min.js"></script>
<script>

var i =0;
var getPosts = function (response)
          for (element in response.data)
            post = response.data[element]
            console.log(post.id + ": " +post.message);          
          



          // can i call FB.api(nextPage, getPosts); ??
          if(i < 2)
              nextPage = response.paging.next;        
              console.log(nextPage);
              i++;
              //Method 1: I use it.
              $.get(nextPage, getPosts, "json"); //optional: $.getJSON can be use instead
          

      

$(document).ready(function()

$('#loadPosts').bind('click', function() 
            FB.api('/me/home',since:'yesterday','limit': '3', getPosts);   
          );
)
</script>
</head>
<body>
<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() 
    // init the FB JS SDK
    FB.init(
      appId      : 'XXXXXXXXXXXX', // FILL YOUR APP ID HERE!
      status     : true, // check the login status upon init?
      cookie     : true, // set sessions cookies to allow your server to access the session?
    );

    // Additional initialization code such as adding Event Listeners goes here

  ;
</script>
<button id="loadPosts">Load Posts</button>
<p>Please open developer console to see what's happening. In Firefox, you can use ctrl+shift+k, and in Chrome/Chromium use ctrl+shift+i</p>
</body>
</html>

回应

100004192352945_156620584487686: undefined
137723270230_10152423499430231: On this day, please spare a thought for those fellow citizens, for whom I just spare a thought and do nothing else.
642965867_10151211036740868: Thanks everyone for their wishes! The wishes made my day!

https://graph.facebook.com/677811901/home?limit=3&access_token=AAACYjXGS5FQBAIR3brc2LibjBcZCi2kRJUybG8VMaaJSZARQ8SzNE7BE4PBrDIFVZB0AaVEa1dZCpX1fhCvoD2rnq8uc8OGaIFhO9uvVXAZDZD&until=1359184568
367116489976035_536776529676696: Rage. Quit. Life.
899605553_10152450871820554: undefined
367116489976035_417820828298092: undefined

https://graph.facebook.com/677811901/home?limit=3&access_token=AAACYjXGS5FQBAIR3brc2LibjBcZCi2kRJUybG8VMaaJSZARQ8SzNE7BE4PBrDIFVZB0AaVEa1dZCpX1fhCvoD2rnq8uc8OGaIFhO9uvVXAZDZD&until=1359179890
137723270230_10152423148745231: Pratibha Patil used to love the Republic Day Parade, especially the part where the visiting Chief Guest extended her an invitation to visit his/her own country.
137723270230_10152423131700231: The Kingfisher tableau at Republic Day Parade was so simple. Vijay Mallya riding a bicycle.
367116489976035_484460034950769: undefined

示例 2:使用 FB.api 的代码:(我将加载 3 个帖子/页面并查看三个下一页)

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" src="https://raw.github.com/cowboy/jquery-bbq/master/jquery.ba-bbq.min.js"></script>
<script>

var i =0;
var getPosts = function (response)
          for (element in response.data)
            post = response.data[element]
            console.log(post.id + ": " +post.message);          
          



          // can i call FB.api(nextPage, getPosts); ??
          if(i < 2)
              nextPage = response.paging.next;        
              console.log(nextPage);
              i++;

              //Method 2: If you have to call FB.api
              var params = jQuery.deparam.querystring(nextPage);
              console.log(JSON.stringify(params, null, 2));
              FB.api('/me/home', params, getPosts)
          

      

$(document).ready(function()

$('#loadPosts').bind('click', function() 
            FB.api('/me/home',since:'yesterday','limit': '3', getPosts);   
          );
)
</script>
</head>
<body>
<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() 
    // init the FB JS SDK
    FB.init(
      appId      : 'XXXXXXXXXXXX', // FILL YOUR APP ID HERE!
      status     : true, // check the login status upon init?
      cookie     : true, // set sessions cookies to allow your server to access the session?
    );

    // Additional initialization code such as adding Event Listeners goes here

  ;
</script>
<button id="loadPosts">Load Posts</button>
<p>Please open developer console to see what's happening. In Firefox, you can use ctrl+shift+k, and in Chrome/Chromium use ctrl+shift+i</p>
</body>
</html>

回应

367116489976035_536776529676696: Rage. Quit. Life.
899605553_10152450871820554: undefined
367116489976035_417820828298092: undefined

  "limit": "3",
  "access_token": "AAACYjXGS5FQBAIR3brc2LibjBcZCi2kRJUybG8VMaaJSZARQ8SzNE7BE4PBrDIFVZB0AaVEa1dZCpX1fhCvoD2rnq8uc8OGaIFhO9uvVXAZDZD",
  "until": "1359179890"


137723270230_10152423148745231: Pratibha Patil used to love the Republic Day Parade, especially the part where the visiting Chief Guest extended her an invitation to visit his/her own country.
137723270230_10152423131700231: The Kingfisher tableau at Republic Day Parade was so simple. Vijay Mallya riding a bicycle.
367116489976035_484460034950769: undefined

https://graph.facebook.com/677811901/home?limit=3&access_token=AAACYjXGS5FQBAIR3brc2LibjBcZCi2kRJUybG8VMaaJSZARQ8SzNE7BE4PBrDIFVZB0AaVEa1dZCpX1fhCvoD2rnq8uc8OGaIFhO9uvVXAZDZD&until=1359178140

  "limit": "3",
  "access_token": "AAACYjXGS5FQBAIR3brc2LibjBcZCi2kRJUybG8VMaaJSZARQ8SzNE7BE4PBrDIFVZB0AaVEa1dZCpX1fhCvoD2rnq8uc8OGaIFhO9uvVXAZDZD",
  "until": "1359178140"

655515199_403590309726450: a good resolution to take on Republic Day
505588854_496901583686790: Love the secret world that slow motion reveals.
693811975_10151217837201976: undefined

示例 3:执行:page1 -> page2 -> page1 或 page -> next -> previous 以下代码将加载 page1,然后转到“下一页”(page2),然后来返回第 1 页,使用“上一个”

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" src="https://raw.github.com/cowboy/jquery-bbq/master/jquery.ba-bbq.min.js"></script>
<script>

var i =0;
var getPosts = function (response)
          for (element in response.data)
            post = response.data[element]
            console.log(post.id + ": " +post.message);          
          



          // can i call FB.api(nextPage, getPosts); ??
          if(i < 2)
              nextPage = response.paging.next;        
              if(i==1)
                nextPage = response.paging.previous;

              console.log(nextPage);
              i++;
              $.get(nextPage, getPosts, "json"); //optional: $.getJSON can be use instead
          

      

$(document).ready(function()

$('#loadPosts').bind('click', function() 
            FB.api('/me/home',since:'yesterday','limit': '3', getPosts);   
          );
)
</script>
</head>
<body>
<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() 
    // init the FB JS SDK
    FB.init(
      appId      : 'XXXXXXXXXXXX', // FILL YOUR APP ID HERE!
      status     : true, // check the login status upon init?
      cookie     : true, // set sessions cookies to allow your server to access the session?
    );

    // Additional initialization code such as adding Event Listeners goes here

  ;
</script>
<button id="loadPosts">Load Posts</button>
<p>Please open developer console to see what's happening. In Firefox, you can use ctrl+shift+k, and in Chrome/Chromium use ctrl+shift+i</p>
</body>
</html>

回应

PAGE1:
367116489976035_536806916340324: How big is the Solar System?
Full infographic here: http://bit.ly/WmzfVn
137723270230_10152423534790231: "Sociologist" Ashis Nandy has claimed that most of the corrupt came from OBC/SC/ST castes.
Following this, Corrupt people have strongly condemned Nandy's attempts to divide them on caste lines. They'll be united in loot, forever.
100004192352945_156620584487686: undefined

PAGE2:
https://graph.facebook.com/677811901/home?limit=3&access_token=AAACYjXGS5FQBAKqIMyCVYjH9upK4e2bjUwLoVbbFDL0ffc0SZBTVR9MUFGV4ZCq6HBdFIadFMpLDC3ATMZCJ4GPsXWpG4qTGODavuvzLAZDZD&until=1359185659

137723270230_10152423499430231: On this day, please spare a thought for those fellow citizens, for whom I just spare a thought and do nothing else.
642965867_10151211036740868: Thanks everyone for their wishes! The wishes made my day!
367116489976035_536776529676696: Rage. Quit. Life.

PAGE1:
https://graph.facebook.com/677811901/home?limit=3&access_token=AAACYjXGS5FQBAKqIMyCVYjH9upK4e2bjUwLoVbbFDL0ffc0SZBTVR9MUFGV4ZCq6HBdFIadFMpLDC3ATMZCJ4GPsXWpG4qTGODavuvzLAZDZD&since=1359185123&__previous=1

367116489976035_536806916340324: How big is the Solar System?
Full infographic here: http://bit.ly/WmzfVn
137723270230_10152423534790231: "Sociologist" Ashis Nandy has claimed that most of the corrupt came from OBC/SC/ST castes.
Following this, Corrupt people have strongly condemned Nandy's attempts to divide them on caste lines. They'll be united in loot, forever.
100004192352945_156620584487686: undefined

老答案

使用limitoffsetsinceuntil 参数来实现您的目标。

参考:http://developers.facebook.com/docs/reference/api/

分页

查询连接时,有几个有用的参数可让您过滤和分页浏览连接数据:

限制、偏移:https://graph.facebook.com/me/likes?limit=3 直到,因为(unix 时间戳或 strtotime 接受的任何日期):https://graph.facebook.com/search?until=yesterday&q=orange

下面应该从21st - 30th消息中获取自last weekyesterday的所有帖子(基本上,每页分页10条消息的第三页)。

 FB.api(
  '/me/home',
  
    'since':'last week',
    'limit': '10',
    'offset': '20',
    'until': 'yesterday'
  , 
  getPosts
); 

我刚刚测试过,它可以工作。我使用了limit=4,这是一种页面大小的东西。所以,当我从 2011 年 2 月 2 日(Unix 时间戳:1296626400)到今天使用这个获取数据时

https://graph.facebook.com/me/home?access_token=[AUTH_TOKEN]&since=1296626400&limit=4

它返回数据,加上它还返回 URL 以转到下一页


   "data": [
      <ARRAY OF POSTS HERE>
   ],
   "paging": 
      "previous": "https://graph.facebook.com/me/home?access_token=[NEW_AUTH_TOKEN]&since=1298026753&limit=4",
      "next": "https://graph.facebook.com/me/home?access_token=[NEW_AUTH_TOKEN]&limit=4&until=1298023222"
   

您可以安全地使用 JSON 对象的previousnext 属性跳转到下一页(或上一页)。这似乎是最简单的方法。

顺便说一句,\u00257C 需要转换为 | 才能正常工作。

【讨论】:

我认为您没有回答发帖人的问题。他说:“但我得到了一个 URL 作为上一页,我不知道如何从该 URL 进行 javascript FB.api 调用”。 那些从谷歌来到这里的人有同样的问题呢?与问题不匹配的答案没有长期价值。 我从谷歌来到这里,这个答案没有回答我的问题 @Nishant Facebook 刚刚更新,我们不能再使用limitoffset,试试sinceuntil 代替 @BangDao developers.facebook.com/docs/reference/api/pagination 展示了三种分页方式。我已经验证您可以将limit 与基于光标的分页一起使用。此外,文档说他们也支持offset。我会检查的。我不希望他们有过时的文档。【参考方案2】:

您问题中的关键限制是我们不能使用响应中提供的“下一个”网址。

我将尝试通过首先提出一个更一般的问题来回答您的问题:

我们如何为 Facebook 应用创建用户体验,让每次调用更多商品都会返回相同数量的商品。

如果用户请求“更多”并获得 10 个项目,按“更多”并获得 4 个、7 个等,她可能会认为我们的应用程序有问题。

在 Open Graph intro page 上,引入了不同的分页参数。它们是:

限制

偏移

直到

因为

如“分页”标题下所述。但是,如果我们在增加偏移量的地方实现具有限制和偏移量的解决方案,例如:

https://graph.facebook.com/me/home?limit=10&offset=OFFSET

其中OFFSET会增加每个请求的limit,我们发现返回的结果数量有时会不等于我们指定的“limit”参数。这是因为在检查查询结果是否对查看者可见之前 在 Facebook 一侧应用了参数。我们要求 10 件,但我们可能会得到 8 件作为回报。

这意味着如果我们希望应用的“更多”请求始终返回相同数量的项目,我们就不能使用增加限制和偏移的解决方案。

Jeff Bowen(在 Facebook 平台团队工作)在 blog 中提出的解决方案是这样的逻辑:

请求限制为 YOUR_LIMIT 的项目。 检索响应中最后一项的 created_time 字段。 使用 since = RETRIEVED_CREATED_TIME 和 limit=YOUR_LIMIT 请求接下来的 10 个项目

这是一个基于上述博客文章中的示例的代码示例:

var graphURL = "https://graph.facebook.com/me/home?" +
                 "callback=processResult&" +
                 "date_format=U&" +
                 "limit=10";

function loadPosts() 
  var script = document.createElement("script");
  script.src = graphURL;
  document.body.appendChild(script);


function processResult(posts) 
  if (posts.data.length == 0) 
    document.getElementById("loadMore").innerHTML =
      "No more results";
  
  else 
    graphURL = graphURL + "&until=" +
      posts.data[posts.data.length-1].created_time;

    for (var post in posts.data) 
      var message = document.createElement("div");
      message.innerHTML = posts.data[post].message;
      document.getElementById("content").appendChild(message);
    
  

    

此解决方案按时间顺序从用户的新闻源中检索接下来的 10 个项目,而不使用 JSON 响应中的 url。

【讨论】:

我在使用相同的逻辑创建了类似的代码之后看到了这篇文章。然而,正如我所说的函数,帖子的数量会减少(几乎正好是一半),直到它达到零。你见过这种行为吗? 这很好奇。建议您将其作为新问题与您的代码一起发布。 终于把question贴出来了。【参考方案3】:

如果您只是想获取下一页(使用 paging.next 对象),您可以执行 jQuery.getJSON 请求。类似于以下内容:

function loadAlbums()
    FB.api('/me/albums', function(response)
        handleAlbumsResponse(response);
    );


function handleAlbumsResponse(response)
    var albums = response.data;

    for( var i in albums)
        var album = albums[i];
        $('#albums ul').append('<li><a href="#">' + album.name + '</a></li>');
    

    if( response.paging.next)
        console.log('fetching next page...');
        $.getJSON(response.paging.next, function(response)                
            handleAlbumsResponse(response);
        );
     
 

【讨论】:

【参考方案4】:

它正在工作

    function friends_list()
    

        for (var x = 0; x<500; x++)
        
            FB.api(
            '/me/friendlists/',
            'GET',
            "fields":"id","offset":x,
            function(response) 
            for (i = 0; i < response.data.length; i++) 
             

            document.getElementById("friends_list").innerHTML =  
            document.getElementById("friends_list").innerHTML + "<br>" + response.data[i].id; 

            
            document.getElementById("friends_list").innerHTML =  
            document.getElementById("friends_list").innerHTML + "<br>" ;
            
            );
        


    

【讨论】:

【参考方案5】:

我注意到这个问题很老了。对于这些天FB jsSDK(2017),我的回答是正确的:)

其实它比前人描述的更简单,也有点直观。 FB jsSDK 它本身就是一个 API,它应该能够自行浏览响应页面并使用相同的方式,不是吗?

function getPosts()
    FB.api('/me/posts', 'GET', limit:250, cbGetPosts);


function cbGetPosts(response)
    // do your stuff with response.data
    if(response && response.paging)
     FB.api(response.paging.next, cbGetPosts); // yep, is this simple
    

显然,只要定义了 next 键但证明了概念,这将请求下一页。

【讨论】:

对死灵很抱歉,但你知道是否有可能的方法来做类似的事情。我正在尝试获取数据的第二页,但它永远不会出现

以上是关于facebook javascript API 中的分页如何工作?的主要内容,如果未能解决你的问题,请参考以下文章

facebook javascript API 中的分页如何工作?

Facebook API - javascript sdk:注销后状态显示“已连接”

如何使用 Javascript 访问用户在 Facebook API 中创建的事件?

JavaScript登录后使用Facebook API

javascript 使用NodeJS保护Facebook Graph API调用

使用 javascript SDK 从 facebook graph api 获取个人资料图片