Comment cacher/afficher du contenu réservé à vos fans Facebook?

UPDATE: Attention cet article date de 2011. Facebook a beaucoup changé depuis la publication de cet article, veuillez lire le nouveau post Tutoriel 2012: Intégrer un Onglet iFrame sur votre Fan Page Facebook qui est une mise à jour de celui-ci. Vous y retrouverez notamment un fichier BONUS à télécharger, il comporte un modèle d’onglet en PHP avec des conditions pour faire varier le contenu selon le statut de la personne qui la regarde (fan ou non fan).


Comme promis à la fin de mon article qui vous expliquait « comment créer un nouvel onglet Facebook sur votre Page Fan » que je vous invite à lire si vous l’avez raté ;-). Je vais passer à l’étape suivante et vous indiquerai comment cacher et afficher du contenu spécial, ou encore, comment créer des pages réservées seulement aux fans

contenu fans facebook onglet

Voici les points que nous développerons ici:
1) Pourquoi cacher du contenu aux « non fans » et pourquoi créer des pages réservées aux fans?
2) Qu’est-ce que sont les fonctions signed_request et $data ?
3) Créer la condition de visibilité pour cacher le contenu aux non fans et l’afficher aux fans.

1) Pourquoi créer des pages avec du contenu réservé aux fans?

Le concept est simple: "tu deviens Fan de ma page et tu auras accès à du contenu en avant première, du contenu exclusif, des offres spéciales ou encore des codes de réduction"… Quelque soit l’argument, le but ici est de convaincre l’utilisateur de cliquer sur « J’aime » pour obtenir plus de fans

2) Qu’est-ce que sont les fonctions signed_request et $data ??

Nous avons vu précédemment comment inclure une page HTML ou PHP dans un nouvel onglet IFRAME de votre Page Fan. Lorsque Facebook charge votre page, il communique des données codées via POST une variable appelée signed_request. Elle est utilisée pour partager des informations entre Facebook et des applications (comme les onglets de votre Page Fan par exemple).

Essayons de comprendre et de décoder cette variable afin d’obtenir un objet JSON avec toutes les données dont nous avons besoin. (Pour ceux qui ne savent pas, le JSON ou « JavaScript Object Notation » est un format de données qui permet l’échange entre le navigateur et le serveur. Le rendu est semblable à un tableau associatif en JavaScript.)

Voici la fonction que Facebook nous met à disposition pour décoder les données:

function parse_signed_request($signed_request, $secret) {
  list($encoded_sig, $payload) = explode(‘.’, $signed_request, 2);

  // decode the data
  $sig = base64_url_decode($encoded_sig);
  $data = json_decode(base64_url_decode($payload), true);

  if (strtoupper($data[‘algorithm’]) !== ‘HMAC-SHA256’) {
    error_log(‘Unknown algorithm. Expected HMAC-SHA256’);
    return null;
  }

  // check sig
  $expected_sig = hash_hmac(‘sha256’, $payload, $secret, $raw = true);
  if ($sig !== $expected_sig) {
    error_log(‘Bad Signed JSON signature!’);
    return null;
  }

  return $data;
}

function base64_url_decode($input) {
  return base64_decode(strtr($input, ‘-_’, ‘+/’));
}

Décoder les données devient plus simple:

$data = parse_signed_request($_REQUEST[‘signed_request’], ‘INSEREZ ICI VOTRE APP SECRET’);

Pour que cela soit clair pour tout le monde, essayons de récapituler sous forme de tableau ce que génère la fontion $data:

array
(
    [algorithm] => HMAC-SHA256
    [issued_at] => 1234567890
    [page] => Array
        (
            [id] => 12345678910 // l’ID de la page sur laquelle est installée l’Onglet
            [liked] => 1 // Boolean qui nous indique si l’utilisateur est fan de la Page
            [admin] => 1// Boolean qui nous indique si l’utilisateur est administrateur de la Page
        )
    [user] => Array
        (
            [country] => fr
            [locale] => fr_FR // La langue de l’utilisateur
            [age] => Array
            (
                [min] => 19
            )
        )
)

