Facebook Feed 上的网页无限滚动
Posted
技术标签:
【中文标题】Facebook Feed 上的网页无限滚动【英文标题】：Facebook Feed on web page infinte scrolling 【发布时间】：2013-01-18 13:29:06 【问题描述】：我正在尝试使用 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"
如何让这个功能发挥作用？
非常感谢任何帮助/建议
【问题讨论】：
这与仅使用 facebook.com 有何不同？顺便说一句，没有内置的方式来读取 json 文件。您必须在每次滚动加载时解析它。 嗯，我需要把它嵌入到一个网站上......这是真的，谢谢...... 【参考方案1】：看起来您必须花费大量时间来处理无限滚动.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();
【讨论】：
【参考方案2】：查看文档，它似乎允许通过 AJAX 调用 href 中的链接并将响应返回给您的功能。
如果您对页面加载进行初始调用以填充初始提要，则创建一个 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'。
这应该可以大致为您提供所需的内容！
【讨论】：
以上是关于Facebook Feed 上的网页无限滚动的主要内容，如果未能解决你的问题，请参考以下文章