想跳過廢話前言直接看Graph API的請點進內文後 按此
====================================
前言 :
因為前一篇......
取得Facebook 粉絲團中，某篇文章按讚的人數 + 名單 + 個人資料 (使用 FQL)
根據有人使用過後的結果後熱心的回報....用FQL取得的返回內容有個致命的問題
就是會有筆數上限的限制 
再複習一下......印象中如果FQL不設定 limit 預設只會返回100筆
加了 limit 之後就可以返回指定的筆數了
ex : 以下返回1000筆
SELECT user_id FROM like
WHERE
post_id = '205736761592_10152019203996593'
limit 1000
但是limit 1000 已經是極限了 = =
你就算改成 limit 1000000 他還是返回1000筆
網路上找到快死掉都找不到解決的方法.......
後來改用 Graph API 後就直接搞定了，因為預設就有分頁功能
用法也很簡單，反正就是網址列參數加加減減
拿之前的FQL範例來改也超簡單
========================================
正式開始 :
首先看一下使用方式，利用FB.api 呼叫
https://developers.facebook.com/docs/javascript/reference/FB.api/
FB.api(path, function(response) {
//設定好要抓的path
//再解析返回的 response JSON 就搞定了
});
一樣可以先來這邊測試，如下圖與連結
https://developers.facebook.com/tools/explorer
用法應該不用說明了吧 ，請看前一篇有講
然後來這邊查你想要抓什麼樣的資料 (就是path參數)
https://developers.facebook.com/docs/graph-api/reference/
然後要注意的是......官網的連結有錯.....
/{object-id}/likes 點下去的頁面是 comments = ="
幸好我天性聰明機警自己改網址才發現 likes真的存在...........
https://developers.facebook.com/docs/graph-api/reference/object/likes/
舉例來說我要查某篇文章按讚的使用者資料就這樣下 (查詢文章編號請看前一篇講FQL的文章)
205736761592_10152019203996593/likes
查完的結果
如果你不知道這個Endpoint支援了什麼欄位，就可以點旁邊的 Search for a field
馬上列出來了，超方便der~
像下面這串就是查"205736761592_10152019203996593"這篇文章按讚的人
然後抓使用者編號 + 大頭照，然後一次抓回兩筆
205736761592_10152019203996593/likes?fields=id,pic&limit=2
就可以看到如下的 JSON
{
"data": [
{
"id": "100004003987189",
"pic": "https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/t5/211854_100004003987189_64640824_s.jpg"
},
{
"id": "100002222993087",
"pic": "https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/t5/273678_100002222993087_1977850709_s.jpg"
}
],
"paging": {
"cursors": {
"after": "MTAwMDAyMjIyOTkzMDg3",
"before": "MTAwMDA0MDAzOTg3MTg5"
},
"previous": "https://graph.facebook.com/205736761592_10152019203996593/likes?fields=id,pic&limit=2&before=MTAwMDA0MDAzOTg3MTg5",
"next": "https://graph.facebook.com/205736761592_10152019203996593/likes?fields=id,pic&limit=2&after=MTAwMDAyMjIyOTkzMDg3"
}
}
其中 next : 就是下一頁的 URL，previous 就是上一頁
用上面的 after + before 自己帶入也可以
就只是網址列後面加個 before or after 的參數就可以上下分頁了
limit 可以設定為 1000 然後用 before + after 去分頁即可
再來稍微程式化一下好了，一樣用javascript
抱歉程式可能沒有整理，應急寫出來的~
所以可能寫的不是非常美觀 + 很有結構，請見諒 XD
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://connect.facebook.net/zh_TW/all.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
var url = "http://socute.somee.com/fblike.aspx?";
var appid = "693808703975156";
var postid = "";
var fanid = "";
//初始化
FB.init({
appId: appid,
status: true,
cookie: true,
xfbml: true,
channelURL: 'http://socute.somee.com/channel.html',
oauth: true
});
//檢查登入狀態
FB.getLoginStatus(function (response) {
if (response.authResponse) {
var accessToken = response.authResponse.accessToken;
//取得按讚的使用者資料，第一頁取得1000筆資料
GetLikeUser(postid,"","");
} else {
//取得授權
window.top.location.href = "http://www.facebook.com/connect/uiserver.php?app_id=" + encodeURIComponent(appid) + "&next=" + encodeURIComponent(url) +
"&display=popup&perms=email,user_birthday,user_likes&fbconnect=1&method=permissions.request";
}
});
//取得按讚的使用者資料
function GetLikeUser(postid, before, after) {
var u = '/likes?fields=id,name,link,pic_large&limit=1000';
if (before != "") {
u += '&before=' + before;
}
if (after != "") {
u += '&after=' + after;
}
FB.api(postid + u, function (res) {
var html = "";
for (var key in res.data) {
var id = res.data[key].id;
var name = res.data[key].name;
var link = res.data[key].link;
var pic_large = res.data[key].pic_large;
//取得資料後自己看要怎麼用!!!
//.......................................
}
//做一下上一頁 + 下一頁的連結
if (typeof (res.paging) !== "undefined") {
if (typeof (res.paging.cursors.before) !== "undefined") {
$("#pages").append(" <a href=\"javascript:void(0)\" id=\"beforepage\" code=\"" + res.paging.cursors.before + "\">上一頁</a> ")
}
if (typeof (res.paging.cursors.after) !== "undefined") {
$("#pages").append(" <a href=\"javascript:void(0)\" id=\"nextpage\" code=\"" + res.paging.cursors.after + "\">下一頁</a> ")
}
}
$("#posttba").append(html);
});
//按下一頁的按鈕後
$("#pages").on("click", "#nextpage", function () {
var code = $(this).attr("code");
FB.getLoginStatus(function (response) {
if (response.authResponse) {
//就呼叫下一頁的資料
GetLikeUser(postid,"", code);
} else {
window.top.location.href = "http://www.facebook.com/connect/uiserver.php?app_id=" + encodeURIComponent(appid) + "&next=" + encodeURIComponent(url) + "&display=popup&perms=email,user_birthday,user_likes&fbconnect=1&method=permissions.request";
}
});
});
//按上一頁的按鈕後
$("#pages").on("click", "#beforepage", function () {
var code = $(this).attr("code");
FB.getLoginStatus(function (response) {
if (response.authResponse) {
//就呼叫上一頁的資料
GetLikeUser(postid, code, "");
} else {
window.top.location.href = "http://www.facebook.com/connect/uiserver.php?app_id=" + encodeURIComponent(appid) + "&next=" + encodeURIComponent(url) + "&display=popup&perms=email,user_birthday,user_likes&fbconnect=1&method=permissions.request";
}
});
});
}
});
</script>
寫出來的範例在這邊
就是之前寫的查詢PO文按讚使用者資料的懶人包改良版
網址 : http://socute.somee.com/fblike.aspx (這個常在維修)
備用網址 : http://socute.gear.host/FBTool/fblike.aspx (這個比較穩定)
找粉絲團貼文的ID使用的是 FQL
找針對該篇文章按讚的是使用 Graph API
留言列表
CSS、Responsive Web Design (2)