Récupérer le fil d'actualité d'une page Facebook facilement

Récupérer le fil d'actualité d'une page Facebook facilement

Tags : AJAX, API, PHP, Tutoriaux, jQuery
Catégorie : Lemon Cake
Mise en ligne : 26 Mai 2016 à 12:30

Si vous connaissez l'API de Facebook, vous savez à quel point celle-ci est très complexe à utiliser. Aujourd'hui je vous propose de récupérer le contenu des actualités qui ont été postés sur une page Facebook (dont vous êtes ou non le propriétaire).

Le but est de ce tuto est d'avoir, sans trop de lignes de code et surtout sans que cela soit indigeste à comprendre, la possibilité d'afficher sur un site le contenu d'une page Facebook avec le design de son site et pas celui de Facebook.

Le tuto est fait actuellement avec la version 2.6 de l'API Facebook. Sauf s'ils changent leur système, il devrait toujours être possible de le faire dans les versions futures.

Création d'une application Facebook

Nous allons avoir besoin de créer une application Facebook uniquement pour avoir un app_id et un secret.

Commencez par vous rendre sur le site : https://developers.facebook.com/

Si cela n'est pas fait, loggez vous et cliquez sur le bouton Ajouter une app en haut à droite (au niveau de votre image de profile) :

facebook_dev

Puis sélectionnez Site web (www) :

application_site_web_www

Dans le champ, rentrer le nom de votre application  et cliquez sur Create New Facebook App ID :

create_app

Dans la popup, laissez cocher non à la question Est-ce la version de test d’une autre app ?, saisissez votre adresse email qui sera utilisée en cas de soucis avec votre application et pour terminer sélectionnez la catégorie de votre application (perso je préfère mettre la catégorie de la page Facebook dont je veux avoir le contenu) :

popup_create_app

Une fois l'application créée, cliquez sur le bouton Skip Quick Start en haut à droite :

skip_quick_start

Là vous devriez arriver sur votre Tableau de bord et vous devriez voir votre app_id et votre secret. Notez bien ces informations, elles nous servirons pour la suite :

credentials

Et pour terminer sur le site de Facebook, rendez-vous dans Examen des apps et passez Votre app est en développement et donc indisponible au public sur oui et confirmer dans la popup :

public_app

Passons au code PHP

La partie PHP va être très rapide


$app_id = 'aaa'; // Remplacez par votre app_id $secret = 'bbb'; // Remplacez par votre secret $pageName = 'LemonCake' // Nom de la page Facebook que vous souhaitez récupérer. Ce nom est celui dans l'URL de la page et non le nom réel. Ex: https://www.facebook.com/LemonCake/ $token = $app_id . '|' . $secret; // On prépare le token en séparant $app_id et $secret par un | // Via cette URL on va récupérer l'identifiant unique de la page pour récupérer les données $page = file_get_contents('https://graph.facebook.com/' . $pageName . '?fields=fan_count,talking_about_count,name&access_token='.$token); $page = json_decode($page); // Récupération de l'identifiant unique de la page $pageID = $page->id; // Récupération du flux de la page // Dans cette URL on peut voir que je demande de récupérer : // - L'image du poste // - Le message // - La date de création // - Les partages // - Les likes et commentaires dont vous pouvez modifier la limite qui là est de 1 $response = file_get_contents("https://graph.facebook.com/v2.6/$pageID/feed?fields=picture,message,story,created_time,shares,likes.limit(1).summary(true),comments.limit(1).summary(true)&access_token=".$token); $response = json_decode($response);

Si vous souhaitez visualiser les données je vous conseil de faire un var_dump de $response.

Afin de rendre ce tuto assez complet, je vous donne le code d'une page qui vous affichera le contenu de 2 pages Facebook, celle de Lemon Cake et celle de Golden Moustache. J'ai rajouté une partie javascript pour charger le reste de la page via une requête AJAX :


