2013-02-26 6 views
1

J'ai lu sur le site developers.facebook.com, mais ils expliquent très mal ces choses. J'espère donc que certains d'entre vous pourraient m'expliquer comment je peux ajouter un commentaire et un bouton similaire sur les statuts de Facebook en utilisant JavaScript et l'API graphique.Commentaires et mises à jour sur facebook mises à jour

Ce que j'ai maintenant est une application qui affiche le feed-back de l'utilisateur connecté (le fil d'actualité si vous voulez). Ce que je veux, c'est la fonctionnalité Facebook de base, qui est la capacité de commenter et aimer ces statuts, images, partages (comme vous pouvez sur Facebook), et aussi voir d'autres qui ont commenté et aimé ces photos et statuts.

J'ai compris que vous devez utiliser la méthode POST, mais je ne sais pas que je vais le faire (il y a quelques informations ici: http://developers.facebook.com/docs/reference/api/publishing/)

Alors, voici mon code pour l'instant (je ne sais pas si cela est la façon la plus efficace de le faire, mais cela fonctionne, je serais heureux si vous pouviez me donner quelques critiques constructives sur ce aussi bien).

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>'); 
} 
    } 
}); 

J'ai besoin évidemment d'ajouter trois (ou plus) divs qui contiennent le like et le bouton de commentaire respectueusement, et au moins un pour afficher les commentaires les plus récents lorsque vous cliquez dessus (comme sur Facebook). Et je devrais ajouter une sorte de code JS qui envoie une requête à facebook avec l'identifiant du statut/image, l'identifiant de l'utilisateur, quel type d'action est effectuée (comme ou commentaire) et enfin quel est le contenu du le commentaire est dans ce cas. La raison pour laquelle je demande cette information est que je travaille sur un projet, et j'essaie juste les différentes fonctionnalités de l'API de Graph Facebook, car elles pourraient faire un bon ajout aux fonctionnalités de mon projet, et c'est bon à savoir pour les futures références.

Espoir certains d'entre vous savent ce que je peux faire pour le faire fonctionner

Sincèrement, Aleksander.

Répondre

1

Personnellement, je pense que les Docs font du bon travail.

De l'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 

Commentant est simple, une fois que vous avez l'ID du poste que vous souhaitez commenter, exécutez simplement

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!'); 
    } 
}); 

De même, goût est encore plus simple. De la même docs:

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. 

Ainsi, en 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

Merci homme! Je vais essayer dès que j'arriverai à mon ordinateur, et je vous informerai si cela a fonctionné ou non :) Juste une question de plus. Comment pourrais-je l'implémenter dans mon code déjà existant? Où pourrais-je mettre votre code et ainsi de suite? – Aleksander

+0

Je ne peux pas vous aider à ce détail, j'ai besoin de l'ensemble du projet. Mettez ce code là où vous voulez aimer/commenter. –

+1

Bon, j'ai donc eu le temps de l'essayer maintenant. Au début, il semblait fonctionner, mais j'ai rencontré un gros problème. Donc, j'ai fait une vérification if/else pour voir s'il y a un objet lié à la publication. Dans ce cas, la fonction like prend en compte la variable object_id. Mais s'il y a un message standard (sans aucun objet), il prend la variable Post_id qui est extraite de 'response.data [i] .id'.Cela cependant me donne un message d'erreur dans la console (quand j'appuie sur le bouton "like"): "SyntaxError: Au moins un chiffre doit apparaître après un point décimal". L'identifiant d'un article ressemble à ceci: xxxxxxx_xxxxxx – Aleksander