ログインボタン

ログインボタンを利用すると、ウェブサイトやウェブアプリでFacebookログインプロセスを簡単に呼び出せます。

利用者がアプリにログインしていない場合は、このボタンが表示され、クリックするとログインフローを開始するログインダイアログがポップアップ表示されます。すでにログインしている利用者にはボタンは表示されませんが、ログアウトボタンを表示させるように設定することもできます。

ログアウトボタンを表示する場合、利用者がこのボタンを使用してログアウトすると、アプリとFacebookの両方からログアウトします。

ログインボタンはJavaScript SDKと連携することのみを目的として構成されています。モバイルアプリを構築している場合や、FacebookのJavaScript SDKを利用できない場合は、該当するタイプのアプリ向けのログインフローガイドに従ってください。

以前のバージョンの[ログイン]ボタンは[Facebookでログイン]ボタンに置き換えられました。詳しくは、「マイグレーション」をご覧ください。

プラグイン設定ツール

[{Name}としてログイン]ボタン

[{Name}としてログイン]ボタンには、「{persons' name}としてログイン」というテキストが表示され、利用者が同じブラウザーでFacebookにログインしている場合に、その利用者のFacebookのプロフィール画像を表示させることもできます。[{Name}としてログイン]ボタンを使用するには、まずJavaScript SDKを読み込む必要があります。JavaScript SDKの設定方法については、JavaScript SDKのクイックスタートをご覧ください。ボタンの設定にdata-use-continue-as="true"を追加し、[{Name}としてログイン]を有効にします。

[{Name}としてログイン]ボタンの高さは変更できません。

最大幅を超えるパラメーターのサイズを選択した場合、ボタンはデフォルトの最大幅に設定されます。

[{Name}としてログイン]ボタンのベストプラクティス

[{Name}としてログイン]ボタンは、クリック数やエンゲージメントを増やす場合に便利です。利用者は自分のプロフィール写真と名前をログインボタンで確認できるため、アプリがよりカスタマイズされている印象を与えることができます。

その結果、そのコンテキストにおいて自分の名前やプロフィール写真が表示されると予期していない利用者にとっては、混乱を生じさせることにもなります。[としてログイン]をアプリで表示するべきかどうかについて確認するには、次の項目を考慮してください。

[{Name}としてログイン]がアプリに適していないと考えられる場合であっても、[Facebookでログイン]という新しいJavaScript SDKボタンをお試しください。

おすすめの使用事例

Facebookではグローバルなユーザーベースを提供しています。地域が異なれば、利用者が想定する内容も変わってきます。このボタンを使用する際には、利用者の想定を考慮してください。

使用が適しているケース

• ソーシャルアプリ:
  ソーシャルアプリの場合、利用者は他の利用者とのつながりを想定しています。このような場合は、[{Name}としてログイン]がより有効であることがわかっています。

• ターゲットとなるマーケットで利用者が携帯電話をシェアしている:
  複数の利用者が同じ携帯電話を使用している場合、[{Name}としてログイン]があれば、正しいアカウントを使用していることを利用者が確認できます。

使用を避けるべきケース

• 新たにリリースするアプリ:
  利用者が定期的に利用する定番のアプリや使い慣れたアプリと違って、マーケットに新たにリリースするアプリの場合、自分の名前とプロフィール写真が自動的に表示されると、利用者が戸惑う可能性が高くなります。

• ターゲットとなるマーケットで、利用者がプライバシーに関して懸念を持っている:
  多くの国で、プロフィール画像は非常にプライベートなものであると考えられています。そのため、このようなマーケットでは、ログインする利用者のプロフィール画像が表示される[{Name}としてログイン]の使用を避けることをおすすめします。

ログインボタンのベストプラクティス

Facebookログインを使用する際の一般的なベストプラクティスに従ってください。[{Name}としてログイン]を使用する場合は、特に次の2点に従うことが大切です。

• ログアウトの方法を提示する(ポリシーにより必須)
• テストと測定 - 利用者の感じ方とコンバージョンにどのような影響を与えるのかを特定します

検討対象となるその他のベストプラクティス:

• ログインの動作を明確にする
• ログインボタンの読み込み中にはプレースホルダーやスピナーを表示し、ボタンの読み込みが完了したら削除します。コードサンプル:

<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>

設定

上記の設定の他にも、次の設定を変更できます。

マイグレーション

以前のボタンは新しいボタンに移行されます。次は新旧の対応表です。

新しい[{Name}としてログイン]ボタンには、button_typeというパラメーターがあります。旧バージョンのボタンではこのパラメーターは必須ではありません。[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を利用したローカライズ」をご覧ください。

よくある質問

ボタンを使って利用者がログインできるようにするには、どうすればよいですか。

ログインボタンがクリックされ、ログインダイアログが承認される(ログインフローが完了する)ことによって、JavaScript用Facebook SDKをアプリで使用して、その利用者の代わりにAPI呼び出しを実行できます。

ここでは追加の設定は不要ですが、ボタンでonlogin設定を使用して、ログイン時に実行される独自のJavaScript関数を呼び出すことができます。

サーバー側の登録コードでログインボタンを使用できますか。

使用できます。ただし、部分的にJavaScript SDKを使用する必要があります。ログインボタンのクリックによるログインプロセスが完了すると、SDKではFB.getLoginStatus()を使用してauthResponseオブジェクトにアクセスできるようになります。これを使用して、サーバー側のコードに応答オブジェクトを渡し、存在するすべての登録を完了できます。

ログインボタンを使用して、利用者が拒否したアクセス許可のリクエストを再送信できますか。

ログインボタンはリクエストの再送信には対応していません。拒否されたアクセス許可をリクエストするという行為は、ログインボタンの名前に適さないためです。アクセス許可のリクエストを再送信する場合、カスタムボタンを組み込み、ウェブ用Facebookログインのドキュメントで説明されているようにFB.login()を使用します。

ボタンが表示されません。

<div>タグは、XFBMLという技術を使用して表示ボタンに変換されます。この技術は、SKDのJavaScriptを使用して、ページを解析し置換を行います。SDK initメソッドの実行後にページコンテンツを動的に変換してdivを追加する場合(動的に構築されるダイアログなどの場合)、変換内容を有効にするにはFB.XFBML.parse()をもう一度呼び出す必要があります。