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…
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:
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:
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:
(
[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:
// 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!
Comment créer un Onglet (ou Tab) sur sa Page Fan Facebook?
17 juin 2011 at 3 h 24 min[…] 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 minMerci 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 minJe recommanderai ton article à nos stagiaires qui ont du mal avec les nouveaux onglets de Facebook 😉
Miki
22 juin 2011 at 18 h 29 minMerci 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 minDans le récapitulatif de l’application
Léonard
23 juin 2011 at 14 h 46 minMerci 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 minBonjour !
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 minRoooo les fautes !!!
Désolé
Léonard
29 juin 2011 at 22 h 00 minBonjour 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 minMerci Léonard pour votre rapidité. Je vous ai envoyé un « contact » un peu plus explicite…
Léonard
30 juin 2011 at 0 h 34 minBonsoir 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 minBonsoir
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 minBonjour 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 minBonjour,
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 minBonjour 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 minSalut,
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 minSalut 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 minBonjour,
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 minBonjour 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 minSi 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 minAllo, 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 minBonjour 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 minPour 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 minBonjour 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 minNon Thomas, il faut utiliser le php dans cette configuration.
Dupuy
25 février 2012 at 17 h 42 minBonjour Leonard,
êtes vous disponible pour me répondre sur ma page FB?
Cordialement.
Leonard
27 février 2012 at 1 h 47 minDamien, à 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 minBonjour 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 minDé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[…] 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 minBonjour
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 minPouvez-vous m’envoyer vos fichiers Php à info at leonard-rodriguez.com? Merci