SDK de Facebook para JavaScript con jQuery
En este tutorial aprenderás a incorporar el SDK de Facebook para JavaScript en una aplicación web basada en jQuery. Tanto jQuery como el SDK para JavaScript proporcionan soluciones propias para aplazar la ejecución del código hasta que se hayan cargado las bibliotecas. Este tutorial te ayudará a combinarlos para asegurarte de que estén listos antes de invocar el SDK.
En este ejemplo se usa jQuery 2.0.0, obtenido de la CDN Google Hosted Libraries. Para obtener más información sobre jQuery, consulta la documentación de jQuery.
Implementación
Añade jQuery al encabezado del documento e implementa el método $(document).ready(), que se ejecutará cuando el DOM se haya completado y se haya creado una instancia de jQuery. La página tendrá el siguiente aspecto:
<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>En lugar de importar el SDK de Facebook para JavaScript con el script asincrónico predeterminado, usa el método getScript() de jQuery para importar el SDK de la URL correspondiente al idioma del usuario. Puedes omitir el protocolo del inicio de la URL y se proporcionará un protocolo coincidente con la URL actual.
De forma predeterminada, jQuery aplica una marca temporal a las solicitudes asincrónicas para evitar que el navegador las almacene en su caché. Para que el SDK se guarde en la caché de forma local al cambiar de página, te recomendamos desactivar esta función mediante el método ajaxSetup().
El método getScript() es asincrónico, de manera que tendrás que enviar una función de devolución de llamada anónima en la que puedes incluir el código de inicialización del SDK de la forma habitual. Añade el identificador de la aplicación desde el panel de aplicaciones.
$(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);
});
});Desacoplamiento de dependencias
Si incluyes toda la lógica de invocación del SDK en la función de devolución de llamada getScript, podrás garantizar que existe el objeto FB, pero no es el diseño más apropiado para una aplicación compleja. Como el objeto FB es global, puedes colocar la lógica del SDK fuera de la función de devolución de llamada getScript siempre y cuando compruebes que existe antes de llamarla. También puedes usar un marco que administre las dependencias entre módulos, como RequireJS, para asegurarte de que el objeto FB se carga como parte de la instalación de la aplicación.