JavaScript용 Facebook SDK와 JQuery 통합
이 자습서에서는 Facebook JavaScript SDK를 jQuery 기반 웹 앱에 통합하는 방법에 대해 알아봅니다. jQuery와 JavaScript SDK 모두에서는 라이브러리를 읽어들일 때까지 코드 실행을 연기하는 고유 솔루션을 제공하며, 이 자습서에서는 jQuery와 JavaScript SDK를 결합하는 데 도움을 주고 SDK를 호출하기 전에 둘 다 사용할 준비가 되게 합니다.
이 예에서는 Google의 Hosted Libraries CDN에서 제공하는 jQuery 2.0.0을 사용합니다. jQuery에 대한 자세한 내용은 jQuery 문서를 확인하세요.
구현
문서 머리글에 jQuery를 추가하고, DOM이 완료되고 jQuery가 인스턴스화되면 실행될 $(document).ready() 메서드를 구현합니다. 페이지는 다음과 같이 표시됩니다.
<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>기본 비동기식 스크립트로 Facebook JavaScript SDK를 가져오는 대신 jQuery의 getScript() 메서드를 사용하여 사용자 언어에 올바른 URL에서 SDK를 가져옵니다. URL의 시작 부분에서 프로토콜을 생략할 수 있습니다. 그러면 현재 URL에 일치하는 프로토콜이 제공됩니다.
기본적으로 jQuery는 브라우저에서 캐싱하지 않도록 비동기식 요청의 타임스탬프를 지정합니다. 페이지 간에 로컬로 SDK가 캐싱되도록 ajaxSetup() 메서드를 사용하여 이 기능을 비활성화할 수도 있습니다.
getScript() 메서드는 비동기식이므로 SDK 초기화 코드를 일반적인 방식으로 수행할 수 있는 익명의 콜백 함수를 전달합니다. 앱 대시보드에서 앱의 앱 ID를 추가합니다.
$(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);
});
});종속성 분리
모든 SDK 호출 로직을 getScript 콜백에 두면 FB 개체가 확실히 존재하게 되지만, 이 멋진 디자인 패턴은 복잡한 앱에 적합하지 않습니다. FB 개체는 어디에서나 사용할 수 있으므로, 이 개체를 호출하기 전에 확실히 존재하는지 확인한 경우에 한해 getScript 콜백 외부에 SDK 로직을 둘 수 있습니다. 또는 RequireJS와 같은 모듈 종속성 프레임워크를 사용하여 앱 설정의 일부로 FB 개체을 읽어들였는지 확인합니다.