로그인 버튼

로그인 버튼은 웹사이트나 웹 앱에서 Facebook 로그인을 이용할 수 있는 간편한 방법입니다.

사용자가 아직 앱에 로그인하지 않은 경우 이 버튼이 표시되며 이 버튼을 클릭하면 로그인 대화 상자가 열리고 로그인 플로가 시작됩니다. 이미 로그인한 사용자에게는 이 버튼이 표시되지 않지만, 로그아웃 버튼이 표시되도록 선택할 수도 있습니다.

로그아웃 버튼을 표시하는 경우 사람들이 이 버튼을 사용하여 로그아웃하면 앱과 Facebook에서 모두 로그아웃됩니다.

로그인 버튼은 JavaScript SDK와 연결해서만 작동하도록 디자인되어 있습니다. 모바일 앱을 빌드 중이거나 JavaScript SDK를 사용할 수 없는 경우 대신 해당 앱 유형에 대한 로그인 플로 가이드를 따라야 합니다.

Facebook으로 계속하기 버튼이 로그인 버튼의 이전 버전을 대체합니다. 자세한 내용은 마이그레이션을 참조하세요.

플러그인 구성 도구

Width

버튼 크기

large

버튼 텍스트

continue_with

로그아웃 버튼 사용

사용자가 Facebook에 로그인할 때 이름과 프로필 사진 포함 [?]

코드 받기

{Name}님으로 계속 버튼

사용자가 동일한 브라우저에서 Facebook에 로그인한 경우 {Name}님으로 계속 버튼에 "{persons' name}님으로 계속"이라는 텍스트가 포함되며 해당 사용자의 Facebook 프로필 사진이 포함될 수 있습니다. {Name}님으로 계속 버튼을 사용하려면 먼저 개발자가 JavaScript SDK를 읽어들여야 합니다. JavaScript SDK 설정에 대한 안내는 JavaScript SDK 빠른 시작을 참조하세요. 버튼 설정에 data-use-continue-as="true"를 추가하여 {Name}님으로 계속을 활성화합니다.

{Name}님으로 계속 버튼의 높이는 맞춤 설정할 수 없습니다.

버튼 크기	높이	너비	맞춤 너비
소형 버튼	20픽셀	200픽셀	아니요
중간	28픽셀	200~320픽셀	예
대형 버튼	40픽셀	240~400픽셀	예

개발자가 최대 매개변수를 초과하는 크기를 선택하면 버튼이 기본적으로 최대 너비로 설정됩니다.

{Name}님으로 계속 버튼의 모범 사례

{Name}님으로 계속 버튼은 클릭 및 참여를 늘릴 수 있는 좋은 방법입니다. 이 버튼을 사용하면 로그인 버튼에 사용자의 프로필 사진과 이름이 표시되어 앱이 사용자를 위해 더 맞춤 설정되었다는 느낌을 줄 수 있습니다.

반면에 여기에서 자신의 이름과 프로필 사진이 표시될 것이라고 예상하지 못한 사용자의 경우 혼란을 느낄 수도 있습니다. 다음 사항을 검토하여 다음 계정으로 계속이 앱에 가장 적합한 옵션이 맞는지 확인해보세요.

{Name}님으로 계속이 앱에 적합하지 않다면 'Facebook으로 계속하기'라고 표시되는 새로운 JavaScript SDK 버튼을 사용할 수 있습니다.

로그인 버튼 모범 사례

Facebook 로그인 사용에 관한 일반 모범 사례를 따르세요. {Name}님으로 계속을 사용하는 경우 다음 두 가지 모범 사례를 따르는 것이 특히 중요합니다.

(정책에 따라 요구되는) 로그아웃 방법 안내
테스트 및 측정 - 사용자 인지도 및 전환에 미치는 영향 파악

기타 가능한 몇 가지 모범 사례:

로그인의 기능에 대해 명확히 설명
로그인 버튼을 읽어들일 때 자리 표시자/스피너를 사용했다가 버튼을 읽어들인 후 삭제. 이러한 코드의 예:

<script>
var finished_rendering = function() {
  console.log("finished rendering plugins");
  var spinner = document.getElementById("spinner");
  spinner.removeAttribute("style");
  spinner.removeChild(spinner.childNodes[0]);
}
FB.Event.subscribe('xfbml.render', finished_rendering);
</script>
<div id="spinner"
    style="
        background: #4267b2;
        border-radius: 5px;
        color: white;
        height: 40px;
        text-align: center;
        width: 250px;">
    Loading
    <div
    class="fb-login-button"
    data-max-rows="1"
    data-size="large"
    data-button-type="continue_with"
    data-use-continue-as="true"
    ></div>
</div>

설정

위의 설정 외에도 다음을 변경할 수 있습니다.

