Facebook Feed在网页上的无限滚动

Question

我正在尝试使用this插件为Facebook订阅源创建无限滚动效果，现在我可以通过图形api（粉丝页面墙贴）和我将其限制为10，即使如此，Facebook也会提供下一个和上一个链接到实际json数据中的下一个或前10个帖子，但我似乎无法得到此插件的使用。

继承人的JSON数据的例子：

{ 
    "data": [ 
     { 
     "id": "393459637370574_326418557474553", 
     "from": { 
      "category": "Consulting/business services", 
      "name": "Global Georgia", 
      "id": "393459637370574" 
     }, 
     "to": { 
      "data": [ 
       { 
        "name": "Global Georgia Tour", 
        "start_time": "2012-12-05", 
        "location": "Republic of Georgia", 
        "id": "297926606990415" 
       } 
      ] 
     }, 
     "message": "What a lovely trip it was!", 
     "picture": "http://photos-a.ak.fbcdn.net/hphotos-ak-snc7/205700_468134469903090_2092776360_s.jpg", 
     "link": "https://www.facebook.com/photo.php?fbid=468134469903090&set=oa.462645617136057&type=1&relevant_count=4", 
     "icon": "http://static.ak.fbcdn.net/rsrc.php/v2/yz/r/StEh3RhPvjk.gif", 
     "privacy": { 
      "value": "" 
     }, 
     "type": "photo", 
     "object_id": "468134469903090", 
     "created_time": 1359555861, 
     "updated_time": 1359555861, 
     "likes": { 
      "data": [ 
       { 
        "name": "Mareleen du Plessis", 
        "id": "1382224862" 
       } 
      ], 
      "count": 1 
     }, 
     "comments": { 
      "count": 0 
     } 
     }, 
     { 
     "id": "393459637370574_333589073411971", 
     "from": { 
      "category": "Consulting/business services", 
      "name": "Global Georgia", 
      "id": "393459637370574" 
     }, 
     "story": "Global Georgia shared a link.", 
     "story_tags": { 
      "0": [ 
       { 
        "id": "393459637370574", 
        "name": "Global Georgia", 
        "offset": 0, 
        "length": 14, 
        "type": "page" 
       } 
      ] 
     }, 
     "picture": "http://external.ak.fbcdn.net/safe_image.php?d=AQCwYiOOZnd4DK5_&w=90&h=90&url=http\u00253A\u00252F\u00252Frsa.mfa.gov.ge\u00252FuniInc.php\u00253Fmode\u00253Dimg\u002526src_jpg\u00253Dfiles\u00252Frsa\u00252FPresentation_Credentials_to_President_Jacob_Zuma_of_South_Africa-29.01.2013.jpg\u002526im_new_w\u00253D200", 
     "link": "http://rsa.mfa.gov.ge/index.php?lang_id=ENG&sec_id=913&info_id=16905", 
     "name": "News - Embassy of Georgia to the Republic of South Africa", 
     "caption": "rsa.mfa.gov.ge", 
     "description": "On January 2013, in Pretoria, the firstAmbassador Extraordinary and Plenipotentiary of Georgia in the Republic of South Africa, Mr Beka Dvali presented his credentials to the President of the Republic of South Africa, H.E. Mr Jacob Zuma. ", 
     "icon": "http://static.ak.fbcdn.net/rsrc.php/v2/yD/r/aS8ecmYRys0.gif", 
     "privacy": { 
      "value": "" 
     }, 
     "type": "link", 
     "status_type": "shared_story", 
     "created_time": 1359550985, 
     "updated_time": 1359550985, 
     "likes": { 
      "data": [ 
       { 
        "name": "Ivan A Meyer", 
        "id": "100000016287990" 
       }, 
       { 
        "name": "Amanda Aldum", 
        "id": "779374234" 
       }, 
       { 
        "name": "Cazz Bouwer", 
        "id": "100001702505460" 
       }, 
       { 
        "name": "Gigi Mikeladze", 
        "id": "100004658262461" 
       } 
      ], 
      "count": 4 
     }, 
     "comments": { 
      "count": 0 
     } 
     }, 
     { 
     "id": "393459637370574_450229665031926", 
     "from": { 
      "category": "Consulting/business services", 
      "name": "Global Georgia", 
      "id": "393459637370574" 
     }, 
     "story": "Global Georgia shared Embassy of Georgia in the Republic of South Africa's photo.", 
     "story_tags": { 
      "0": [ 
       { 
        "id": "393459637370574", 
        "name": "Global Georgia", 
        "offset": 0, 
        "length": 14, 
        "type": "page" 
       } 
      ], 
      "22": [ 
       { 
        "id": "340928409306379", 
        "name": "Embassy of Georgia in the Republic of South Africa", 
        "offset": 22, 
        "length": 50, 
        "type": "page" 
       } 
      ] 
     }, 
     "picture": "http://photos-f.ak.fbcdn.net/hphotos-ak-snc7/385189_475566662509219_1872863393_s.jpg", 
     "link": "https://www.facebook.com/photo.php?fbid=475566662509219&set=a.405386502860569.99241.340928409306379&type=1", 
     "name": "Timeline Photos", 
     "caption": "Information on the meeting of the Ambassador of Georgia\r\nwith the National Librarian and Chief Executive Officer\r\nof the National Library of South Africa\r\n\r\nOn 24 January 2013 H.E. Mr Beka Dvali, Ambassador of Georgia held a meeting with Mr John Tsebe, the National Librarian and Chief Executive Officer of the National Library of the Republic of South Africa, and the Chair of the Conference of Directors of National Libraries (CDNL)).\r\nAmbassador of Georgia passed on Mr Tsebe several books to be catalogued as the first ever publications on Georgia at the National Library of South Africa.\r\nDuring the meeting, the parties discussed the possibilities of cooperation between the national libraries of the two countries, the issues of supplying Georgian and Georgia-related books, by the support of the Embassy, to the National Library of South Africa as well as the prospects of hosting by the library a literature event featuring contemporary Georgian author(s). \r\n\r\n24 January 2013\r\nPretoria", 
     "properties": [ 
      { 
       "name": "By", 
       "text": "Embassy of Georgia in the Republic of South Africa", 
       "href": "https://www.facebook.com/EmbassyOfGeorgia?ref=stream" 
      } 
     ], 
     "icon": "http://static.ak.fbcdn.net/rsrc.php/v2/yD/r/aS8ecmYRys0.gif", 
     "privacy": { 
      "value": "" 
     }, 
     "type": "photo", 
     "status_type": "shared_story", 
     "object_id": "475566662509219", 
     "application": { 
      "name": "Photos", 
      "id": "2305272732" 
     }, 
     "created_time": 1359387805, 
     "updated_time": 1359387805, 
     "comments": { 
      "count": 0 
     } 
     } 
    ], 
    "paging": { 
     "previous": "https://graph.facebook.com/393459637370574/feed?limit=3&date_format=U&access_token=XXXX&since=1359555861&__previous=1", 
     "next": "https://graph.facebook.com/393459637370574/feed?limit=3&date_format=U&access_token=XXXX&until=1359387804" 
    } 
} 

