빠른 시작: JavaScript용 Facebook SDK

JavaScript용 Facebook SDK의 다양한 클라이언트 측 기능 세트로 다음을 수행할 수 있습니다.

  • 사이트에서 좋아요 버튼과 기타 소셜 플러그인을 사용할 수 있습니다.
  • 사이트에 가입을 꺼리는 요인을 저하시키기 위해 Facebook 로그인을 사용할 수 있습니다.
  • Facebook의 그래프 API를 쉽게 호출할 수 있습니다.
  • 소식 공유와 같은 다양한 액션을 수행할 수 있는 대화 상자를 실행할 수 있습니다.
  • Facebook에서 게임 또는 앱 탭을 빌드할 때 쉽게 통신할 수 있습니다.

SDK, 소셜 플러그인 및 대화 상자는 데스크톱과 모바일 웹 브라우저 모두에서 작동합니다.

이 빠른 시작에서는 SDK 설정 방법을 보여주고 몇 가지 기본 그래프 API를 호출하는 방법을 익혀봅니다. 아직 설정하지 않은 경우 JavaScript 테스트 콘솔을 통해 모든 SDK 메서드를 사용해보고 몇 가지 예제를 살펴볼 수 있습니다. 설정 단계를 건너뛰고 이 빠른 시작의 나머지 부분만 콘솔에서 테스트해볼 수도 있습니다.

기본 설정

JavaScript용 Facebook SDK에는 다운로드하거나 설치해야 하는 독립실행형 파일이 없습니다. 대신 SDK를 페이지에 비동기식으로 읽어들일 HTML에 간단한 JavaScript 정규식을 포함하기만 하면 됩니다. 비동기식으로 읽어들이면 페이지의 다른 요소를 읽어들이는 것을 차단하지 않습니다.

다음 픽셀 코드는 옵션이 가장 일반적인 기본값으로 설정되는 기본 SDK 버전을 제공합니다. 읽어들일 각 페이지의 <body> 태그를 연 다음 바로 삽입해야 합니다.

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : 'your-app-id',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v2.11'
    });
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "https://connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>
    

이 코드는 SDK를 읽어들인 다음 초기화합니다. 직접 만든 Facebook 앱의 ID로 your-app-id 값을 대체해야 합니다. 앱 ID는 앱 대시보드에서 찾을 수 있습니다.