그래프 API 버전
JavaScript용 Facebook SDK와 RequireJS 통합
이 자습서에서는 RequireJS를 사용하는 기타 JavaScript 모듈과 JavaScript용 Facebook SDK를 통합하는 방법에 대해 알아봅니다. 일반적으로 JavaScript SDK는 AMD(Asynchronous Module Definition) 디자인 패턴과 호환되지 않으므로, 이 자습서에서는 SDK를 통해 만든 FB 개체를 제공하기 위한 삽입물 작성에 대해 다룹니다.
이 자습서에서는 개발자가 RequireJS와 JavaScript 모듈을 잘 알고 있다고 가정합니다. RequireJS에 대해 더 알아보기.
구성
일반적인 방식으로 기타 RequireJS를 구성하고 Facebook SDK와 상호작용하도록 새 .js 파일을 추가합니다. 이 프로젝트에서는 디렉토리 구조가 다음과 같다고 가정합니다.
- project/
- index.html
- scripts/
- main.js
- require.js다음과 같이 SDK를 구성하고 상호작용하는 데 사용할 새 파일을 추가합니다.
- project/
- index.html
- scripts/
- main.js
- require.js
- fb.js다음과 같이 requirejs 스크립트를 가져오고 main.js를 기본 데이터로 선언해야 합니다.
<script data-main="scripts/main" src="scripts/require.js"></script>
Facebook SDK에 삽입물 추가
기본 프로젝트 스크립트에서 다음과 같이 require.config에 삽입물 선언을 추가합니다.
require.config({
shim: {
'facebook' : {
exports: 'FB'
}
},
paths: {
'facebook': 'https://connect.facebook.net/en_US/sdk.js'
}
})
require(['fb']);그러면 JavaScript SDK URL을 사용하여 facebook 모듈을 만들고 FB 개체를 해당 모듈의 내보내기로 표시합니다.
새로 만든 fb.js에서 일반적인 방식으로 FB 개체를 인스턴스화하고 사용할 수 있습니다. 앱 대시보드에서 앱의 앱 ID를 추가합니다.
정의 블록으로 코드를 묶어 facebook 삽입물 모듈을 필수 종속성으로 전달하기만 하면 됩니다.
define(['facebook'], function(){
FB.init({
appId : '{your-app-id}',
version : 'v21.0'
});
FB.getLoginStatus(function(response) {
console.log(response);
});
});