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:
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:
(
[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
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!
L’article Comment cacher/afficher du contenu réservé à vos fans Facebook? est apparu en premier sur LRWEB.