번역글이 아닌 직접 작성하는 첫번째 포스트네요!
부족하지만 도움이 되었으면 합니다! :D
SDK 로드하기
웹페이지에서 Facebook API를 사용하기 위해서는 SDK를 로드해주어야 하는데요
여기서 SDK는 JavaScript 파일이므로 확장자가 JS파일을 로드해주면 됩니다.
방법은 아래와 같이 <div id="fb-root"><div> 를 삽입한 뒤, 익명함수를 호출해주면 됩니다.
호출하실때 js.src부분에서 ko_KR을 변경하여 다른 언어로 설정하실 수 있습니다.
<html>
<body>
<div id="fb-root"></div>
<script> // Load the SDK Asynchronously (function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/ko_KR/all.js#xfbml=1";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
</body>
</html>
|
위와 같이 작성하신뒤 실행하여 주시면, 실제 HTML에서 다음과 같이 SDK가 로드된 것을 확인하실 수 있습니다.
( style이 생성되고 div 에도 변경이 생겼네요. SDK에 의해 자동으로 생긴 것이니 신경쓰지 않으셔도 됩니다. )
SDK를 성공적으로 불러왔으니 이제 initialize를 해주면 되겠지요? :D
추가학습(1)
위에서 <div id="fb-root"></div>는 SDK를 적절하게 로드하고, SDK를 초기화하는 함수를 호출하는데 쓰입니다.
SDK를 보조하는 정도로 생각하면 될 듯 싶습니다. 초기화 하는 함수는 다음장에서 다루도록 하겠습니다.
추가학습(2)
예제에서 SDK를 로드하는 스크립트를 만들때 익명함수를 호출하였는데요..
깊은 개념은 나중에 생각하기로 하고, 간단하게 설명드리자면,
var 함수명 = function(d){~};
함수명(document);
처럼 함수를 정의해주는 부분 따로, 호출해주는 부분 따로 작성 한것을.
(function(d){~})(document);
방식으로 함수를 구현후 바로 호출한다고 생각하시면 됩니다.
즉 d = document 가 되어 함수가 호출됩니다.
출처 : http://lyb1495.tistory.com/entry/%E3%85%81