SDK di Facebook per JavaScript con jQuery
In questo tutorial, scoprirai come incorporare l'SDK di Facebook per JavaScript nella tua app web basata su jQuery. jQuery e l'SDK JavaScript forniscono le proprie soluzioni per posticipare l'esecuzione del codice fino al caricamento delle librerie. Questo tutorial ti aiuterà a combinare le due soluzioni e ad assicurarti che entrambe siano pronte all'uso prima di richiamare l'SDK.
In questo esempio viene usata la versione 2.0.0 di jQuery fornita dalla CDN delle librerie ospitate di Google. Per maggiori informazioni su jQuery, consulta la relativa documentazione.
Implementazione
Aggiungi jQuery all'intestazione del tuo documento e implementa il metodo $(document).ready(), che verrà eseguito quando il DOM è completo e jQuery istanziato. La tua pagina sarà simile alla seguente:
<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>Anziché importare l'SDK di Facebook per JavaScript con lo script asincrono predefinito, usa il metodo getScript() di jQuery per importare l'SDK dall'URL corretto per la lingua del tuo utente. Puoi omettere il protocollo dall'inizio dell'URL. In questo modo, verrà fornito un protocollo corrispondente per l'URL corrente.
Per impostazione predefinita, jQuery genera il timestamp delle richieste asincrone per evitare che vengano memorizzate nella cache del browser. Per disabilitare questa funzionalità, usa il metodo ajaxSetup() in modo da memorizzare l'SDK nella cache a livello locale tra le pagine.
Il metodo getScript() è asincrono, pertanto passerai a una funzione di callback dove potrai eseguire l'inizializzazione del tuo SDK normalmente. Aggiungi l'ID app per la tua app dalla Dashboard gestione 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);
});
});Separazione delle dipendenze
La collocazione di tutta la logica di richiamata del tuo SDK nella callback getScript garantirà l'esistenza dell'oggetto FB, benché non rappresenti uno schema di progettazione ottimale per un'app complessa. Poiché l'oggetto FB è globale, puoi collocare la logica dell'SDK al di fuori della callback getScript se verifichi l'esistenza dell'oggetto prima di chiamarlo. In alternativa, puoi usare un framework delle dipendenze dei moduli, come RequireJS per assicurarti che l'oggetto FB venga caricato nella configurazione dell'app.