Comme vous pouvez le voir dans les commentaires en jaune ci-dessus, le fait que l’utilisateur soit fan n’est pas la seule information que l’on récupère… Nous pourrons créer des conditions de visibilité selon:

  • l’Onglet sur lequel se trouve la personne
  • le statut de l’utilisateur (administrateur ou simple visiteur,
  • la langue utilisée sur Facebook

3) Créer la condition de visibilité pour afficher un contenu aux non fans et un autre aux fans.

Dans cet exemple, nous allons créé un onglet « Menu du Jour » sur la page Fan du restaurant d’un golf de la région parisienne que je vous recommande si vous aimez manger, vous détendre et jouer au golf 😉 Bref, sur cet onglet, les fans et seulement les fans pourront voir ce qu’il y a dans le menu du jour.

Les personnes qui attériront sur l’onglet verront l’image du menu floutée alors que les fans visualiseront directement le menu mis à jour quotidiennement que j’afficherai grâce à un iframe.

Voici comment écrire votre condition:

if(!$data[‘page’][‘liked’]){
    // contenu pour les NON FAN
}else{
    // contenu pour les FANS
}

Passons à la pratique:
Vous pouvez voir l’onglet de l’exemple ici et voici le code de ma page en php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu du Jour Fan Page</title>
<meta name="ROBOTS" content="NOINDEX,NOFOLLOW">
</head>

