Facebook 로그인

로그인 버튼

로그인 버튼은 웹사이트나 웹 앱에서 Facebook 로그인 프로세스를 트리거할 수 있는 간단한 방법입니다.

아직 앱에 로그인하지 않은 사용자에게 이 버튼이 표시되며, 사용자가 버튼을 클릭하면 로그인 대화 상자가 열려 로그인 플로가 시작됩니다. 이미 로그인한 사용자에게는 로그인 버튼이 보이지 않으며, 그러한 사용자에게는 로그아웃 버튼을 표시할 수도 있습니다.

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

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

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

플러그인 구성 도구

Width
버튼 크기
버튼 텍스트
버튼 레이아웃 모양
[?]
코드 받기

{Name}(으)로 계속하기 버튼

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

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

버튼 크기높이너비너비 맞춤 설정?

Small

20px

200px

아니요

Medium

28px

200~320px

예

Large

40px

240~400px

예

최대 매개변수를 초과하는 크기를 선택할 경우 버튼은 최대 너비로 기본 설정됩니다.

{Name}(으)로 계속하기 버튼의 모범 사례

{Name}(으)로 계속하기 버튼은 클릭수와 참여를 높이는 데 좋은 방법이 될 수 있습니다. 로그인 버튼에 사용자의 프로필 사진과 이름이 보이므로 앱에 더욱 개인화된 느낌을 줄 수 있습니다.

한편으로는 사용자가 이 컨텍스트에서 자신의 이름과 프로필 사진을 볼 것을 예상하지 못한 경우에는 혼란을 줄 수도 있습니다. ~(으)로 계속하기가 자신의 앱에 적절한지 확인하려면 다음을 고려해 보세요.

{Name}(으)로 계속하기가 자신의 앱에 적절하지 않더라도 'Facebook으로 계속하기'라고 표시된 새로운 JavaScript SDK 버튼을 시험해볼 수도 있습니다.

추천 사용 사례

Facebook은 전 세계의 사용자에게 서비스를 제공하고 지역마다 사용자의 기대가 다릅니다. 이 버튼을 사용할 때는 이러한 사용자의 기대를 존중하세요.

사용이 적절한 경우

  • 소셜 앱:
    사용자가 소셜 앱을 사용할 때는 다른 사람과 연결될 것을 기대합니다. 이 경우에는 {Name}(으)로 계속하기가 좋은 성과를 거두었습니다.

  • 타겟 시장의 사용자가 휴대폰을 공유:
    여러 사용자가 동일한 휴대폰을 사용하는 경우 {Name}(으)로 계속하기는 사용자가 적절한 계정을 사용하고 있다는 확신을 줄 수 있습니다.

사용이 적절하지 않은 경우

  • 신규 앱:
    사용자가 정기적으로 사용하려는 기존 앱이나 친숙한 앱과 달리, 새로 출시된 앱의 경우에는 사용자가 자신의 이름과 프로필 사진이 자동으로 표시되는 것에 혼란스러워할 가능성이 큽니다.

  • 타겟 시장의 사용자가 개인정보 보호에 대해 우려하는 경우:
    많은 국가에서 프로필 이미지는 매우 사적인 정보로 간주됩니다. {Name}(으)로 계속하기는 로그인하는 사용자의 프로필 이미지를 표시하므로 이와 같은 경우에는 사용을 삼가는 것이 좋습니다.

로그인 버튼 모범 사례

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

마이그레이션

기존 버튼은 새로운 버튼으로 마이그레이션됩니다. 다음 표는 매핑을 보여줍니다.

기존 버튼기존 높이새로운 버튼새로운 높이

아이콘

18px

사용 중단

사용 중단

Small

18px

Small

20px

Medium

22px

Small

20px

Large

25px

Small

20px

XLarge

39px

Small

20px

새로운 {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 로그인 문서에 나와 있는 대로 FB.login()을 사용하세요.

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

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