Fan-gating is the practice of acquiring more fans for a Facebook page by requiring Facebook users to "like" the page in order to access specific content associated with the page.
- Wikipedia

Il vous est surement déjà arrivé d'accéder à une application Facebook (concours, jeu, téléchargement d'un livre-blanc, etc.) et de tomber sur une phrase du type "Likez notre page pour accéder au concours". C'est une technique souvent utilisée par les marques (et autres) pour augmenter le nombre de fans sur leur page Facebook : le fan-gating.

Le principe est simple : on vérifie dans les informations de l'utilisateur s'il aime une certaine page Facebook. Si ce n'est pas le cas, on lui affiche un message l'invitant à le faire. Sinon, il peut accéder au contenu de l'application.

Il y a pléthore de tutoriels sur Internet expliquant comme mettre cela en place dans une application Facebook. C'est assez simple. Par contre, si on veut mettre en place ce concept sur un site web, extérieur à Facebook, c'est une autre paire de manches.

Dans un premier temps, nous allons fouiller un peu dans l'API mise à disposition par Facebook pour dénicher des fonctions pouvant répondre à nos besoins.

L'API de Facebook

Facebook nous permet d'accéder à quelques unes de ses fonctionnalités grâce à une interface API accessible à l'adresse suivante : https://developers.facebook.com/docs/

Pour mettre en place mon fan-gate, ce que je veux savoir, c'est si l'utilisateur qui se trouve sur mon site aime ma page Facebook. En fouillant un peu, l'API Facebook me propose la fonction /{user-id}/likes :

The Facebook Pages that this person has 'liked'.

Super! Mais pour pouvoir accéder à cette donnée, il faut que mon visiteur soit connecté à Facebook au moment où il est sur le site et qu'il ai donné les droits d'accès à sa donnée user_likes (ndlr : liste des likes de l'utilisateur).

Mettre en place le fan-gate

Facebook permet d'accéder à cette API via différents langages de programmation. Je vais utiliser le SDK Javascript.

Dans l'idée : je vais afficher de base le message qui invite mon visiteur à liker ma page pour afficher le contenu masqué (fan-gate). Après le chargement de la page, je vérifie directement en Javascript (via les étapes suivantes) s'il est fan de ma page. S'il l'est, j'affiche mon contenu et masque le message fan-gate.

1) Créer une app Facebook

Pour pouvoir dialoguer avec l'API, il est nécessaire de créer une application Facebook et d'utiliser son App ID pour s'identifier auprès du service.

Pour cela, rendez-vous à l'adresse suivante : https://developers.facebook.com/. Cliquez sur "Apps" dans le menu du haut et "Create a New App". Une fois le formulaire rempli et validé, vous accédez à la page de votre application et à votre App ID.

Maintenant que j'ai mon App ID, je vais dans la documentation du SDK Javascript et je commence mon script :

<script> window.fbAsyncInit = function() { FB.init({ appId : '{your-app-id}', xfbml : true, version : 'v2.0' }); }; (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 = "//connect.facebook.net/fr_FR/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script>

Je remplace {your-app-id} par mon App ID. FB.init permet d'initialiser le SDK Facebook avec mes données. Tout le code qui arrive dans les chapitres suivants sera placé après cette fonction.

2) Vérifier que notre visiteur soit connecté à Facebook et qu'il ai donné les droits d'accès à sa donnée user_likes

Dans un premier temps, je vais vérifier que mon visiteur soit bien connecté à Facebook (sinon, ça ne sert à rien d'aller plus loin). Pour cela, je vais regarder la fonction FB.getLoginStatus :

FB.getLoginStatus allows you to determine if a user is logged in to Facebook and has authenticated your app.

Génial! Cette fonction me permet donc de vérifier à la fois que mon visiteur soit bien connecté à Facebook et qu'il ai accepté de révéler certaines de ses données à mon application (dont user_likes qui nous intéresse).

Je rajoute donc le code suivant à mon script :

FB.getLoginStatus(updateStatusCallback, false);

Techniquement, cette fonction va demander à mon visiteur de se connecter s'il ne l'est pas et d'autoriser mon app s'il ne l'a pas fait.

Je crée ensuite la fonction updateStatusCallback qui sera appelée lorsque FB.getLoginStatus retournera une valeur :

function updateStatusCallback(response) { if (response.status === 'connected') { checkIfUserIsFan(); } else if (response.status === 'not_authorized') { console.log('user is logged in and hasn\'t authenticated the app'); } else { console.log('user isn\'t logged in'); } }

En analysant la variable response retournée par FB.getLoginStatus, je peux donc vérifier (et agir en fonction) si :

  • mon visiteur est connecté et a autorisé mon app,
  • mon visiteur est connecté mais n'a pas autorisé mon app,
  • mon visiteur n'est pas connecté.

Ici, si mon visiteur est connecté et a autorisé mon app, je peux aller vérifier si il aime ou pas ma page Facebook. Pour cela, dans la fonction ci-dessus, j'appelle la fonction checkIfUserIsFan dont le code est le suivant :

FB.api( { method: "pages.isFan", page_id: {your-page-id}, }, function(response) { if(response) {} // User is fan => show my content return response; } );

Dans cette fonction, j'appelle la méthode pages.isFan de l'API Facebook avec mon identifiant de page page_id comme paramètre (comment connaitre l'id de sa page Facebook?). S'il y a une réponse, ça signifie que mon visiteur est bien fan de ma page et je peux lui affiche mon contenu.

Aller plus loin

Voilà, j'ai mis en place plutôt facilement un fan-gate sur mon site web.

Pour aller plus loin et améliorer ce système, je peux, par exemple, afficher une like box directement dans mon message fan-gate et appeler une fonction Javascript dès que mon visiteur à cliqué sur le bouton "J'aime" grâce à FB.Event.subscribe('edge.create', urlLikeCallback);.