L’API de facebook est plutôt simple à prendre en main. D’autant plus que l’explorateur de graph permet vraiment de tester ce que l’on souhaite.
Au final, lorsque l’on a besoin d’utiliser l’API js, on répond régulièrement aux mêmes problématiques (connexion, permissions, liste d’amis…)
C’est pour cela que je vous propose ici de mettre à disposition tout ce dont vous avez besoin la plupart du temps 😉
Nous allons donc voir comment : connecter l’utilisateur, checker les permissions, faire un partage, récupérer la liste de amis, récupérer ses photos, poster une photo, tagger une photo.
Connexion
FB.login(function(response) { if (response.authResponse) { //userID var userID = response.authResponse.userID; //accessToken var accessToken = response.authResponse.accessToken; } }, {scope: "publish_stream"});
Une fois connecté, vous aurez accès à certaines variables, dont les plus intéressantes sont l’uid de l’utilisateur, ainsi que l’accessToken.
Le dernier paramètre (scope), vous sert à demander les autorisations dont vous avez besoins. Ici « publish_stream » permet de récupérer les informations basiques de l’utilisateur et partager sur son mur.
Justement, voyons dans le prochain bout de code comment partager dans le feed.
Partage
FB.ui({ method: "feed", link: "MON URL", picture: "MON IMAGE EN ABSOLUE", caption: "MON TEXTE" }, function(response){ //En réponse nous avons l’id du post //callback });
Attention il n’est plus possible de pré remplir le message de partage, cela est désormais uniquement réservé à l’utilisateur.
Checker les permissions
Nous avons vu comment connecter l’utilisateur, et comment demander les permissions dont nous avons besoin. Mais attention, Facebook préfère que l’on ne demande pas toutes les permissions nécessaire d’un coup, mais plutôt seulement au moment du besoin. Voyons donc comment checker les permissions et demander celles qui nous manquent :
FB.api("/me/permissions", function (response) { if (response && !response.error) { var perms = response.data[0]; if (!perms.read_friendlists) { FB.login(function(response) { //on reconnecte l'user avec notre nouvelle permission //callback }, {scope: "read_friendlists"}); } else { //l'user a déjà accepté les permissions } } });
Notons que nous avons seulement besoin de demander les nouvelles permissions, les anciennes déjà demandées lors de la connexion par exemple, sont conservées.
Ici nous avons demandé les permissions pour lire la liste des amis.
Désormais voyons dans le prochain bout de code comment la récupérer.
Récupérer la liste des amis
FB.api("me/friends", { fields: "id, first_name, last_name" }, function( response ){ //ici on récupére seulement l'id, et on sépare le prénom et le nom $.each(response.data, function(key, val){ //traitement de la liste }); });
Vous l’aurez compris,dans la boucle vous aurait accès aux informations des amis de l’user où val.id sera l’id, val.first_name sera le prénom…
Récupérer les photos
Pour les photos c’est assez simple, on se base sur le même principe que pour les amis, à la différence que vous allez avoir besoin des permissions « user_photos »
Nous allons dans un premier temps parcourir les albums de l’utilisateur et ensuite les photos si besoin.
FB.api("/me/albums", { fields: "id, cover_photo, name" }, function (response) { if (response && !response.error){ //ici on récupére seulement la cover et le nom de l'album $.each(response.data, function(key, val){ //traitement des albums }); } });
Pensez bien à demander seulement les champs qui vous intéressent afin d’alléger la réponse.
On fois l’id d’un album en poche, nous pouvons le parcourir pour voir ses photos
FB.api("/" + ID_ALBUM + "/photos?limit=6", function (response) { if (response && !response.error){ //le limit permet de créer une pagination de 6 photos $.each(response.data, function(key, val){ //traitement des photos }); } });
Notons qu’il est possible de récupérer directement les albums avec ses photos, néanmoins, je préfére le découper en deux méthodes afin de loader le contenu de l’album seulement à la demande de l’utilisateur.
De plus si vous demander l’album et son contenu, la data retournée risque d’être conséquente. Toute fois, si vous voulez tout récupérer, il vous suffit d’ajout « photos » dans les fields.
FB.api("/me/albums", { fields: "id, cover_photo, name, photos" }, function (response) { //do stuff });
Poster et tagger une photo
Notons qu’il est possible de tagger une photo seulement une fois cette dernière postée sur facebook, nous allons donc faire le taggage de la photo dans le callback du post.
FB.api("/photos", "POST", { message: 'MESSAGE QUI ACCOMPAGE LA PHOTO', url: "MON IMAGE EN ABSOLUE" }, function(response){ //callback post if (response && !response.error) { //response.id est le l'id de la photo retournée lors du post de cette dernière FB.api("/" + response.id + "/tags", "POST", { 'tag_uid' : ID_USER },function (response) { //callback tag }); } });
Ici ID_USER, peut être soit l’id de l’user ou bien l’id d’un ami.
Cette méthode va également créer automatiquement un album au nom de votre application (si il n’existe pas) dans les albums de l’user.
Les permissions sont bien entendu « user_photos » mais si vous souhaitez publier cette photo sur le mur de l’user, vous devez également avoir les les permissions « publish_actions ».
Conclusion
Sincèrement avec ces quelques snippets, vous pouvez déjà répondre à la grande majorité de vos besoins. Pour le reste, je vous renvoie vers la doc 😉