<!DOCTYPE HTML> <html lang="fr"> <head> <title>Facebook Pages</title> <link title="defaut" type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" media="screen"> <link title="defaut" type="text/css" rel="stylesheet" href="http://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css" media="screen"> <META CHARSET="UTF-8"> <META HTTP-EQUIV="CONTENT-LANGUAGE" CONTENT="FR"> <META NAME="VIEWPORT" CONTENT="WIDTH=DEVICE-WIDTH, INITIAL-SCALE=1.0"> </head> <body> <div class="container"> <div class="header clearfix"> <h3 class="text-muted">Facebook Pages</h3> </div> <div class="jumbotron text-center"> <h1>Facebook Pages</h1> <p class="lead">Cliquez sur l'un des boutons suivant pour afficher le fil d'actualité de la page Facebook.</p> <p> <a class="btn btn-lg btn-success" href="?pageName=LemonCake" role="button">Lemon Cake</a> <a class="btn btn-lg btn-success" href="?pageName=GoldenMoustache" role="button">Golden Moustache</a> </p> </div> <?php if(isset($_GET['pageName'])) { ?> <div class="actus"> <div class="row"> <?php $app_id = 'aaa'; $secret = 'bbb'; $token = $app_id . '|' . $secret; $page = file_get_contents('https://graph.facebook.com/' . $_GET['pageName'] . '?fields=fan_count,talking_about_count,name&access_token='.$token); $page = json_decode($page); $pageID = $page->id; $response = file_get_contents("https://graph.facebook.com/v2.6/$pageID/feed?fields=picture,message,story,created_time,shares,likes.limit(1).summary(true),comments.limit(1).summary(true)&access_token=".$token); $response = json_decode($response); $i = 0; foreach($response->data as $data) { ?> <div class="col-sm-4 text-center"> <img class="img-circle" src="<?php echo isset($data->picture) ? $data->picture : 'http://placehold.it/140x140' ?>" width="140" height="140"> <p><small><?php echo date('d/m/Y H:i', strtotime($data->created_time)) ?></small></p> <p><?php echo isset($data->message) ? $data->message : '' ?></p> <p> <button type="button" class="btn btn-primary btn-xs"><?php echo (isset($data->likes->summary->total_count)) ? $data->likes->summary->total_count : 0 ?> j'aime(s)</button> <button type="button" class="btn btn-success btn-xs"><?php echo (isset($data->shares->count)) ? $data->shares->count : 0 ?> partage(s)</button> <button type="button" class="btn btn-info btn-xs" style="margin-top: 5px"><?php echo (isset($data->comments->summary->total_count)) ? $data->comments->summary->total_count : 0 ?> commenaite(s)</button> </p> </div> <?php $i++; if($i === 3) { ?> </div> <div class="row"> <?php $i = 0; } } ?> </div> </div> <p class="text-center loadMoreActusContainer"> <button data-href="<?php echo $response->paging->next ?>" type="button" class="btn btn-primary btn-lg loadMoreActus">Charger plus d'actualités</button> </p> <?php } ?> <footer class="footer"> <p>&copy; 2016 Facebook Pages.</p> </footer> </div> <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script> <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script type="text/javascript" src="http://momentjs.com/downloads/moment-with-locales.js"></script> <script type="text/javascript"> jQuery(function($){ $(document).on('click', '.loadMoreActus', function(e) { e.preventDefault(); e.stopPropagation(); var that = this; href = $(that).attr('data-href'); console.log($(that).attr('data-href')); $(that).prop('disabled', true); $.ajax({ url: href, type: 'get', success: function(response) { var $row = $("<div/>").addClass('row'); var i = 0; $.each(response.data, function(index, data) { try { $row.append( $("<div/>").addClass('col-sm-4 text-center').append( $("<img/>").addClass('img-circle').attr('src', (data.picture !== undefined) ? data.picture : 'http://placehold.it/140x140').width(140).height(140), $("<p/>").html( $("<small/>").text(moment(data.created_time).format('DD/MM/YYYY HH:mm')) ), $("<p/>").text( (data.message !== undefined) ? data.message : '' ), $("<p/>").append( $("<button/>").attr('type', 'button').addClass('btn btn-primary btn-xs').append( (data.likes !== undefined) ? data.likes.summary.total_count : 0, " j'aime(s)" ), $("<button/>").attr('type', 'button').addClass('btn btn-success btn-xs').css('margin-left', '5px').append( (data.shares !== undefined) ? data.shares.count : 0, " partage(s)" ), $("<button/>").attr('type', 'button').addClass('btn btn-info btn-xs').append( (data.comments !== undefined) ? data.comments.summary.total_count : 0, " commenaite(s)" ) ) ) ); } catch(Err) { console.log(Err); console.log(data); } i++; if(i === 3) { $(".actus").append($row); $row = $("<div/>").addClass('row'); i = 0; } }); $(".actus").append($row); if(response.data.length === 25) { $(".loadMoreActusContainer").html( $("<button/>").attr('data-href', response.paging.next).attr('type', 'button').addClass('btn btn-primary btn-lg loadMoreActus').text("Charger plus d'actualités") ); } else { $(".loadMoreActusContainer").html(''); } }, error: function(response) { alert('ERROR LOAD MORE ACTUS'); } }); }); }); </script> </body> </html>

Voilà j'espère que ce petit tuto vous aidera

<Laisser un commentaire/>

* Champs obligatoire

Sandrine

Posté le 24 Avril 2017 à 14:35

Yes !!!!!!!!!!!!!!!!
OK, je vais chercher pour le nom de la page. Merci beaucoup ! Des semaines que je tourne en rond.

BaBeuloula

Posté le 24 Avril 2017 à 14:33

Salut, désolé du retard, dans ton cas, tu ne dois mettre que ton ID 329341703763660 comme nom de page. Car tu n'as pas encore changer le nom exacte de la page.

C'est pour cela que tu as le nom de ta page suivi de chiffres. Pour modifier cela il faut aller dans les paramètres mais je ne sais pas où par contre.

Sandrine

Posté le 24 Avril 2017 à 13:27

Camping-de-la-Plage--329341703763660

BaBeuloula

Posté le 24 Avril 2017 à 13:26

Bizarre ça. C'est quoi la page facebook que tu veux afficher ? Je voudrai tester

Sandrine

Posté le 24 Avril 2017 à 13:24

Je viens de me rendre compte que ça marche pour toutes les pages Facebook qui n'ont pas de tiret dans le nom... Une idée de comment contourner le problème ?

BaBeuloula

Posté le 24 Avril 2017 à 13:06

Salut Sandrine,

Tu as bien généré les identifiants sur la console ?
Et est-ce que tu es sûr du nom de la page ? Car si le nom n'est pas le bon, c'est normal d'avoir NULL

Sandrine

Posté le 24 Avril 2017 à 13:02

Bonjour. Enfin un tutoriel clair... Si je copie le script tel quel avec les boutons Lemon Cake et Golden Moustache, ça marche très bien... Par contre, si je mets une autre page, je n'ai plus rien ($response => NULL)...

Il y a autre chose à faire du côté Facebook Developer ?

Merci d'avance de votre aide...