JavaScript SDK - 예시

빠른 시작 가이드를 읽고 JavaScript용 Facebook SDK를 읽어들여 초기화하는 방법을 알아보고, 고급 설정 가이드에서 구현을 맞춤 설정하는 방법을 알아보세요. 이제 SDK를 사용하는 예시를 시험해 보세요.

• 공유 대화 상자 트리거
• Facebook 로그인

공유 대화 상자 트리거

공유 대화 상자를 사용하면 페이지 사용자가 타임라인에 링크를 게시하거나 오픈 그래프 소식을 만들 수 있습니다. JavaScript SDK를 사용하여 표시한 대화 상자는 모바일 웹이나 데스크톱 웹 중에서 읽어들인 컨텍스트에 맞게 자동으로 형식이 지정됩니다.

여기에서 JavaScript SDK의 FB.ui() 메서드를 사용하여 매우 기본적인 공유 대화 상자를 호출하는 방법을 보여드릴 것입니다. 기본 설정 코드에서 FB.init() 호출 뒤에 이 코드 조각을 추가하세요.

FB.ui({
  method: 'share',
  href: 'https://developers.facebook.com/docs/'
}, function(response){});
    

이제 페이지를 다시 읽어들이면 페이지 상단에 공유 대화 상자가 표시됩니다. 소식을 게시하거나 대화 상자를 취소하여 대화 상자가 닫히면 응답 함수가 트리거됩니다.

사용할 수 있는 매개변수의 전체 리스트와 응답 개체의 구조는 FB.ui 참고 문서를 참조하세요.

Facebook 로그인

Facebook 로그인을 사용하면 사용자가 Facebook ID를 등록하거나 이를 사용하여 앱에 로그인할 수 있습니다.

JS SDK를 사용하여 Facebook 로그인을 구현하는 방법에 대한 전체 가이드가 준비되어 있습니다. 하지만 지금은 기본적인 샘플 코드만 사용하여 작동 원리를 확인해볼 수 있습니다. 원래의 FB.init 호출 뒤에 다음을 삽입합니다.

FB.login(function(response) {
    if (response.authResponse) {
     console.log('Welcome!  Fetching your information.... ');
     FB.api('/me', function(response) {
       console.log('Good to see you, ' + response.name + '.');
     });
    } else {
     console.log('User cancelled login or did not fully authorize.');
    }
});
    

로그인 대화 상자의 정확한 작동 원리를 알아보려면 로그인 가이드를 참고하세요. 하지만 페이지를 다시 읽어들였을 때 아직 앱에 권한을 부여하지 않았다면 앱의 로그인 대화 상자가 표시됩니다.