<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/fr_FR/all.js"></script>
<script>
FB.init({
appId : ‘VOTRE APP ID’,
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>
<?php
function parse_signed_request($signed_request, $secret) {
list($encoded_sig, $payload) = explode(‘.’, $signed_request, 2);

// decode the data
$sig = base64_url_decode($encoded_sig);
$data = json_decode(base64_url_decode($payload), true);

if (strtoupper($data[‘algorithm’]) !== ‘HMAC-SHA256’ ) {
error_log(‘Unknown algorithm. Expected HMAC-SHA256’ );
return null;
}

// check sig
$expected_sig = hash_hmac(‘sha256’ , $payload, $secret, $raw = true);
if ($sig !== $expected_sig) {
error_log(‘Bad Signed JSON signature!’);
return null;
}

return $data;
}

function base64_url_decode($input) {
return base64_decode(strtr($input, ‘-_’, ‘+/’));
}

$data = parse_signed_request($_REQUEST[‘signed_request’], ‘VOTRE CLEF SECRETE‘);

?>

<?php
if(!$data[‘page’][‘liked’]){
EXEMPLE DE TEXTE // contenu pour les NON FAN
}else{
EXEMPLE DE TEXTE // contenu pour les FANS
}
?>

</body>
</html>

Voici le résultat obtenu dans ce cas là:

J’espère avoir été assez clair pour ce tutoriel Facebook plus technique que marketing mais utile si vous utilisez ce canal!

Rating: 5.0/5. From 1 vote.
Please wait...
Voting is currently disabled, data maintenance in progress.
32 Comments
  • […] loupez pas l’article « comment cacher/afficher du contenu spécial ou des pages réservées seulement aux fans! […]

  • Michelle

    17 juin 2011 at 22 h 36 min Répondre

    Merci pour cet article très détaillé! Cela faisait longtemps que je cherchais un article pour reserver du contenu exclusivement à mes fans! Merci

  • Transiternet

    19 juin 2011 at 19 h 19 min Répondre

    Je recommanderai ton article à nos stagiaires qui ont du mal avec les nouveaux onglets de Facebook 😉

  • Miki

    22 juin 2011 at 18 h 29 min Répondre

    Merci pour cet article, je me suis lancé ce matin mais j’ai un soucis… Où puis-je trouver ma CLEF SECRETE s’il vous plait? Merci!

  • Bezee

    23 juin 2011 at 12 h 27 min Répondre

    Dans le récapitulatif de l’application

  • Léonard

    23 juin 2011 at 14 h 46 min Répondre

    Merci Bezee pour ta participation.

    As-tu trouvé Miki?
    tu dois aller sur http://developers.facebook.com/ puis cliquer en haut sur « Mes applications » puis sur le Nom de ton application à droite et tu trouveras ici ta « Clé secrète »

  • Leslie

    29 juin 2011 at 12 h 11 min Répondre

    Bonjour !
    Tout le monde a l’air ravi de tout ça mais moi je ne comprends rien ALORS que ça a l’air hyper clair ! Pk ? Pck peut etre je suis complètement et totalement NOVICE dans ce domaine avec des codes et un langage que je pige pas!MDRR
    Ca fait 1h que je clike partout et ke je jongle entre tous vos articles et je n’avance pas… snif snif snif
    Je ne pensais pas que c’était aussi « complex » de faire du contenu réservé…
    Je suis triste !!! Je vais continué de « galerer » avec mes 30 fans acquis depuis 1 mois a défault de mes 204 « curieux » LOL

  • Leslie

    29 juin 2011 at 12 h 12 min Répondre

    Roooo les fautes !!!
    Désolé

  • Léonard

    29 juin 2011 at 22 h 00 min Répondre

    Bonjour Leslie, où est-ce que vous bloquez? Votre page est-elle déjà présente sur un onglet, si oui pouvez-vous m’indiquer l’adresse? En quel langage est écrit votre page?

  • Leslie

    29 juin 2011 at 23 h 53 min Répondre

    Merci Léonard pour votre rapidité. Je vous ai envoyé un « contact » un peu plus explicite…

    • Léonard

      30 juin 2011 at 0 h 34 min Répondre

      Bonsoir Leslie, je réponds directement ici pour le partager avec tous les lecteurs.

      Pour récapituler, vous avez des Pages Facebook mais elles ne comportent pas d’onglet personnalisé.

      VOici comment vous devez procéder:
      – créer une page en php avec du contenu (préparez du contenu pour vos fans et du contenu pour les non fans et jouez avec la condition que vous trouverez ci-dessus)
      – intégrer votre page à Facebook ajouter l’onglet à votre page (voir l’article précédent)

      Pour essayer prenez mon exemple ci-dessus en personnalisant VOTRE APP ID et votre clef secrète. (voir commentaire ci-dessus)

  • Eric

    19 juillet 2011 at 4 h 09 min Répondre

    Bonsoir

    Merci pour ce tuto qui m’aide très bien dans mes premiers pas en tant que gestionnaire d’une page facebook ! J’aurai juste une petite question concernant le floutage de l’image pour la page du restaurant golf.

    Est ce que ce sont deux images différentes (une à destination des fans/non fans) ou une seule image qui subirait un éventuel traitement par le code ?

    Je suis débutant et ne connais pas encore tous les rudiments de la programmation ! Serait il possible que quelqu’un m’explique la démarche à suivre pour arriver à ce genre de résultat ?

    D’avance merci !

    • Léonard

      19 juillet 2011 at 8 h 35 min Répondre

      Bonjour Eric,
      Voici ce que tu retrouves dans mon exemple:
      – sur la page pour les non fans c’est une image fixe avec l’image du menu floutée,
      – sur la page pour les fans c’est un iframe qui reprend le menu du jour mais cela aurait très bien pu être le code source du menu.

      Si ma réponse n’est pas suffisante, n’hésite pas à me répondre 😉

  • Laura

    19 juillet 2011 at 17 h 42 min Répondre

    Bonjour,

    Merci beaucoup pour toutes ces explications ! Le tutoriel pour la création d’un onglet sur la page Fan m’a beaucoup servi. Par contre, je bloque avec celui-là.

    J’ai créé un onglet sur ma page Fan qui me sert de page d’accueil. J’aimerais que cette page d’accueil soit le seul onglet visible pour les non-fans, et que le reste des onglets (Mur, Photos …) soit réservé aux fans. Malheureusement, ça ne marche pas du tout comme je veux !

    Je me suis servie de votre exemple, mais je ne sais pas si ça peut marcher comme ça …

    Ai-je quelque chose à changer dans le code php de votre exemple (à part l’ID et la clé secrète ) ?

    Merci d’avance !

    • Léonard

      19 juillet 2011 at 18 h 46 min Répondre

      Bonjour Laura,
      ce que vous pouvez faire c’est réserver aux fans une partie ou l’intégralité de l’onglet que vous avez créé sur votre page Fan qui vous sert de page d’accueil.
      A ma connaissance il n’est pas (encore?) possible de cacher son mur et ses photos aux non fans.

      Pour procéder à cette modification vous devez simplement modifier les parties suivantes de mon code php:
      – ID Application;
      – Clé secrète;
      – le Code pour les non fan à la place de « EXEMPLE DE TEXTE // contenu pour les NON FAN »;
      – le Code pour les fans à la place de « EXEMPLE DE TEXTE // contenu pour les FANS ».

      Bonne soirée.

      • moki

        12 mai 2012 at 15 h 05 min Répondre

        Salut,

        je voulais juste te dire que je suis vraiment perdu dans tes explications. Ma page facebook est déjà créée. Mais je voudrais bien que le contenu ne soit visible qu’à mes fans. et j’ai stricte^ment rien compris. Comment faire pour afficher la page avec tous ces codes? j’ai vraiment la tête qui tourne là ^^

        • Leonard

          12 mai 2012 at 19 h 36 min Répondre

          Salut Moki, lis le nouvel article mis à jour: Tutoriel 2012: Intégrer un Onglet iFrame sur votre Fan Page Facebook. Tu y retrouveras notamment un fichier BONUS à télécharger avec un modèle d’onglet en PHP avec des conditions pour faire varier le contenu selon le statut de la personne qui la regarde (fan ou non fan). Tout y est expliqué et commenté.

  • geoffray

    23 juillet 2011 at 21 h 38 min Répondre

    Bonjour,

    Merci pour cet article.
    Je me retrouve malheureusement avec une erreur PHP, une fois votre code installé :
    Parse error: syntax error, unexpected ‘}’ in …

    Pourriez vous m’aider.

    Cordialement.

    • Léonard

      25 juillet 2011 at 8 h 24 min Répondre

      Bonjour Geoffray, n’hésite pas à me donner plus de détails ou à m’envoyer ta page via email (info (at) leonard-rodriguez.com)

    • Léonard

      26 juillet 2011 at 14 h 20 min Répondre

      Si vous souhaitez inclure simplement du texte, n’oubliez pas d’utiliser la fonction PHP echo comme ceci:
      <?php
      if(!$data[‘page’][‘liked’]){
      echo "TEXTE NON FAN";
      }else{
      echo "TEXTE POUR FAN";}
      ?>
      Si vous souhaitez inclure une page entière, je vous conseille d’utiliser la fonction PHP include comme ceci:
      <?php
      if(!$data[‘page’][‘liked’]){
      include(‘Page-non-fan.php’);
      }else{
      include(‘Page-pour-fan.php’);
      ?>

  • gabriel

    27 juillet 2011 at 12 h 27 min Répondre

    Allo, mon but serait d’avoir un iframe pour les fans et un iframe pour les non fans.

    voici ce que j’ai fait. mais ca ne fonctionne pas

    http://www.facebook.com/pages/Hallé-Couture-Assurances/193128524070038?sk=app_224552390914045

    voici mon code:

    Accueil

    FB.init({
    appId : ‘224552390914045’,
    status : true, // check login status
    cookie : true, // enable cookies to allow the server to access the session
    xfbml : true // parse XFBML
    });

    <?php
    if(!$data['page']['liked']){;}
    else{;}
    ?>

    • Léonard

      27 juillet 2011 at 12 h 55 min Répondre

      Bonjour Gabriel, n’hésite pas à me donner plus de détails ou à m’envoyer ta page complète via email (info (at) leonard-rodriguez.com)

      • Léonard

        27 juillet 2011 at 18 h 53 min Répondre

        Pour insérer des pages externes tu peux utiliser la fonction PHP: echo file_get_contents(‘$url’);

        Voici le code à insérer dans ton cas:

        Pourquoi veux-tu insérer deux iframes? Quelle est la finalité de cette opération?

        A+

  • Thomas

    30 août 2011 at 11 h 18 min Répondre

    Bonjour Léo,

    Est-il possible de réaliser cette manipulation « cahcer/afficher du contenu à des non-fans » sans utiliser de PHP?
    Juste avec du Javascript et Jquery?

    Merci.

    • Michel

      8 septembre 2011 at 1 h 15 min Répondre

      Non Thomas, il faut utiliser le php dans cette configuration.

  • Dupuy

    25 février 2012 at 17 h 42 min Répondre

    Bonjour Leonard,
    êtes vous disponible pour me répondre sur ma page FB?
    Cordialement.

    • Leonard

      27 février 2012 at 1 h 47 min Répondre

      Damien, à la suite de nombreuses demandes dont la votre, j’ai décidé de créer un nouvel article mis à jour: Tutoriel 2012: Intégrer un Onglet iFrame sur votre Fan Page Facebook. Vous y retrouverez notamment un fichier BONUS à télécharger, il comporte un modèle d’onglet en PHP avec des conditions pour faire varier le contenu selon le statut de la personne qui la regarde (fan ou non fan).

  • Fredyweb

    3 janvier 2014 at 23 h 44 min Répondre

    Bonjour et tous mes vœux pour cette nouvelle année
    Article très intéressant et très complet OK
    récupérer le code source de ma page Facebook je sais faire
    l’enregistrer en locale : OK
    Modifier le code PHP ou HTML sous Dream en local et créer une CSS OK
    mais une fois que que le fichier HTML ou PHP est modifié en local comment je remet tout ça en ligne …. si je n’ai pas les accès de ma page en FTP ??? Une astuce ?
    Thanks a lot

    Franck (autodidacte et pugnace)

    • Leonard

      11 mars 2014 at 0 h 39 min Répondre

      Désolé Fredyweb mais ton commentaire m’avait échappé! N’hésite pas à me relancer si ton problème est toujours d’actualité 😉

  • PHP | Pearltrees

    22 septembre 2014 at 0 h 04 min Répondre

    […] Comment cacher/afficher du contenu réservé aux fans de votre Page Fan Facebook? UPDATE: Attention cet article date de 2011. […]

  • Laurent BRIET

    16 janvier 2015 at 12 h 29 min Répondre

    Bonjour

    et merci pour les infos très précieuses que vous avez mises sur votre blog.

    Pour avoir de nouveaux fans, je souhaite offrir un morceau de musique gratuit à ceux qui cliquent sur j’aime.
    J’ai installé l’application Static HTML, que j’ai renommée en téléchargement gratuit,
    puis j’ai embedeb un player soundcloud avec un lien vers le morceau gratuit.

    Je ne peux pas voir le résultat en tant que visiteur lambda mais je pense que cette manipulation ne m’a pas permis de conditionner le téléchargement à l’adhésion à ma page fan.
    J’ai copié/collé votre texte mais cela ne semble pas avoir eu d’effet
    if(!$data[‘page’][‘liked’]){
    // contenu pour les NON FAN
    }else{
    // contenu pour les FANS
    }

    Y’a t’il selon vous un texte à rajouter pour que cela fonctionne ?

    • Leonard

      2 février 2015 at 16 h 22 min Répondre

      Pouvez-vous m’envoyer vos fichiers Php à info at leonard-rodriguez.com? Merci

Post a Comment