Javascript 使用JSON显示来自多个facebook提要的帖子
我想为WordPress网站创建一个脚本（javascript/jQuery），允许我从多个Facebook页面上发布最新帖子。我不想让帖子按帐号排序，但要混合在一起，按创建时间排序。我已经搜索了插件，我不想要WP插件Javascript 使用JSON显示来自多个facebook提要的帖子,javascript,php,jquery,wordpress,facebook,Javascript,Php,Jquery,Wordpress,Facebook,我想为WordPress网站创建一个脚本（javascript/jQuery），允许我从多个Facebook页面上发布最新帖子。我不想让帖子按帐号排序，但要混合在一起，按创建时间排序。我已经搜索了插件，我不想要WP插件 <!doctype html> <html> <head> <meta charset="utf-8" /> <title>FaceBook Posts</title> <
<!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>
FaceBook帖子
函数fbFetch（）{
//设置facebook graph api中JSON数据的Url。确保回调设置为“？”，以克服JSON的跨域问题
变量url=”https://graph.facebook.com/footengo31/posts?access_token=XXX&limit=5&callback=?";
变量url2=”https://graph.facebook.com/footengo01/posts?access_token=XXX&limit=5&callback=?";
变量url3=”https://graph.facebook.com/Footengo69/posts?access_token=XXX&limit=5&callback=?";
$.getJSON（url，函数（json1）{
$.getJSON（url2，函数（json2）{
$.getJSON（url3，函数（json3）{
var json={}；
json['json1']=json1；
json['json2']=json2；
json['json3']=json3；
var json_数组=[]；
json_array.push（json）；
//使用jQuery getJSON方法从url获取数据，然后使用相关数据创建无序列表。
var html=“”；
//在数据数组中循环并检索消息变量。
$.each（json.json1.data，函数（i，fb）{
if（fb.picture的类型！=“未定义”）{
html+=“- ”+fb.message+”“+”“+fb.created\u time+”
”；
}
否则{
html+=“- ”+fb.message+”“+fb.created\u time+”
”；
}
});
$.each（json.json2.data，function（i，fb）{
if（fb.picture的类型！=“未定义”）{
html+=“- ”+fb.message+”“+”“+fb.created\u time+”
”；
}
否则{
html+=“- ”+fb.message+”“+fb.created\u time+”
”；
}
});
$.each（json.json3.data，function（i，fb）{
if（fb.picture的类型！=“未定义”）{
html+=“- ”+fb.message+”“+”“+fb.created\u time+”
”；
}
否则{
html+=“- ”+fb.message+”“+fb.created\u time+”
”；
}
});
html+=“
”；
//一个小动画一旦被抓取
$（'.facebookfeed'）。设置动画（{opacity:0}，500，function（）{
$（'.facebookfeed'）.html（html）；
});
$（'.facebookfeed'）。设置动画（{opacity:1}，500）；
});
});
});
};
加载。。。
我有我的3个帐户的最后5个帖子，但5个从第一页开始，5个从第二页开始。。。这给了我一个结果：您可以通过一个请求而不是三个请求来实现这一点：
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);
});
}
函数fbFetch（）{
变量url=”https://graph.facebook.com/?ids=footengo31限制（5）{message，created_time，picture}&access_-token={your_-access_-token}”；
$.getJSON（url、函数（响应）{
var消息=[]；
getOwnPropertyNames（response）.forEach（函数（页面、idx、数组）{
响应[page].posts.data.forEach（函数（post、idx、数组）{
消息。推送（post）；
});
});
功能比较（a、b）{
如果（a.创建时间b.创建时间）
返回1；
返回0；
}
//使用jQuery getJSON方法从url获取数据，然后使用相关数据创建无序列表。
var html=“”；
//在数据数组中循环并检索消息变量。
$.each（消息、排序（比较）、函数（i、fb）{
if（fb.picture的类型！=“未定义”）{
html+=“- ”+fb.message+”“+”“+fb.created\u time+”
”；
}
否则{
html+=“- ”+fb.message+”“+fb.created\u time+”
”；
}
});
html+=“
”；
//一个小动画一旦被抓取
$（'.facebookfeed'）。设置动画（{opacity:0}，500，function（）{
$（'.facebookfeed'）.html（html）；
});
$（'.facebookfeed'）。设置动画（{opacity:1}，500）；
});
}
请参阅（首先交换访问令牌）上的工作提琴。谢谢，这似乎正是我想要的，但我不明白如何实现这一部分
/？ids=footengo31，footengo01，Footengo69&fields=posts.limit（5）{消息，创建时间，图片}