Comment faire un compteur en direct de likes sur une page Facebook

Récemment, j'ai eu l'envie de faire un compteur Facebook en direct pour ma page Facebook.

L'idée est de faire un compteur qui ressemble un peu à un compteur de type Smiirl. Par contre au lieu d'afficher le résultat sur un objet connecté, on fait apparaître le compte sur la page d'un site web qui est par la suite lancée en plein écran sur une tablette.

Facebook a pas mal renforcé ses politiques de sécurité, du coup j'ai un peu galéré. C'était assez simple de récupérer un nombre de likes d'une page il y a quelques années mais ça l'est désormais beaucoup moins. J'ai cependant réussi à trouver une technique qui a ses limites mais qui permet d'avoir un compteur qui se met à jour toutes les 20 secondes ce qui est assez sympa pour promouvoir son activité!

Prérequis:

  • avoir un hébergement web pour héberger la page que l'on va créer
  • avoir un compte Facebook qui administre la page pour laquelle on va récupérer le nombre de likes

En effet une des limitations de ce système est que l'on va uniquement pouvoir récupérer le nombre de likes d'une page que l'on administre. Si l'on veut le faire pour une page pour laquelle on n'est pas administrateur, il va falloir passer par le processus de App Review de Facebook qui est un peu long et fastidieux et qui est parfois rejeté.

1ère étape: Création d'une app Facebook

La 1ère étape consiste à créer une app Facebook, pour ce faire il suffit d'aller sur: https://developers.facebook.com/ et de faire créer une app. Il faut remplir quelques champs qui ont peu d'importance dans notre cas. Une fois l'app crée, il est important de repérer l'appId, c'est ce qui va nous servir dans le bout de code.

2ème étape: Création de la page de compteur

Pour ce faire, allez sur votre site internet via FTP et créez une nouvelle page web. Vous pouvez copier/coller le code suivant, il faut juste mettre à jour l'appId que vous avez récupérer en étape 1:

 

<!DOCTYPE html>
<html>
<head>
<title>Facebook Fanpage counter</title>
<meta charset="UTF-8">
<style>
.carac{
padding: 8px;
background:white;
margin-left: 4px;
border: 1px solid black;
font-size: 50px;
color: #1877F2;
border-radius: 15px 15px 15px;
}

body{
color: white;
}
p{
margin: 10px}
</style>
</head>

<body style="text-align: center; background:#AAC9FF; font-size: 20px;font-family: Arial;">

<script>
// This is called with the results from from FB.getLoginStatus().
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
// The response object is returned with a status field that lets the
// app know the current login status of the person.
// Full docs on the response object can be found in the documentation
// for FB.getLoginStatus().
if (response.status === 'connected') {
// Logged into your app and Facebook.
displayFanCount();
} else {
// The person is not logged into your app or we are unable to tell.
document.getElementById('status').innerHTML = 'Please log ' +
'into this app.';
}
}

// This function is called when someone finishes with the Login
// Button. See the onlogin handler attached to it in the sample
// code below.
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}

window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID',
cookie : true, // enable cookies to allow the server to access
// the session
xfbml : true, // parse social plugins on this page
version : 'v4.0' // The Graph API version to use for the call
});

FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});

};

// Load the SDK asynchronously
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/fr_FR/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

// Function that is calling the graphApi from Facebook to get the fan count
function displayFanCount() {
document.getElementById('loginButton').style.display="none";
FB.api('/me?fields=id,name,accounts{fan_count}', function(response) {
console.log('Fetching fan count');
var fan_count = response.accounts.data[0].fan_count ;
var strfan_count=fan_count.toString();
var caracs = "";
for (let i = 0; i < strfan_count.length; i++) {
caracs +='<span class="carac">'+strfan_count.charAt(i) +'</span>';
}
document.getElementById('fanCount').innerHTML = caracs;
});

//Relaunching the function every 20 seconds : Number of calls is limited by Facebook at 200 times per hour
setTimeout(displayFanCount,20000);
}
</script>

<!--
Below we include the Login Button social plugin. This button uses
the JavaScript SDK to present a graphical Login button that triggers
the FB.login() function when clicked.
-->
<div id="loginButton">
<fb:login-button scope="manage_pages,pages_show_list" onlogin="checkLoginState();">
</fb:login-button>
</div>

<div id="status">
</div>

<p style="margin-left: 40px;">Vous êtes</p>

<p style="margin:0px;padding:15px;background:#1877F2;color: white; width: 100%" >
<span id="fanCount">
</span>

</p>

<p style="margin-left: 40px;">à nous suivre sur Facebook, <b>merci!</b></p>

<img style="margin-left: 40px;" src="capture.jpg">

<div clear=both>

<br>

</body>
</html>

Petites explications sur le fonctionnement du code

Alors quelques explications sur ce morceau de code:

  • Au début on a un peu de css pour rendre le tout pas trop moche
  • On a par la suite pas mal de code javascript. L'idée est de tester si l'utilisateur est logué ou non à l'application. Si ce n'est pas le cas, on va afficher un bouton de login.
  • On clique sur le bouton login et on doit donc s'authentifier via notre compte Facebook. Il est important que ce compte Facebook ait les droits d'administrateur sur la page dont on veut récupérer les likes.
  • Une fois l'utilisateur connecté, on appelle la fonction displayFanCount()
  • La fonction displayFanCount() va:
    • faire disparaître le bouton de login qui n'est plus nécessaire
    • faire un appel vers le graphApi de Facebook pour récupérer le nombre de likes
    • Afficher le résultat dans un span qui a l'id "fanCount" et qui est affiché plus bas
    • et la fonction va automatiquement se relancer toutes les 20 secondes pour faire la mise à jour

Facebook limite le nombre d'appels vers son API à 200 par heure. Avec un appel toutes les 20 secondes on arrive à 180 appels par heure du coup on est bon.

Voilà j'espère que ça rendra service à certains! Ça permet d'avoir un compteur de likes dans son magasin ou son restaurant ou autre ce qui peut inciter les visiteurs à liker plus facilement sa page et surtout ça ne coûte pas 300€ :-). Après je suis certain que avec un Raspberry et un peu de bidouille on pourrait arriver via ce code à quelque chose de sympa!

 

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> 


*