Facebook Feed在网页上无限滚动

时间:2013-02-03 20:06:26

标签: javascript jquery json jquery-plugins

我正在尝试使用 this 插件为Facebook Feed创建无限滚动效果,现在我可以通过图形api(粉丝页面墙贴)访问我需要的Feed并且我将其限制为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"
   }
}

我如何才能使这项功能正常运作?

非常感谢任何帮助/建议

2 个答案:

答案 0 :(得分:0)

看起来你不得不花费大量的时间与无限的scroll.js争吵,让它做你想做的事情,因为它取决于HTML中的分页链接。

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

如果你看一下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();
        }
    }

答案 1 :(得分:0)

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

如果您在pageload上进行初始调用以填充初始Feed,则使用以下内容创建display:none链接:

#nextLink {
   display: none;
}

并给它一个href的数据['paging'] ['next']然后你可以用以下内容初始化无限滚动:

$('.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'。

那应该粗略地给你你想要的东西!