Facebook-SDK für JavaScript mit jQuery
In diesem Tutorial erfährst du, wie du das Facebook Javascript-SDK in deine jQuery-basierte Web-App integrierst. Sowohl jQuery als auch das JavaScript-SDK bieten ihre eigenen Lösungen für die Verzögerung der Codeausführung, bis die Bibliotheken geladen wurden. Dieses Tutorial beschreibt, wie du die beiden kombinierst und sicherstellst, dass beide einsatzbereit sind, bevor du das SDK aufrufst.
Dieses Beispiel verwendet jQuery 2.0.0 aus dem Google Hosted Libraries-CDN. Weitere Informationen zu jQuery findest du in der jQuery-Dokumentation.
Implementierung
Füge jQuery dem head-Abschnitt hinzu und implementiere die $(document).ready()-Methode. Sie wird ausgeführt, wenn das DOM abgeschlossen und jQuery instanziiert ist. Deine Seite sieht in etwa wie folgt aus:
<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>Statt das Facebook JavaScript-SDK mit dem standardmäßigen asynchronen Skript zu importieren, importiere mit der getScript()-Methode von jQuery das SDK von der richtigen URL für die Ländereinstellung deines Nutzers. Du kannst das Protokoll am Anfang der URL weglassen, sodass das passende Protokoll für die aktuelle URL verwendet wird.
Standardmäßig versieht jQuery asynchrone Anfragen mit Zeitstempeln, damit sie nicht vom Browser zwischengespeichert werden. Du solltest diese Funktion mit der ajaxSetup()-Methode deaktivieren, damit das SDK lokal zwischen Seiten zwischengespeichert wird.
Die getScript()-Methode ist asynchron. Du übergibst also eine anonyme Rückruffunktion, in der du deinen SDK-Initialisierungscode wie gewohnt verwenden kannst. Füge die App-ID für deine App aus dem App Dashboard hinzu.
$(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);
});
});Abhängigkeitsentkopplung
Indem du die gesamte SDK-Aufruflogik im getScript-Rückruf ablegst, garantierst du, dass das FB-Objekt vorhanden ist. Für eine komplexe App ist das aber kein geeignetes Designmuster. Da das FB-Objekt global ist, kannst du die SDK-Logik außerhalb des getScript-Rückrufs ablegen, solange du vor dem Aufruf prüfst, ob das Objekt vorhanden ist. Alternativ dazu kannst du auch ein Modulabhängigkeits-Framework, wie RequireJS, verwenden, um sicherzustellen, dass das FB-Objekt im Rahmen der App-Einrichtung geladen wird.