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

Comment réserver du contenu à vos fans sur vos onglets Facebook?

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!

32 commentaires

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

    Reply
  2. Je recommanderai ton article à nos stagiaires qui ont du mal avec les nouveaux onglets de Facebook ;-)

    Reply
  3. 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!

    Reply
  4. Dans le récapitulatif de l’application

    Reply
  5. 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 »

    Reply
  6. 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

    Reply
  7. Roooo les fautes !!!
    Désolé

    Reply
  8. 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?

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

    Reply
    • 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)

      Reply
  10. 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 !

    Reply
    • 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 ;-)

      Reply
  11. 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 !

    Reply
    • 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.

      Reply
      • 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à ^^

        Reply
        • 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é.

          Reply
  12. 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.

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

      Reply
    • 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’);
      ?>

      Reply
  13. 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{;}
    ?>

    Reply
    • 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)

      Reply
      • 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:
        < ?php if(!$data['page']['liked']){ echo file_get_contents('http://www.google.ca/'); }else{ echo file_get_contents('http://www.yahoo.ca/'); } ?>

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

        A+

        Reply
  14. 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.

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

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

    Reply
    • 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).

      Reply
  16. 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)

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

      Reply
  17. 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 ?

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

      Reply

Commentez cet article:

Derniers Articles

  • segments avancés
    Les Segments avancés de Google Analytics et 20 exemples

    Il existe plusieurs outils de Web Analytics qui vous permettent de segmenter vos données, moi j’utilise Google Analytics et ses segments avancés que je vais essayer de vous détailler en suivant ce plan : 0) Introduction I) Qu’est-ce que sont les segments avancés et pourquoi les utiliser? I-a) Qu’est ce que sont les segments avancés? […]

  • Netlinking
    Qu’est-ce que le Netlinking et comment faire?

    Voici le sommaire de cet article : 1/ Qu’est-ce que le Netlinking ? 2/ Qu’est-ce qu’un backlink de qualité ? 3/ Plutôt White, Grey ou Black Hat ? 4/ Restez Naturel et Variez 5) Quelles techniques et quels sites utiliser pour son Netlinking ? 6) Analyser 7) Etre organisé et planifier son Netlinking 8) Conclusion […]

  • thumb
    Tout savoir sur le Temps de pose

    Il y a quelques semaines nous parlions d’ouverture du diaphragme et de profondeur de champ, aujourd’hui j’aborderai le deuxième chapitre lié à l’exposition : la vitesse d’obturation. Rappel : une photo bien exposée est une photo qui combine parfaitement les trois facteurs du « triangle de l’exposition » : – L’ouverture du diaphragme – Le […]

  • thumb-i
    Tu savais que …?

    Vous retrouverez sur cet article plein d’anecdotes et de statistiques liées au web, aux réseaux sociaux, à Google, des geekeries… Pour les découvrir en avant-première, suivez moi sur Facebook , sur Google+, sur Pinterest ou sur Twitter! Cette page est mise à jour tous les jours, n’hésitez pas à partager ces images sur cos réseaux […]

  • seo-copywriting
    Comment écrire ses articles et bien utiliser les mots clefs?

    C’est article est la suite de "Comment choisir ses mots clés pour référencer son site?", donc si vous avez la flemme n’avez pas eu le temps de lire ce précédent article, je vous rappelle que : – c’est essentiel de réfléchir sur quels mots clefs associer à chaque page… et donc éviter la cannibalisation SEO […]

  • thumb-ouverture
    Tout savoir sur l’ouverture du diaphragme

    En photographie si vous souhaitez sortir de l’ennuyeux mode « auto » pour faire de la photographie avec créativité et personnalité, il y a un concept qui est essentiel : l’exposition. Une photo bien exposée est une photo qui combine les trois facteurs du « triangle de l’exposition » : – L’ouverture du diaphragme – […]

  • pentax-eau-thumb
    Victoire de LRWEB lors du Concours « l’eau » organisé par Pentax

    Les quelques lecteurs fidèles se demanderont ce que vient faire un article qui parle de photographie sur mon blog… J’en profite donc pour vous annoncer un virage important pour ce blog. Dorénavant je ne parlerai plus uniquement de Web-marketing et de Web Design mais également de Photographie qui est depuis plus d’un an une vraie […]

  • communiques-presse-thumb
    Comment rédiger et publier un communiqué de presse optimisé SEO?

    Voici comment s’articulera cet article : Les communiqués de presse au cœur de votre stratégie SEO Comment rédiger vos communiqués de presse Choisir des bonnes plateformes de press release Comment Publier vos Article de presse Et après la publication je peux en remettre un coup ? Fichier Bonus à télécharger (liste de plus de 250 […]

  • tab
    Tutoriel : Intégrer un Onglet iFrame sur votre Fan Page Facebook

    La durée de vie d’un tutoriel sur Facebook et ses fonctionnalités est très courte vu que le site californien change constamment! Mais vous avez été si nombreux à me demander un tutoriel mis à jour sur la création et l’intégration d’un Onglet sur une Page Fan, que j’ai finalement craqué… Cet article est donc la […]

  • multilingue
    Site Multilingue: domaines, répertoires ou sous-domaines?

    La première règle est qu’il n’y en a pas! Un peu facile comme introduction… Disons qu’il y a de très bonnes techniques, des bonnes techniques et des techniques un peu moins bonnes! Décidemment cette intro est complètement nulle…Et pour conclure en mocheté cette inutile introduction, disons que chaque site multilingue aura sa propre stratégie en […]

  • imacros-bh
    Tutoriel iMacros et Exemples de macros

    Cet article t’intéressera si: – tu souhaites simplement gagner du temps en automatisant des opérations que tu répètes quotidiennement, – si tu es SEO et que tu souhaites automatiser des flux, poster plus rapidement, créer des backlinks ou rendre ta LinkWheel plus puissante, – si « Bookmarking Demon », « SenukeX », « Scrapebox » et autres softwares de BH te […]

  • contentspinning
    Content Spinning: comment faire et quels logiciels utiliser?

    Le content spinning en SEO est une technique qui consiste à créer du contenu rapidement, mécaniquement en substituant des mots grâce aux expressions simples du langage PHP. Elle est très souvent utilisée par la communauté des SEO Black hat pour générer des backlinks. Le rendu peut être propre et ressembler à une reformulation manuelle ou […]

  • like-wordpress
    Comment ajouter le bouton Like de Facebook sur WordPress?

    Vous avez un site web? Que vous ayez une page Facebook ou non, le bouton « like » de Facebook peut être un vrai générateur de trafic si vous l’utilisez bien. Les avantages du bouton « Like » Le bouton Like est un outil très puissant qui permettra à vos lecteurs de vous indiquer qu’ils apprécient votre contenu mais […]

  • likekei
    Comment intégrer Facebook Open Graph dans WordPress?

    Quand une personne « aime » votre contenu, un résumé de la page s’affichera sur son mur Facebook. l’Open Data Graph Meta vous permettra d’avoir une correspondance exacte entre le titre de votre article, la vignette et la description comme sur cet exemple: Si vous avez un blog WordPress, c’est très simple, il suffit d’ajouter quelques meta […]

  • thumbb
    The Passion Project: l’initiative Facebook de Novoceram

    Depuis Avril 2011, je suis responsable Web chez Novoceram, un des leaders mondiaux du secteur céramique. Je souhaite vous faire partager une de mes expériences Web chez Novoceram. L’évènement de l’année pour les entreprises du secteur céramique est le Cersaie. Chaque année, le stand de Novoceram illustre un thème choisi l’équipe. L’année dernière, c’était « le […]

Devenez Fan de Léonard Rodriguez sur Facebook
Retrouvez moi sur Google
Suivez-moi sur Twitter
COntactez-moi