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

【问题标题】：How does paging in facebook javascript API work?facebook javascript API 中的分页如何工作？
【发布时间】：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 调用。有什么想法吗？

【问题讨论】：

标签： javascript facebook facebook-graph-api pagination


【解决方案1】：

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

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

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

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

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

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

  1. 使用上一个/下一个 URL 并发出 HTTP GET 请求。其中，如果不为空，将带有下一组“上一个”、“下一个”链接。
  2. 解析 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

老答案

使用limit、offset、since 和until 参数来实现您的目标。

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

分页

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

下面应该从21st - 30th消息中获取自last week到yesterday的所有帖子（基本上，每页分页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 对象的previous 和next 属性跳转到下一页（或上一页）。这似乎是最简单的方法。

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

【讨论】：

  • 我认为您没有回答发帖人的问题。他说：“但我得到了一个 URL 作为上一页，我不知道如何从该 URL 进行 javascript FB.api 调用”。
  • 那些从谷歌来到这里的人有同样的问题呢？与问题不匹配的答案没有长期价值。
  • 我从谷歌来到这里，这个答案没有回答我的问题
  • @Nishant Facebook 刚刚更新，我们不能再使用limit 和offset，试试since 和until 代替
  • @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 键但证明了概念，这将请求下一页。

      【讨论】：

      • 对死灵很抱歉，但你知道是否有可能的方法来做类似的事情。我正在尝试获取数据的第二页，但它永远不会出现
      猜你喜欢
      • 1970-01-01
      • 2011-06-07
      • 2023-03-29
      • 1970-01-01
      • 2017-05-16
      • 1970-01-01
      • 2022-01-04
      • 1970-01-01
      • 2021-04-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode