Récupérer le fil d'actualité d'une page Facebook facilement
Je ne publierai plus rien sur ce blog. Un nouveau blog existe maintenant. Il se nomme Hardly Smart.
Vous pourrez y retrouver des astuces plus larges sur l'informatique ainsi que mes anciens billets de blog.
Je vous souhaite une bonne lecture sur Hardly Smart.
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) :
Puis sélectionnez Site web (www) :
Dans le champ, rentrer le nom de votre application et cliquez sur Create New Facebook App ID :
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) :
Une fois l'application créée, cliquez sur le bouton Skip Quick Start en haut à droite :
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 :
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 :
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>© 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
Demo
2016-05-26 08:05:01
Source
http://lemon-cake.fr/?p=813
Articles liés
Les commentaires ont été désactivés.
13 commentaires
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
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 ?
Bizarre ça. C'est quoi la page facebook que tu veux afficher ? Je voudrai tester
Camping-de-la-Plage--329341703763660
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.
Yes !!!!!!!!!!!!!!!!
OK, je vais chercher pour le nom de la page. Merci beaucoup ! Des semaines que je tourne en rond.
Bonjour,
Merci pour ce super tuto, court, concis et efficace...
Existe-t-il une possibilité pour lire les events d'une page comme pour le fil d'actualités, because, là je sèche totalement.
Merci d'avance pour un feedback
Anathan
Salut Anathan,
Je pense que FB a prévu le coup, mais te dire comment faire je ne pourrai pas car je n'ai essayé de le faire. Mais je pense qu'en allant sur la documentation Facebook Graph, tu devrais trouver : https://developers.facebook.com/
Hello merci pour le tuto, du coup le premier file_get_contents me retourne 404 bad Request, une idée ?
Salut Ben, une 404 ou une 400 ? Car une Bad Request c'est une 400.
Et pour répondre non je ne sais pas. Vérifie tes paramètres que tu envoies. Je ne vois que ça
Oups 400 c'est bien cela .. la réponse contient ['error']['message']
(#10) Object does not exist, cannot be loaded due to missing reviewable feature 'Page Public Content Access', or does not support this operation. To use 'Page Public Content Access', your use of this endpoint must be reviewed and approved by Facebook. To submit this 'Page Public Content Access' feature for review please read our documentation on reviewable features
Et bah voilà, tu as la réponse à tes questions. C'est écrit en clair dans la réponse
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...