Tuto: Faire une application Facebook 1/3 5
tuto
Au travers d’un article en trois parties je vais vous décrire comment réaliser vous même une application Facebook de A à Z. Pour se faire nous utiliserons du PHP et du MySQL pour la partie serveur ainsi que du FBML (le language de balisage Facebook), du FBJS (le javascript de Facebook) ainsi que du HTML et du CSS pour mettre en forme le tout.
Notre cas d’étude sera une application qui envoi une question à l’utilisateur qui l’utilisera. Elle devra etre capable de reconnaitre l’utilisateur, de stocker ses réponses et de lui retourner en cas de besoin. Nous aurons l’occasion d’étudier le système de notification Facebook ou encore l’intégration au profil de l’utilisateur.
Avant toute chose, il faut récupérer une clef API et réserver l’identifiant de votre application (http://apps.facebook.com/VOTRE APP/). Pour se faire, il vous suffit de vous rendre sur cette page: http://www.facebook.com/developers/
Une fois le formulaire remplis, je vous invite à configurer les principaux paramètres, a savoir votre URL de rappel (la callback URL) ainsi que l’adresse de votre application. L’URL de rappel est l’adresse URL ou est hébergé votre application, si votre serveur répond à l’adresse 10.0.0.1 ce sera: http://10.0.0.1/applifb/ ou applifb est le dossier qui contient votre application. On pourrait imaginer que l’url du canveva (http://apps.facebook.com/votreappli) est une fenetre vers le dossier de votre serveur (http://10.0.0.1/applifb/)
Cliquez sur ce bouton et ensuite remplissez le formulaire
Recupérez votre clef et secret
Configuer votre callback URL et l'adresse de l'appli
Laissez toutes les autres options par défaut, notamment le mode en FBML et non Iframe. Nous allons ensuite commencer à rentrer dans le vif du sujet, a savoir récupérer l’API Facebook pour PHP et commencer à rédiger notre application. Pour télécharger l’API en question cliquez sur ce lien.
Nous allons maintenant ordonner notre projet, le dossier api contient l’API PHP Facebook, lib contiendra nos classes ou fonctions PHP ainsi qu’un dossier js,img et css. Enfin des fichiers header.php, index.php et footer.php qui comme leurs noms l’indique contiendront le haut, le centre et le pied de page de notre application.
L'arborescence de notre application
Une fois tout ce beau monde en place, nous allons commencer par une pièce maitresse de notre application, à savoir le fichier header.php, c’est lui qui contiendra toutes les informations essentielles au bon fonctionnement de notre application, voici son contenu:
< ?php
// Ici nous inclurons toutes nos librairies (classes ou fontions)
// ainsi que l'API Facebook
require_once('api/facebook.php');
// Contiendra la fonction pour se connecter à notre base MySQL (commenté pour le moment)
// require_once 'lib/db_connect.php';
// Contiendra notre classe propre à notre projet
// require_once 'lib/fonctions.php';
// Contiendra notre code CSS
// require_once 'css/css.php';
// Remplissez ces informations
$appapikey = 'ICI API KEY'; // Clef API
$appsecret = 'ICI VOTRE API SECRET'; // Secret API
$facebook = new Facebook($appapikey, $appsecret);
$callbackurl = 'http://10.0.0.1/applifb/'; // Votre callbackurl
// On recuperere l'id de l'utilisateur en lui donnant la valeur TRUE lorsque nous appelerons header.php depuis une page de l'appli
if ($login) {
$user_id = $facebook->require_login();
}
// Les urls
$appname = 'ICI LE NOM DE VOTRE APPLI';
$fb_path = 'http://apps.facebook.com/';
$app_path = $fb_path.$appname.'/';
$homepage = $fb_path.$appname.'/'; // Cette variable contiens l'URL de l'index de notre appli
$invitepage = $fb_path.$appname.'/invite.php'; // Ici la futur page d'invitation
$page = basename($_SERVER['PHP_SELF']); // Variable qui contiendra le nom du script qui s'execute (exemple: index.php)
$page_full = $_SERVER['PHP_SELF']; // Le chemin complet
// On imprime le code CSS de notre appli (commenté pour l'instant)
// $style = get_style();
// Si la variable $tabs vaut TRUE à l'appel de header.php
if ($tabs) {
echo '<fb :header decoration="shorten"/><br />';
?>
<fb :tabs>
</fb><fb :tab-item href="<?php echo $homepage; ?>" < ?php if ($page == 'index.php'):?>selected="true"< ?php endif;?>></fb><fb :fbml-attribute name="title"></fb><fb :intl desc="The homepage">Home</fb>
<fb :tab-item href="<?php echo $invitepage; ?>" < ?php if ($page == 'invite.php'):?>selected="true"< ?php endif;?> align="right"></fb><fb :fbml-attribute name="title"></fb><fb :intl desc="Invite tour friends">Invite your friends!</fb>
< ?php
}
// Le wrapper (l"enveloppe) de notre appli
echo '<div class="page">';
// Appel d'une fonction qui permettra de savoir si l'utilisateur est connu par notre application (commenté pour le moment)
// $verif = is_user($user_id, $connection);
?>Voici ensuite le code à insérer dans la page index.php:
< ?php
// On active le login pour récupérer l'id de l'utilisateur
$login = true;
// On affiche le menu de notre appli
$tabs = true;
// On appel notre header.php
require_once('header.php');
// La balise FBML fb:name permet de récupérer via l'id le nom et le prénom de l'utilisateur
echo '<h1>Bienvenue <fb :name uid="'.$user_id.'" />!!';
// On appel notre footer.php qui fermera le div .page et contiendra le pied de page
require_once('footer.php');Et voici l’application en marche pour le moment rien de transcendant mais on a déjà l’ossature, pour la prochaine partie nous allons construire notre base de données et créer quelques fonction pour s’y connecter et la manipuler.
L'utilisateur doit d'abord autoriser votre application
Et voici le résultat!
Et voila c’est tout pour aujourd’hui, la suite au prochain épisode!
Starwear
e-wear.fr
Calyopé
Deezer
Sendgits!
iHate
iCompare
Hightux.net
Picasa
War on drugs
merci pour l’effort et bonne continuation
je suis vraiment désolé mais c’est un tuto plein d’erreurs :s
C’est surtout pour comprendre le fonctionnement d’une application Facebook. Je n’ai pas tester la source, il faut l’adapter selon ses besoins…
Bonjour, très bonne base fort utile.
je cherche déséperement comment récupérais les pid, des images de l’utilisateur (facebookconnecter a mon site). Si quelqu’un a une technique. car pas d’exemple concret dans la doc FB
Salut et merci pour afficher la photo de profil d’un utilisateur tu peut utilisé la balise fb:profile-pic qui est trés simple d’utilisation. Plus d’informations ici: http://wiki.developers.facebook.com/index.php/Fb:profile-pic ensuite pour récupérer le pid de l’utilisateur regarde dans les données post au chargement de ton appli.