J'ai donc regardé cette intégration de plus près et il me semble que tu a zappé une partie importante, voir ce message:
Le SDK Facebook pour JavaScript ne comporte aucun fichier autonome devant être téléchargé ou installé. Vous devez simplement inclure un extrait de code JavaScript habituel dans votre protocole HTML qui chargera le SDK sur vos pages de manière asynchrone. Le chargement asynchrone ne bloque pas le chargement d’autres éléments de votre page.
L’extrait de code ci-dessous fournit la version de base du SDK Facebook pour JavaScript, dont les paramètres sont réglés sur leurs valeurs courantes par défaut. Insérez l’extrait de code suivant juste après la balise d’ouverture <body> sur chaque page sur laquelle vous souhaitez utiliser Facebook Analytics. Remplacez {your-app-id} par l’ID d’app et {api-version} par la version de l’API que vous ciblez. La version actuelle est v4.0.
Et voici le code à intégrer dans le fichier overall_header.html de ton style:
code : Tout sélectionner
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '{your-app-id}',
cookie : true,
xfbml : true,
version : '{api-version}'
});
FB.AppEvents.logPageView();
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Puis, dernier point:
3. Vérifier l’état de la connexion
La première étape pour charger votre page web consiste à savoir si une personne est déjà connectée à votre app avec Facebook Login. Commencez cette vérification en appelant FB.getLoginStatus. Cette méthode déclenche un appel vers Facebook pour obtenir l’état de la connexion, puis appelle votre fonction de rappel avec les résultats.
Voici une partie du code, tirée de l’exemple ci-dessus, qui s’exécute pendant le chargement de la page pour vérifier l’état de connexion d’une personne :
code : Tout sélectionner
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
L’objet response fourni à votre rappel contient plusieurs champs :
code : Tout sélectionner
{
status: 'connected',
authResponse: {
accessToken: '...',
expiresIn:'...',
signedRequest:'...',
userID:'...'
}
}
status indique l’état de connexion de la personne qui utilise l’app. L’état se présente sous l’une des formes suivantes :
connected : la personne est connectée à Facebook et à votre app.
not_authorized : la personne est connectée à Facebook, mais pas à votre app.
unknown : la personne n’est pas connectée à Facebook, vous ne pouvez donc pas savoir si elle est connectée à votre app, ou FB.logout() a été appelé avant et elle ne peut donc pas se connecter à Facebook.
authResponse est inclus si l’état est connected, et comprend les éléments suivants :
accessToken : contient un token d’accès pour la personne qui utilise l’app.
expiresIn : indique l’heure UNIX à laquelle le token expire et doit être renouvelé.
signedRequest : un paramètre signé qui contient des informations sur la personne utilisant l’app.
userID : l’ID de la personne utilisant l’app.
Une fois que votre app connaît l’état de connexion de la personne qui l’utilise, vous pouvez demander à votre app de faire ce qui suit :
Si la personne est connectée à Facebook et à votre app, redirigez-la vers le contenu disponible aux personnes connectées à l’app.
Si la personne n’est pas connectée à votre app ou à Facebook, invitez-la avec la boîte de dialogue Login à l’aide de FB.login() ou montrez-lui le bouton Login.
4. Ajouter le bouton Facebook Login
Le bouton Login est facile à intégrer à votre Page. Consultez la documentation sur le bouton Login et configurez le bouton comme vous le souhaitez. Ensuite, cliquez sur Obtenir le code pour récupérer le code dont vous avez besoin pour afficher le bouton sur votre Page.
Attribut onlogin associé au bouton permettant de configurer un rappel JavaScript qui vérifie l’état de la connexion afin de voir si la personne a réussi à se connecter :
code : Tout sélectionner
<fb:login-button
scope="public_profile,email"
onlogin="checkLoginState();">
</fb:login-button>
Il s’agit du rappel. Il appelle FB.getLoginStatus() pour obtenir l’état de connexion le plus récent (statusChangeCallback() est une fonction qui traite la réponse dans l’exemple).
code : Tout sélectionner
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}