Подтвердить что ты не робот

Как работает подкачка в API-интерфейсе facebook javascript?

Я пытаюсь восстановить последние сообщения в моей ленте новостей facebook с помощью javascript sdk. Я могу получить первую страницу, но потом, я не знаю, как продолжить итерацию через другие страницы. Я пробовал его со следующим кодом:

 $('#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 как предыдущую страницу, и я не знаю, как сделать javascript FB.api-вызов с этого URL-адреса. Любые идеи?

4b9b3361

ОТВЕТЫ

Ответ 1

Хорошо, кажется, много скулит по простой проблеме, что я все еще верю, что мой старый ответ проясняется. Во всяком случае, позвольте мне вас нянчить.:)

Во-первых: я узнаю, что вы действительно не можете перейти на "предыдущую" страницу с первой страницы. В идеале, я должен. Итак, вот ошибка, которую я подал вам, может потребоваться: https://developers.facebook.com/bugs/391562790938294?browse=search_50fcac3ce094e7068176315

Второе: если это по дизайну, вы не можете вернуться к "предыдущей" с первой страницы (потому что нет предыдущей), но вы можете обязательно перейти к "Далее". Однако, поскольку API ведет себя как курсор, и вы продвинулись вперед, теперь ваша "предыдущая" страница будет работать.

Ответ на вопрос:
Я получаю URL как предыдущую страницу, и я не знаю, как сделать Javascript FB.api с этого URL-адреса. Любые идеи?

да, вы можете сделать вызов FB.api. Но я предлагаю вам вместо этого использовать HTTP GET-вызов, потому что это проще. Кроме того, обратите внимание, что предыдущий может возвращать и пустить массив как {"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 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 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 Следующий код загрузит страницу1, затем перейдите на страницу "Далее" (стр. 2), затем придет назад к странице 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 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 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 attempts to divide them on caste lines. They'll be united in loot, forever.
100004192352945_156620584487686: undefined

OLD ANSWER

Используйте параметры limit, offset, since и until для достижения своей цели.

Обратитесь: http://developers.facebook.com/docs/reference/api/

Paging

При запросе соединений есть несколько полезных параметров, которые позволяют вам фильтровать и просматривать страницы через данные соединения:

Следующее должно получить все сообщения с last week до yesterday из 21st - 30th сообщения (в основном, третьей страницы из 10 сообщений на странице).

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

Я только что протестировал, он работает. Я использовал limit = 4, который является размером страницы. Итак, когда я получаю данные с 02 февраля 2011 года (Unix Time Stamp: 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"
   }
}

Вы можете безопасно использовать атрибуты previous и next объекта JSON для перехода на следующую страницу (или предыдущую страницу). Это, пожалуй, самый простой способ сделать.

Кстати, \u00257C нужно было преобразовать в |, чтобы заставить это работать.

Ответ 2

Если вы просто хотите получить следующую страницу (используя объект 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);
        });
    } 
}

Ответ 3

Ключевое ограничение в вашем вопросе заключается в том, что мы не можем использовать "следующий" url, указанный в ответе.

Я постараюсь ответить на ваш вопрос, предварительно задав более общий вопрос:

Как мы можем создать пользовательский интерфейс для нашего приложения Facebook, где каждый вызов большего количества элементов возвращает одинаковое количество элементов.

Если пользователь запрашивает "больше" и получает 10 элементов, нажимает "больше" и получает затем 4, затем 7 и т.д., она может подумать, что наше приложение не работает.

На открытой диаграмме вводная страница вводятся различные параметры для поискового вызова. Это:

предел

смещение

до

так

как указано в заголовке подкачки. Однако, если мы реализуем решение с ограничением и смещением, где мы увеличиваем смещение, например:

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

где OFFSET будет увеличено на ограничение каждого запроса, мы обнаружим, что количество возвращаемых результатов иногда не будет равно указанному параметру "limit". Это связано с тем, что параметры применяются на стороне Facebook, прежде чем проверять, являются ли ожидаемые результаты видимыми для зрителя. Мы просим 10, но мы можем получить 8 элементов взамен.

Это означает, что мы не можем использовать решение, в котором мы увеличиваем лимит и смещение, если хотим, чтобы наш запрос "больше" всегда возвращал одинаковое количество элементов.

Решение, предложенное в этом документе blog Джеффом Боуном (который работает в команде plaform в Facebook), является такой логикой:

  • запрашивать элемент с лимитом = YOUR_LIMIT.
  • получить поле created_time последнего элемента в ответе.
  • запросить следующие 10 элементов с: = RETRIEVED_CREATED_TIME и limit = YOUR_LIMIT

Вот пример кода, основанный на примере в сообщении в блоге, упомянутом выше:

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 элементов из пользовательской новостной ленты в хронологическом порядке без использования URL-адреса в ответе JSON.

Ответ 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
    }
}

Очевидно, что запрос будет запрашиваться для следующих страниц, если будет указан следующий ключ, но доказывает концепцию.