Voici un Tutorial pour démarrer avec Facebook et son api.
Dans la suite de ce tutoriel je vous montrerai comment créer une application utilisant l'API facebook. L'application est en HTML javascript uniquement?
Pour commencer créer une application facebook ici :
https://developers.facebook.com/apps
Vous devez bien sur avoir un compte facebook pour cela. Vous devez egalement aimer la page developpers de facebook pur pouvoir créer une application.
Donnez un nom à l'application et un un espace de nom
Indiquez le domaine de votre site web :
Cela est suffisant pour avoir une application facebook intégré à son site web.
Créer une simple page HTML et incluez le code suivant :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Facebook Sample</title>
</head>
<body>
<script>
//----- Load facebook --->
$(document).ready(function () {
var fbAppId = 'YOUR_APP_KEY';
window.fbAsyncInit = function () {
FB.init({
appId: fbAppId, // App ID
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true // parse page for xfbml or html5 social plugins like login button below
});
};
// Load the SDK asynchronously
(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 = "//connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
})
//----- End Load facebook ------------------------------->
</script>
</body>
</html>
Modifier le code en y remplaçant YOUR_APP_KEY par la clé de votre application facebook obtenu lors de la création de cette dernière.
Ce code permet d'initialer facebook et le sdk javascript de facebook.
Nous allons maintenant rajouter un bouton de login pour l'utilisateur. Rajouter le code suivant dans votre HTML :
<input type="button" onclick="loginaction()" value="connect to facebook"/>
La fonction loginaction :
function loginaction() {
// Demander a Facebook si l'utilisateur est connecté à Facebook et est autorisé pour notre application
FB.getLoginStatus(function (response) {
//L'utilisateur et authentifié à Facebook et est autorisé à utiliser notre application
if (response.status === 'connected') {
showprofil();
} else if (response.status === 'not_authorized') {
// L'utilisateur est connecté à Facebook mais n'est pas autorisé à utilisée notre application
login();
} else {
// L'utilisateur n'est pas connecté à Facebook
login();
}
});
}
La fonction loginaction commence à demander à Facebook si l'utilisateur est connecté à Facebook et est autorisé pour notre application. La méthode utilisé est FB.getLoginStatus(funtion) donné dans par le SDK facebook. La réponse peut être :
- Connected : Connecté à facebook et autorisé sur l'application
- not_authorized : L'utilisateur est connecté à facebook mais n'est pas autorisé à utiliser notre application
- L'utilisateur n'est pas connecté à facebook.
Dans le cas 2 et 3, nous appelons la méthode login() pour réaliser la connection. Dans le cas 1, on va appeler la méthode showprofil() qui va afficher le profil de l'utilisateur.
La fonction login :
function login() {
FB.login(function (response) {
if (!response.authResponse) {
alert(response);
}
});
}
La fonction login fait simplement l'appel facebook FB.login(funtion) qui permet de s'authentifier à travers une popup d'authentification facebook. La fonctino FB.login demande également à l'utilisateur s'l désire interagir avec notre application. Si la connexion est un echec, la fonction login affiche simplement l'erreur.
La fonction showprofil :
function showprofil() {
FB.api('/me?fields=picture,name', function (response) {
$('#profil').empty();
$('#profil').show();
$('#profil').append('<img src="' + response.picture.data.url + '">');
$('#profil').append('<a href="' + response.link + '">' + response.name + '</a>');
});
}
La fonction showprofil utilise l'Open Graph de facebook pour récupérer l'image et le nom de l'utilisateur authentifié. L'appel est simple est est de la forme FB.api ( 'requete', function())
Vous pouvez explorer les requêtes possible ici :
https://developers.facebook.com/tools/explorer?method=GET&path=660718613%3Ffields%3Did%2Cname
La fonction affiche ensuite à l'aide de Jquery le nom et l'image de l’utilisateur dans la balise balise profil :
<div id="profil"></div>
Pour inclure Jquery inserez simplement dans votre page :
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
Vous pouvez bien sur réaliser la meme chose sans Jquery, l'utilisation de Jquery ne modifie en rien l'intégration avec l'API facebook.
Le code final de votre page HTML est :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Facebook Sample</title>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
//----- Load facebook for like buttoon and comment at least --->
$(document).ready(function () {
var fbAppId = '445930615488341';
var accesstoken = '';
window.fbAsyncInit = function () {
FB.init({
appId: fbAppId, // App ID
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true // parse page for xfbml or html5 social plugins like login button below
});
};
// Load the SDK asynchronously
(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 = "//connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
})
//----- End Load facebook ------------------------------->
function showprofil() {
FB.api('/me?fields=picture,name', function (response) {
$('#profil').empty();
$('#profil').show();
$('#profil').append('<img src="' + response.picture.data.url + '">');
$('#profil').append( response.name);
});
}
function login() {
FB.login(function (response) {
if (response.authResponse) {
accesstoken = FB.getAuthResponse()['accessToken'];
//dojob();
} else {
alert(response);
}
});
}
function loginaction() {
// Demander a Facebook si l(utilisateur est connecté à Facebook et est autorisé pour notre application
FB.getLoginStatus(function (response) {
//L'utilisateur et authentifié à Facebook et est autorisé à utiliser notre application
if (response.status === 'connected') {
showprofil();
} else if (response.status === 'not_authorized') {
// L'utilisateur est connecté à facebook mais n'est pas autorisé à utilisée notre application
login();
} else {
// L'utilisateur n'est pas connecté à facebook
login();
}
});
}
</script>
<div id="fb-root"></div>
<input type="button" onclick="loginaction()" value="connect to facebook"/>
<div id="profil"></div>
</body>
</html>
Vous pouvez recuperer le code ici :
McbJam Blog: Simple facebook javascript starter kit
