[JavaScript] 使用Facebook Graph API抓取資料

使用Facebook Graph API來抓取資料,基本上並不難,目前最新的Facebook Graph API是2.3版,有些舊版(V1.0)的語法不能用新版使用,而網路上找到的範例很多卻是用舊版語法寫的,用新版跑起來會出錯,因此建議初學者,直接參考官網上的Facebook Graph API文件,不過其實官網上的說明寫的不夠詳細,範例也不多,得靠開發者自己多嘗試了。

設定

首次使用Facebook Graph API,請先到Developer Portal建立一個新的App。

建好App之後,可以在App Dashboard上看到App ID,請先記下來,程式是使用這個ID來判別這是你的App。

接著要設定Valid OAuth redirect URI,因為Facebook Graph API會限定伺服器的存取,沒有在有效的OAuth redirect URI清單裡的domain name,在進入OAuth認證時會報錯。首先到Setting > Advanced

然後往下拉,會看到Valid OAuth redirect URIs,請加上你所有環境的domain name,如果開發環境是在自己電腦的本機的8080 port,要輸入http://localhost:8080

範例

下面的程式範例會列出登入者按過讚的Facebook專頁
HTML的部分比較單純,只有三行
<button id="fb-login">Login to Facebook</button>
<div id="fb-root"></div>
<div id="userdata"></div>
JavaScript的部分,首先要引用https://connect.facebook.net/en_US/all.js,然後做初始化
FB.init({
         appId: "(your Facebook app id)", 
         status: true,
         cookie: true,
         xfbml: true,
         oauth: true
    });

這裡是取得登入狀態,若登入成功,則取得accessToken
FB.getLoginStatus(function(response) {
      if (response.status === "connected") {
        var uid = response.authResponse.userID;
        var accessToken = response.authResponse.accessToken;
        
      } else if (response.status === "not_authorized") {
        // the user is logged in to Facebook, 
        // but has not authenticated your app
      } else {
        // the user isn't logged in to Facebook.
      }
     });  

最後是按下登入按鈕的動作:

  • 第6行的"/me/likes?limit=1000"是指定要存取的Node和筆數,若成功會將Json回傳到#userdata
  • 第13行是指定權限"user_likes"
$("#fb-login").click(function() {
    //initiate OAuth Login
    FB.login(function(response) {
        // if login was successful, execute the following code
        if (response.authResponse) {
            FB.api("/me/likes?limit=1000", function(details) {
                // output the response
                $("#userdata").html(JSON.stringify(details, null, '\t'));
                $("#fb-login").attr("style", "display:none;");
            });
        }
    }, {
        scope: "user_likes"
    });
}); 


因為JsFiddle無法在iFrame中顯示Facebook認證畫面,所以無法提供demo,請見諒。


相關文章

如何將電腦畫面經由 Chromecast 投放到電視螢幕上

Chrome 的檔案續傳功能

隱私權政策產生器 Privacy Policy Generator

使用 Vysor 在電腦上控制 Android 裝置