2013-02-26 205 views
1

我一直在閱讀的developers.facebook.com網站,但他們解釋這些事情非常糟糕。所以我希望你們中的一些人能夠向我解釋如何使用JavaScript和Graph API在Facebook上添加評論和喜歡按鈕。評論和喜歡facebook的更新

我現在所擁有的是一個顯示登錄用戶的home-feed(如果你想要的新聞源)的應用程序。我想要的是Facebook的基本功能,即能夠評論和喜歡這些狀態,圖像,共享等(就像你可以在Facebook上一樣),還可以看到其他評論和喜歡這些照片和狀態的人。

我瞭解,你需要使用POST方法,但我不知道我會做到這一點(有一些信息在這裏:http://developers.facebook.com/docs/reference/api/publishing/

因此,這裏是我的代碼現在(我不知道這是否是做的最有效的方式,但它的作品,我會很高興,如果你能給我一些建設性的批評上也):

FB.api('/me/home', function(response) { 
    console.log(response.data); 
    for(var i=0, len = response.data.length; i < len; i++){ 

    var post_type = response.data[i].status_type; //Post type 

    var poster_id = response.data[i].from.id; //Poster 
    var poster_name = response.data[i].from.name; //Posters name 
    var poster = '<a href="http://www.facebook.com/' + poster_id + '/" >' + poster_name + '</a>'; //Link to poster 
    var poster_pic = 'https://graph.facebook.com/' + poster_id + '/picture'; //Posters profile pic 
    var poster_img = '<img height="50px" width="50px" src="' + poster_pic + '" />'; 

    var post_id = response.data[i].id; //Id of message 
    var post = response.data[i].message; //Content of message 
    var post_date = response.data[i].created_time; //Date created 

    var object_id = response.data[i].object_id; //Pic id (if pic's an object) 
    var post_img_url = response.data[i].picture; //Pic url 

    if(!object_id) { 
     var post_img = '<a href="http://www.facebook.com/' + post_id + '/"> <img src="' + post_img_url + '" /> </a>'; // <a href="http://www.facebook.com/' + post_id + '/">See at Facebook</a> 
    } else { 
     var post_img = '<a href="http://www.facebook.com/' + object_id + '/"> <img src="' + post_img_url + '" /> </a>'; 
    } 

    if (!post_img_url) { 
     post_img = ''; 
    } 

    if(!post) { 
     post = response.data[i].story; 
    } 

    if (post_type === 'wall_post') { 
     if(response.data[i].to) { 
     var posted_to_name = response.data[i].to.data[0].name; 
     var posted_to_id = response.data[i].to.data[0].id; 
     var posted_to = '<a href="http://www.facebook.com/' + posted_to_id + '/" >' + posted_to_name + '</a>'; 

     document.getElementById("write").innerHTML += ('<hr> <div class="facebook_content"> <div class="facebook_left_side"> <div class="facebook_content_header"> <div class="poster_img">' + poster_img + '</div> <div class="poster">' + poster + '</div> <div class="post_type"> wrote on ' + posted_to + '\'s wall: </div> <div class="post_date">' + post_date + '</div> </div> <div class="story">' + post + '</div> </div> <div class="facebook_right_side"> <div class="img">' + post_img + '</div> </div> </div> </br>'); 
     } else { 
     document.getElementById("write").innerHTML += ('<hr> <div class="facebook_content"> <div class="facebook_left_side"> <div class="facebook_content_header"> <div class="poster_img">' + poster_img + '</div> <div class="poster">' + poster + '</div> <div class="post_date">' + post_date + '</div> </div> <div class="story">' + post + '</div> </div> <div class="facebook_right_side"> <div class="img">' + post_img + '</div> </div> </div> </br>'); 
     } 
    } else if (post_type === 'added_photos') { 
     document.getElementById("write").innerHTML += ('<hr> <div class="facebook_content"> <div class="facebook_left_side"> <div class="facebook_content_header"> <div class="poster_img">' + poster_img + '</div> <div class="poster">' + poster + '</div> <div class="post_type"> added a photo: </div> <div class="post_date">' + post_date + '</div> </div> <div class="story">' + post + '</div> </div> <div class="facebook_right_side"> <div class="img">' + post_img + '</div> </div> </div> </br>'); 

} else if (post_type === 'shared_story') { 
     document.getElementById("write").innerHTML += ('<hr> <div class="facebook_content"> <div class="facebook_left_side"> <div class="facebook_content_header"> <div class="poster_img">' + poster_img + '</div> <div class="poster">' + poster + '</div> <div class="post_type"> shared: </div> <div class="post_date">' + post_date + '</div> </div> <div class="story">' + post + '</div> </div> <div class="facebook_right_side"> <div class="img">' + post_img + '</div> </div> </div> </br>'); 

} else { 
     document.getElementById("write").innerHTML += ('<hr> <div class="facebook_content"> <div class="facebook_left_side"> <div class="facebook_content_header"> <div class="poster_img">' + poster_img + '</div> <div class="poster">' + poster + '</div> <div class="post_date">' + post_date + '</div> </div> <div class="story">' + post + '</div> </div> <div class="facebook_right_side"> <div class="img">' + post_img + '</div> </div> </div> </br>'); 
} 
    } 
}); 

我顯然需要添加三個(或更多)divs,其中包含like和comment按鈕,並且至少有一個用於顯示點擊時的最新評論(就像在Facebook上一樣)。我需要添加一些JS代碼,向Facebook發送請求,其中包括狀態/圖像的ID,用戶的ID,執行的操作類型(如評論或評論)以及最後的內容在這種情況下評論。

我請求這些信息的原因是我正在開發一個項目,我只是嘗試了Facebook Graph API的不同功能,因爲它們可以很好地補充我的項目功能,並且很高興知道未來的參考。

希望你們當中有些人知道我能做些什麼,使工作

真誠, 亞歷山大。

回答

1

就我個人而言,我認爲Docs做得很好。

docs

Create 

You can write to the POST_ID/comments connection to post a comment to the post by issuing an HTTP POST request with the publish_stream permission and following parameters. 

Parameter Description  Type Required 
message Comment text string yes 

評論很簡單,一旦你有你想要發表評論的帖子的ID,只需運行

var comment = 'Reading JS SDK documentation'; 
var POST_ID = '1231412351234'; 
FB.api('/'+POST_ID+'/comments', 'post', { message: comment }, function(response) { 
    if (!response || response.error) { 
    alert('Error occured'); 
    } else { 
    alert('Great! It worked!'); 
    } 
}); 

同樣,喜好甚至simplier。從同一個文檔:

You can like a Post by issuing a HTTP POST request to the POST_ID/likes connection with the publish_stream permission. You can suppress the notification created when liking a Post by passing a notify parameter with value of false. 

所以,在Javascript:

var POST_ID = '1231412351234'; 
FB.api('/'+POST_ID+'/likes', 'post', function(response) { 
    if (!response || response.error) { 
    alert('Error occured'); 
    } else { 
    alert('Great! It worked!'); 
    } 
}); 
+0

感謝的人!一旦我到達我的電腦,我會嘗試這個,並會通知你,如果它的工作或沒有:) 只是一個問題。我將如何在我現有的代碼中實現這一點?我會在哪裏放你的代碼等? – Aleksander 2013-02-26 18:16:35

+0

我無法幫你瞭解詳情,我需要整個項目。把該代碼放在你想要的/評論的地方。 – 2013-02-26 18:54:35

+1

好的,所以我現在有空試試了。起初它似乎工作,但我遇到了一個大問題。所以,我做了一個if/else檢查,看看是否有與帖子相關的對象。在這種情況下,like函數接受變量object_id。但是如果有一個標準的帖子(沒有任何對象),它需要從'response.data [i] .id'中檢索到的變量Post_id。然而,這給了我一個控制檯中的錯誤消息(當我按下類似按鈕時):「SyntaxError:至少一位數字必須出現在小數點後」。帖子的ID如下所示:xxxxxxx_xxxxxx – Aleksander 2013-03-02 20:00:52