我将如何得到这个功能的工作？

任何帮助/咨询非常感谢

Answer 1

看起来你不得不花费大量的时间与无限scroll.js扯皮得到它做你想要的东西，因为它依赖于具有分页链接在你的HTML。

可能更容易的是编写自己的Javascript来检测用户何时滚动，然后根据最近JSON响应中的下一页链接自动加载内容。

如果您查看jscroll.js（与infinte-scroll类似的插件，但代码更简单一些）的代码，您可能会很好地了解要查找什么以及何时加载新内容。具体来说，从线84：

// Observe the scroll event for when to trigger the next load 
    function _observe() { 
     var $inner = $e.find('div.jscroll-inner').first(), 
      data = $e.data('jscroll'), 
      iContainerTop = parseInt($e.css('paddingTop')) + parseInt($e.css('borderTopWidth')), 
      iTopHeight = _isWindow ? _$scroll.scrollTop() : $e.offset().top, 
      innerTop = $inner.length ? $inner.offset().top : 0, 
      iTotalHeight = Math.ceil(iTopHeight - innerTop + _$scroll.height() + iContainerTop), 
      nextHref = $.trim(data.nextHref + ' ' + _options.contentSelector); 

     if (_checkNextHref(data) && !data.waiting && iTotalHeight + _options.padding >= $inner.outerHeight()) { 
      _debug('info', 'jScroll:', $inner.outerHeight() - iTotalHeight, 'from bottom. Loading next request...'); 
      return _load(); 
     } 
    } 

Answer 2

望着文档，它似乎允许它调用通过AJAX在href的链接，并返回到您的响应的功能。

如果您在页面加载来填充你的初始原料的初始呼叫，然后创建一个显示：无链接的东西，如：

#nextLink { 
    display: none; 
} 

，并给它的数据的HREF [“呼叫”] [ “下一个”]，那么你可以用像初始化无限滚动：

$('.feedContainer').infinitescroll({ 
    // other options 
    nextSelector: "a#nextLink", 
    dataType: 'json', 
    appendCallback: false 
}, function(json, opts) { 
    // Update your next link to point to the next page 
    $('#nextLink').attr('href',json['data']['paging']['next']); 

    // Add your new feed rows here 
    var htmlStr = '<li>FeedContent</li>'; 

    // Append it to the container 
    $('.feedContainer').append(htmlStr); 
}); 

使用的dataType“JSONP”如果它支持它。

这应该大致给你你正在寻找什么！