Récupérer le fil d'actualité d'une page Facebook facilement
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
[php]
$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);
[/php]
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 :
[html]
<!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> [/html]
Voilà j’espère que ce petit tuto vous aidera
Démo
2016-05-26 08:05:01