설정	HTML5 속성	설명	옵션
`auto_logout_link`	`data-auto-logout-link`	이 기능을 사용하면 사용자가 로그인할 때 버튼이 로그아웃 버튼으로 바뀝니다.	`false`, `true`
`onlogin`	`data-onlogin`	로그인 절차가 완료될 때 실행할 JavaScript 함수입니다.	`Function`
`scope`	`data-scope`	로그인 중에 요청할 권한 리스트입니다.	`public_profile`(기본) 또는 쉼표로 구분된 권한 리스트
`size`	`data-size`	버튼 크기 옵션 중 하나를 선택합니다.	`small`, `medium`, `large`
`default_audience`	`data-default-audience`	쓰기 권한을 요청할 때 작성될 게시물의 기본 공개 대상을 선택합니다.	`everyone`, `friends`, `only_me`

마이그레이션

이전 버튼이 새로운 버튼으로 마이그레이션됩니다. 다음 표에서 자세히 확인해보세요.

이전 버튼	이전 높이	새로운 버튼	새로운 높이
아이콘	18픽셀	사용 중단	사용 중단
소형 버튼	18픽셀	소형 버튼	20픽셀
중간	22픽셀	소형 버튼	20픽셀
대형 버튼	25픽셀	소형 버튼	20픽셀
특대형 버튼	39픽셀	소형 버튼	20픽셀

새로운 {Name}님으로 계속 버튼에는 이전 버튼에는 필요하지 않은 button_type 매개변수가 추가됩니다. 이 매개변수는 Facebook으로 계속 또는 Facebook으로 로그인 버튼을 지정하는 데 사용됩니다. 버튼 유형을 지정하지 않으면 버튼이 새로운 소형 버튼으로 표시됩니다. 이 크기는 이전 버튼과 비교하여 중간 크기입니다. x-large 버튼의 경우 약간 축소될 수 있습니다. button_type 매개변수를 지정하면 버튼이 지정된 대로 표시됩니다.

최대한 빠르게 JavaScript SDK를 실행하여 버튼을 읽어들이는 속도를 높일 수 있습니다. 하지만 시스템은 웹페이지와 JavaScript가 읽어들이기를 완료한 후에 버튼을 읽어들이며, 그런 다음 iframe을 만들고 버튼을 표시하기 위한 리소스를 읽어들일 수 있습니다.

 <div
    class="fb-login-button"
    data-max-rows="1"
    data-size="<medium, large>"
    data-button-type="continue_with"
    data-width="<100% or px>"
    data-scope="<comma separated list of permissions, e.g. public_profile, email>"
></div>
}

현지화:

버튼을 다른 언어로 읽어들이려면 해당 언어에 대한 JavaScript SDK를 실행해야 합니다. JavaScript SDK 현지화에 대한 자세한 내용은 소셜 플러그인 및 JavaScript SDK를 사용한 현지화를 참조하세요.

FAQ

사용자 로그인에 이 버튼을 사용하려면 어떻게 해야 하나요?

사용자가 로그인 버튼을 클릭하고 로그인 대화 상자를 승인하여 로그인 플로를 완료하면 앱에서 이제 JavaScript용 Facebook SDK를 사용하여 해당 사용자 대신 API를 호출할 수 있습니다.

여기에서는 추가로 설정할 사항이 없지만 버튼의 onlogin 설정을 사용하여 로그인 시 실행될 고유 JavaScript 함수를 적용할 수 있습니다.

서버 측 등록 코드와 함께 로그인 버튼을 사용할 수 있나요?

사용할 수는 있지만 JavaScript SDK도 부분적으로 사용해야 합니다. 버튼을 클릭하여 시작한 로그인 절차가 완료되면 SDK에서 FB.getLoginStatus()를 사용하여 authResponse 개체에 액세스합니다. 이 함수를 사용하면 응답 개체를 서버 측 코드에 전달하여 등록을 완료할 수 있습니다.

거부된 권한을 요청하는 것은 버튼에 표시된 동사와 맞지 않는 액션이므로 Facebook 로그인 버튼에서는 재요청을 지원하지 않습니다. 권한을 재요청해야 하는 경우 맞춤 버튼을 설정하고 웹용 Facebook 로그인 문서에 설명된 대로 FB.login()을 사용합니다.

이 버튼은 렌더링되지 않습니다.

<div> 태그는 XFBML이라는 기술을 사용하여 렌더링된 버튼으로 변환됩니다. XFBML은 SDK의 JavaScript를 사용하여 페이지를 구문 분석하고 대체합니다. SDK init 메서드가 실행된 후에(예: 동적으로 구성된 대화 상자에서) 페이지 콘텐츠를 동적으로 수정하여 이러한 div를 추가하는 경우, FB.XFBML.parse()를 다시 호출해야 변환이 적용됩니다.

로그인 버튼

플러그인 구성 도구