2013-08-02 48 views
-1

我有一個HTML應用程序使用純JavaScript來搜索Facebook頁面,沒有其他庫和沒有後端。處理搜索和閱讀「頁面」的API大部分不需要用戶授權,並且他們支持JSONP(通過「回調」參數)。使用javascript搜索Facebook頁面

我的HTML代碼,index.html的

<!doctype html> 
<head> 
    <title>FaceBook Page Search API</title> 
    <script type="text/javascript" src='js/app.js'></script> 
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
</head> 
<body> 
    <div class="container"> 
    <div class="form-search"> 
     <h3>Search FaceBook Pages</h3> 
     <p class="form-search-row"><input id="searchPages" type="text" placeholder="Enter name"> 
    <button class="btn btn-medium btn-success" onclick="getData()" type="submit">Search</button> 
    </p> 
    </div> 
    </div> 
    <div class="offset1 pull-center page-results"> 
    </div> 
</body> 
</html> 

和app.js,

var getData = function(){ 
var my_JSON_object = {}; 
var http_request = new XMLHttpRequest(); 
var str, queryInput = document.getElementById("searchPages"); 
var searchFormRow = document.getElementsByClassName('form-search-row')[0]; 
var image=document.createElement('img'); 

if(!queryInput.value){ 
    return; 
} 

str = encodeURIComponent(queryInput.value); 
image.setAttribute('src', 'img/ajax-loader.gif'); 
image.setAttribute('width', '30px'); 
searchFormRow.appendChild(image); 

var url = "https://graph.facebook.com/search?type=page&q="+ str; 
http_request.open("GET", url, true); 
http_request.onreadystatechange = function() { 
    var done = 4, ok = 200; 
    if (http_request.readyState == done && http_request.status == ok) { 
     my_JSON_object = JSON.parse(http_request.responseText); 
     displayResults(my_JSON_object); 
     image.parentNode.removeChild(image); 
    } 
}; 
http_request.send(null); 
}; 


var displayResults = function(pages){ 
    var resultDiv = document.getElementsByClassName('page-results')[0]; 
    if(pages.data.length){ 
     resultDiv.innerHTML = ""; 
    } 
    else{ 
     resultDiv.innerHTML = "No results found"; 
    } 
    for(var i=0; i<pages.data.length; i++) 
    { 
     var name = pages.data[i].name, category = pages.data[i].category, id= pages.data[i].id; 
     var page = document.createElement("div"); 
     var pname = document.createElement("p"); 
     var findmore = document.createElement("a"); 
     var pcategory = document.createElement("p"); 
     pname.innerHTML = name; 
     findmore.innerHTML = " find out more"; 
     findmore.href= "detail.html?id="+id; 
     findmore.target = "_blank"; 
     pname.appendChild(findmore); 
     pcategory.innerHTML = "Category: " + category; 
     pcategory.setAttribute('class',"small-font"); 
     page.setAttribute('class','span2 pageDiv'); 
     page.appendChild(pname); 
     page.appendChild(pcategory); 
     resultDiv.appendChild(page); 
     console.log(pages.data[i].name); 
    } 
    }; 


    var getPageDeatil = function(){ 
    var query = window.location.search.substring(1); 
    var vars = query.split("="); 
    getDetailsAjax(vars[1]); 
}; 

var getDetailsAjax = function(pageId){ 
var my_JSON_object = {}; 
var http_request = new XMLHttpRequest(); 
var str = encodeURIComponent(pageId); 

var url = "https://graph.facebook.com/"+ str; 
http_request.open("GET", url, true); 
http_request.onreadystatechange = function() { 
    var done = 4, ok = 200; 
    if (http_request.readyState == done && http_request.status == ok) { 
     my_JSON_object = JSON.parse(http_request.responseText); 
     displayDetailsResult(my_JSON_object); 
    } 
}; 
http_request.send(null); 
}; 

var displayDetailsResult = function(detail){ 
    var resultDiv = document.getElementById('details'); 
    var displayImage; 
    for (key in detail) { 
    if (detail.hasOwnProperty(key)) { 
     if(key=="cover"){ 
      displayImage =true; 
     } 
     else{ 
      var li = document.createElement("li"); 
      li.setAttribute('class',"removeDecor"); 
      li.innerHTML = key+ " : " + detail[key]; 
      resultDiv.appendChild(li); 
     } 
    } 
    } 
    if(displayImage){ 
    var heading = document.getElementById('header'); 
    var image = document.createElement('img'); 
    image.setAttribute('src', detail.cover.source); 
    heading.insertBefore(image); 
    } 
    }; 

最後,detail.html

<!doctype html> 
<head> 
    <title>FaceBook Page Search API - Detail Page</title> 
    <script type="text/javascript" src='js/app.js'></script> 
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
</head> 
<body onload="getPageDeatil()"> 
    <div class="container"> 
    <h3 id="header">More about Page</h3> 
    <div class="well"> 
     <ul id="details"> 
     </ul> 
    </div> 
    </div> 
</body> 
</html> 

但它給下面的錯誤安慰。

{ 
    "error": { 
    "message": "(#200) Must have a valid access_token to access this endpoint", 
    "type": "OAuthException", 
    "code": 200 
    } 
} 

頁面搜索API不需要授權嗎?那我該如何解決這個問題?

+0

解決此問題,檢查我的答案。 – devo

回答

2

感謝所有,終於通過參考Facebook開發者文檔解決了我的問題。

首先,有詳細資料在這裏ACCESS_TOKEN,跨頁和放置物品https://developers.facebook.com/docs/reference/api/search/#access_tokens

搜索需要一個應用程序訪問令牌。

每個應用程序都應該在https://developers.facebook.com/apps中註冊以獲取app_id和secret_id。

得到這個信息後, 生成使用的access_token這個URL https://graph.facebook.com/oauth/access_token?client_id=app_id&client_secret=secret_id&grant_type=client_credentials

的APP_ID和secret_id應該產生一個被改變。

而且改變了我的請求的URL在這樣app.js文件,

var access_token = ""; // my access token here 
var url = "https://graph.facebook.com/search?type=page&q="+ str +"&access_token="+access_token;