SDK de Facebook para JavaScript con jQuery
En este tutorial aprenderás a incorporar el SDK de Facebook para JavaScript a 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 carguen 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 de Google Hosted Libraries. Para obtener más información sobre jQuery, consulta la documentación de jQuery.
Implementación
Agrega jQuery al encabezado del documento e implementa el método $(document).ready(), que se ejecutará cuando el DOM se complete y en el código aparezca 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 a la configuración regional del usuario. Si no incluyes el protocolo que aparece al inicio de la URL, se aplicará un protocolo coincidente con la URL actual.
De forma predeterminada, jQuery realiza marcas temporales en las solicitudes asincrónicas para evitar que el navegador las almacene en caché. Puedes desactivar esta función usando el método ajaxSetup() para que el SDK se almacene en caché de forma local entre las páginas.
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. Agrega 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 una infraestructura que administre las dependencias entre módulos, como RequireJS, para asegurarte de que el objeto FB se carga como parte de la configuración de la aplicación.