2015-09-04 44 views
0

我想爲WordPress網站創建一個腳本(javascript/jQuery),它允許我從多個Facebook頁面獲取最新帖子。我不希望帖子按帳戶排序,但要混合在一起,按created_time排序。我已經搜索插件,我不想要WP插件。使用JSON顯示來自多個Facebook供稿的帖子

<!doctype html> 
<html> 

<head> 

    <meta charset="utf-8" /> 

    <title>FaceBook Posts</title> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 

    <script type="text/javascript"> 

    function fbFetch(){ 
     //Set Url of JSON data from the facebook graph api. make sure callback is set with a '?' to overcome the cross domain problems with JSON 
     var url = "https://graph.facebook.com/footengo31/posts?access_token=XXX&limit=5&callback=?"; 
     var url2 = "https://graph.facebook.com/footengo01/posts?access_token=XXX&limit=5&callback=?"; 
     var url3 = "https://graph.facebook.com/Footengo69/posts?access_token=XXX&limit=5&callback=?"; 

     $.getJSON(url,function(json1){ 

      $.getJSON(url2,function(json2){ 

       $.getJSON(url3,function(json3){ 

        var json = {}; 
        json['json1'] = json1; 
        json['json2'] = json2; 
        json['json3'] = json3; 

        var json_array = []; 


        json_array.push(json); 

        //Use jQuery getJSON method to fetch the data from the url and then create our unordered list with the relevant data. 
         var html = "<ul>"; 
          //loop through and within data array's retrieve the message variable. 
          $.each(json.json1.data, function(i,fb){ 
           if (typeof fb.picture != "undefined") { 
            html += "<li>" + fb.message + "</br>" + '<img SRC="' + fb.picture + '">' + "</br>" + fb.created_time + "</li></br>"; 
           } 
           else{ 
            html += "<li>" + fb.message + "</br>" + fb.created_time + "</li></br>"; 
           } 
          }); 

          $.each(json.json2.data,function(i,fb){ 
           if (typeof fb.picture != "undefined") { 
            html += "<li>" + fb.message + "</br>" + '<img SRC="' + fb.picture + '">' + "</br>" + fb.created_time + "</li></br>"; 
           } 
           else{ 
            html += "<li>" + fb.message + "</br>" + fb.created_time + "</li></br>"; 
           } 
          }); 

          $.each(json.json3.data,function(i,fb){ 
           if (typeof fb.picture != "undefined") { 
            html += "<li>" + fb.message + "</br>" + '<img SRC="' + fb.picture + '">' + "</br>" + fb.created_time + "</li></br>"; 
           } 
           else{ 
            html += "<li>" + fb.message + "</br>" + fb.created_time + "</li></br>"; 
           } 
          }); 

         html += "</ul>"; 
         //A little animation once fetched 
         $('.facebookfeed').animate({opacity:0}, 500, function(){ 
          $('.facebookfeed').html(html); 
         }); 

         $('.facebookfeed').animate({opacity:1}, 500); 

       }); 
      }); 
     }); 

    }; 




    </script> 

</head> 


<body onload="fbFetch();"> 
    <div class="facebookfeed">Loading...</div> 

</body> 

我有我的3帳戶最後5個職位,但5從第一頁持續,從第二個5個最新帖子......這給我這樣的結果:

回答

0

你能做到這一點有一個請求,而不是三個:

https://graph.facebook.com/?ids=footengo31,footengo01,Footengo69&fields=posts.limit(5){message,created_time,picture}&access_token={your_access_token} 

回報

