SDK Facebook pour JavaScript avec jQuery
Dans ce didacticiel, vous découvrirez comment intégrer le SDK Facebook JavaScript à votre application web basée sur jQuery. jQuery et le SDK JavaScript offrent tous les deux leurs propres solutions pour différer l’exécution du code jusqu’à ce que les bibliothèques chargent. Ce didacticiel vous aidera à combiner les deux et à garantir qu’ils sont prêts à être utilisés avant d’invoquer le SDK.
Cet exemple utilise jQuery 2.0.0 depuis les bibliothèques CDN hébergées de Google. Pour en savoir plus sur jQuery, consultez la documentation sur jQuery.
Implémentation
Ajoutez jQuery dans l’en-tête de votre document et implémentez la méthode $(document).ready(), qui s’exécute une fois le DOM terminé et jQuery instancié. Votre page aura alors l’aspect suivant :
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<title>jQuery Example</title>
<script>
$(document).ready(function() {
// Execute some code here
});
</script>
</head>Plutôt que d’importer le SDK Facebook JavaScript avec le script asynchrone par défaut, utilisez la méthode getScript() de jQuery pour importer le SDK depuis l’URL correcte pour le paramètre régional de votre utilisateur. Vous pouvez exclure le protocole du début de l’URL, et cela servira de protocole correspondant pour l’URL actuelle.
Par défaut, jQuery réalise un horodatage des demandes asynchrones pour éviter qu’elles ne soient mises en cache par le navigateur. Vous pouvez désactiver cette fonctionnalité à l’aide de la méthode ajaxSetup() pour que le SDK soit mis en cache localement entre des pages.
Comme la méthode getScript() est asynchrone, vous fournirez une fonction de rappel anonyme dans laquelle vous pouvez inclure votre code d’initialisation du SDK comme d’habitude. Ajoutez votre ID d’app depuis l’Espace App.
$(document).ready(function() {
$.ajaxSetup({ cache: true });
$.getScript('https://connect.facebook.net/en_US/sdk.js', function(){
FB.init({
appId: '{your-app-id}',
version: 'v2.7' // or v2.1, v2.2, v2.3, ...
});
$('#loginbutton,#feedbutton').removeAttr('disabled');
FB.getLoginStatus(updateStatusCallback);
});
});Découplage des dépendances
L’intégration de votre logique d’invocation du SDK dans le rappel getScript garantira que l’objet Facebook existe, mais ce n’est pas une conception idéale pour les applications complexes. Comme l’objet FB est global, vous pouvez exclure la logique du SDK du rappel getScript à condition que vous vérifiiez qu’il existe avant de l’invoquer. Alternativement, vous pouvez utiliser une infrastructure de dépendance de modules comme RequireJS pour garantir que l’objet FB charge dans la configuration de l’application.