2

我正在尝试使用插件为 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"
   }
}

我将如何使此功能正常工作?

非常感谢任何帮助/建议

4

2 回答 2

0

看起来您必须花费大量时间与无限滚动.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();
        }
    }
于 2013-03-09T11:57:30.960 回答
0

查看文档,它似乎允许通过 AJAX 调用 href 中的链接并将响应返回给您的功能。

如果您在 pageload 上进行初始调用以填充初始提要,则创建一个 display: none 链接,如下所示:

#nextLink {
   display: none;
}

并给它 data['paging']['next'] 的 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'。

这应该大致给你你正在寻找的东西!

于 2013-03-12T15:49:52.140 回答