{ 
    "footengo31": { 
     "posts": { 
      "data": [ 
       { 
        "message": "Vu sur Football65 - Le président de GUIZERIX met les choses au point... http://www.foot31.fr/Vu-sur-Football65-Le-president-de-GUIZERIX-met-les-choses-au-point_a11672.html", 
        "created_time": "2015-09-04T07:04:07+0000", 
        "id": "298593320199_10154353705475200" 
       }, 
       { 
        "message": "DH - Comment l'AS MURET a changé de style... http://www.foot31.fr/DH-Comment-l-AS-MURET-a-change-de-style_a11670.html", 
        "created_time": "2015-09-04T07:03:46+0000", 
        "id": "298593320199_10154353703060200" 
       }, 
       { 
        "message": "CFA - Nouveau départ, nouveau cycle pour le RODEZ AF ?", 
        "created_time": "2015-09-04T06:59:51+0000", 
        "id": "298593320199_10154353697905200" 
       }, 
       { 
        "message": "Coupe de France - Le tirage du 3ème tour est en ligne... http://www.foot31.fr/Coupe-de-France-tirage-du-3eme-tour-ONET-LE-CHATEAU-et-SAINT-ALBAN-deja-qualifies-_a11668.html", 
        "created_time": "2015-09-03T07:57:36+0000", 
        "id": "298593320199_10154351103020200" 
       }, 
       { 
        "message": "DH féminines - Nicolas CASTANIER (TFC) : \"Reveniraveclesfillesétaitinévitable...\" http://www.foot31.fr/DH-feminines-Nicolas-CASTANIER-TFC-Revenir-avec-les-filles-etait-inevitable_a11660.html", 
        "created_time": "2015-09-03T07:49:52+0000", 
        "id": "298593320199_10154351087560200" 
       } 
      ], 
      "paging": { 
       "previous": "https://graph.facebook.com/v2.4/298593320199/posts?limit=5&fields=message,created_time&since=1441350247&access_token=&__paging_token=&__previous=1", 
       "next": "https://graph.facebook.com/v2.4/298593320199/posts?limit=5&fields=message,created_time&access_token=&until=1441266592&__paging_token=" 
      } 
     }, 
     "id": "298593320199" 
    }, 
    "footengo01": { 
     "posts": { 
      "data": [ 
       { 
        "message": "PHR (A et D) - Confirmations attendues pour PORTES DE L'AIN et DOMBES BRESSE, FEILLENS va savoir http://www.football01.fr/PHR-A-et-D-Confirmations-attendues-pour-PORTES-DE-L-AIN-et-DOMBES-BRESSE-FEILLENS-va-savoir_a5534.html", 
        "created_time": "2015-09-04T06:47:31+0000", 
        "id": "174766979959_10150544890344960" 
       }, 
       { 
        "message": "Quelques réactions en vidéo après le tirage au sort du troisième tour http://www.footengo69.fr/Coupe-de-France-Les-reactions-apres-le-tirage-au-sort_a12605.html", 
        "created_time": "2015-09-02T20:07:32+0000", 
        "id": "174766979959_10150544489819960" 
       }, 
       { 
        "message": "Le tirage et l'analyse du troisième tour de la coupe de France http://www.footengo69.fr/Coupe-de-France-Des-affiches-pour-le-troisieme-tour_a12604.html", 
        "created_time": "2015-09-02T19:46:19+0000", 
        "id": "174766979959_10150544484489960" 
       }, 
       { 
        "message": "Le tirage complet, c'est ici et seulement ici Une réaction ? Déçu ? Heureux ? Mitigé ? On vous donne rendez-vous un peu plus tard pour les analyses et les réactions des intéressés. http://www.footengo69.fr/Coupe-de-France-Le-tirage-du-troisieme-tour-est-en-ligne_a12603.html", 
        "created_time": "2015-09-02T17:41:22+0000", 
        "id": "174766979959_10150544441624960" 
       }, 
       { 
        "message": "Ce soir, le tirage du troisième tour de la coupe de France aura lieu à 18h30 au Siège de la Ligue Rhône-Alpes. Il marque l'entrée en lice des formations de CFA2, d'Honneur et de HR. Rendez-vous à 18h20 pour suivre en direct ce rendez-vous incontournable sur nos sites depuis plusieurs années. http://www.footengo69.fr/Coupe-de-France-Suivez-le-tirage-au-sort-du-troisieme-tour-EN-DIRECT-des-18h30_a12603.html", 
        "created_time": "2015-09-02T10:18:44+0000", 
        "id": "174766979959_10150544343284960" 
       } 
      ], 
      "paging": { 
       "previous": "https://graph.facebook.com/v2.4/174766979959/posts?limit=5&fields=message,created_time&since=1441349251&access_token=&__paging_token=&__previous=1", 
       "next": "https://graph.facebook.com/v2.4/174766979959/posts?limit=5&fields=message,created_time&access_token=&until=1441189124&__paging_token=" 
      } 
     }, 
     "id": "174766979959" 
    }, 
    "Footengo69": { 
     "posts": { 
      "data": [ 
       { 
        "message": "Présentation de la PHR poule B et F... http://www.footengo69.fr/PHR-Poule-B-et-F-Cinq-RHODANIENS-prets-au-combat_a12607.html", 
        "created_time": "2015-09-04T09:11:17+0000", 
        "id": "283981085258_10153512214115259" 
       }, 
       { 
        "message": "Quelques réactions en vidéo après le tirage au sort du troisième tour http://www.footengo69.fr/Coupe-de-France-Les-reactions-apres-le-tirage-au-sort_a12605.html", 
        "created_time": "2015-09-02T20:05:35+0000", 
        "id": "283981085258_10153508723965259" 
       }, 
       { 
        "message": "Analyse du tirage du 3ème tour de la coupe de France", 
        "created_time": "2015-09-02T19:32:02+0000", 
        "id": "283981085258_10153508588080259" 
       }, 
       { 
        "message": "Le tirage complet, c'est ici et seulement ici Une réaction ? Déçu ? Heureux ? Mitigé ? http://www.footengo69.fr/Coupe-de-France-Le-tirage-du-troisieme-tour-est-en-ligne_a12603.html", 
        "created_time": "2015-09-02T17:38:43+0000", 
        "id": "283981085258_10153508422120259" 
       }, 
       { 
        "message": "C'est parti http://www.footengo69.fr/Coupe-de-France-Le-tirage-du-troisieme-tour-va-commencer_a12603.html", 
        "created_time": "2015-09-02T16:46:08+0000", 
        "id": "283981085258_10153508218775259" 
       } 
      ], 
      "paging": { 
       "previous": "https://graph.facebook.com/v2.4/283981085258/posts?limit=5&fields=message,created_time&since=1441357877&access_token=&__paging_token=&__previous=1", 
       "next": "https://graph.facebook.com/v2.4/283981085258/posts?limit=5&fields=message,created_time&access_token=&until=1441212368&__paging_token=" 
      } 
     }, 
     "id": "283981085258" 
    } 
} 

