2

このプラグインを使用して、Facebook フィードの無限スクロール効果を作成しようとしています。グラフ API (ファン ページ ウォールの投稿) を介して必要なフィードにアクセスできるようになり、それを 10 に制限しています。実際の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

ドキュメントを見ると、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 に答える
0

HTML にページネーション リンクが含まれているかどうかに依存するため、infinite-scroll.js を希望どおりに動作させるには、多くの時間を費やす必要があるようです。

おそらく簡単なのは、ユーザーがスクロールしているときを検出し、最新の 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();
        }
    }
于 2013-03-09T11:57:30.960 に答える