SDK do Facebook para JavaScript com jQuery
Neste tutorial, você aprenderá a incorporar o SDK do JavaScript do Facebook ao seu aplicativo Web baseado em jQuery. Tanto o jQuery quanto o SDK do JavaScript fornecem suas próprias soluções para adiar a execução do código até que as bibliotecas tenham sido carregadas, e este tutorial o ajudará a combinar os dois e a assegurar que estejam prontos para uso antes de invocar o SDK.
Este exemplo usa jQuery 2.0.0 fornecido pela CDN das Bibliotecas Hospedadas do Google. Para saber mais sobre jQuery, examine a documentação de jQuery
Implementação
Adicione jQuery ao cabeçalho de seu documento e implemente o método $(document).ready(), que será executado quando o DOM for concluído e o jQuery for instanciado. Sua página terá uma aparência parecida com a seguinte:
<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>Em vez de importar o SDK do JavaScript do Facebook com o script assíncrono padrão, use o método getScript() de jQuery para importar o SDK da URL correta da localidade de seu usuário. Você pode omitir o protocolo do começo do URL. Com isso um protocolo correspondente será fornecido para o URL atual.
Por padrão, o jQuery carimba com data e hora as solicitações assíncronas a fim de evitar que elas sejam armazenadas em cache pelo navegador. Convém desativar essa funcionalidade usando o método ajaxSetup(), assim o SDK será armazenado em cache localmente entre as páginas.
O método getScript() é assíncrono, portanto, você passará uma função anônima de retorno de chamada na qual poderá executar seu código de inicialização de SDK como de costume. Adicione o número de identificação do aplicativo do Painel do aplicativo.
$(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);
});
});Desacoplamento de dependência
Colocar toda sua lógica de invocação de SDK no retorno de chamada de getScript garantirá a existência do objeto FB, mas não é um bom padrão de design para um aplicativo complexo. Como o objeto FB é global, você pode colocar a lógica do SDK fora do retorno de chamada de getScript contanto que verifique a existência dele antes de chamá-lo. Como alternativa, você pode usar uma estrutura de dependência de módulo, por exemplo, RequireJS, para garantir que o objeto FB seja carregado como parte da configuração do aplicativo.