完整的邏輯是

function fbFetch(){ 

    var url = "https://graph.facebook.com/?ids=footengo31,footengo01,Footengo69&fields=posts.limit(5){message,created_time,picture}&access_token={your_access_token}"; 

    $.getJSON(url,function(response){ 

     var messages = []; 

     Object.getOwnPropertyNames(response).forEach(function(page, idx, array) { 
      response[page].posts.data.forEach(function(post, idx, array) { 
       messages.push(post); 
      }); 
     }); 

     function compare(a,b) { 
      if (a.created_time < b.created_time) 
      return -1; 
      if (a.created_time > b.created_time) 
      return 1; 
      return 0; 
     } 

     //Use jQuery getJSON method to fetch the data from the url and then create our unordered list with the relevant data. 
     var html = "<ul>"; 
      //loop through and within data array's retrieve the message variable. 
      $.each(messages.sort(compare), function(i,fb){ 
       if (typeof fb.picture != "undefined") { 
        html += "<li>" + fb.message + "</br>" + '<img SRC="' + fb.picture + '">' + "</br>" + fb.created_time + "</li></br>"; 
       } 
       else{ 
        html += "<li>" + fb.message + "</br>" + fb.created_time + "</li></br>"; 
       } 
      }); 

     html += "</ul>"; 

     //A little animation once fetched 
     $('.facebookfeed').animate({opacity:0}, 500, function(){ 
      $('.facebookfeed').html(html); 
     }); 

     $('.facebookfeed').animate({opacity:1}, 500); 

    }); 

} 

見工作小提琴在http://jsfiddle.net/6fhq3dat/2/(交換訪問令牌第一)...

+0

謝謝你的是,它似乎正是我想要的,但我不明白如何實現這個部分'/?ids=footengo31,footengo01,Footengo69&fields=posts.limit(5){message,created_time,picture}' –

+0

已更新我的回答 – Tobi

+0

已更新。下一次請看FB文檔,它全部記錄在那裏。 – Tobi

相關問題