ログインボタン

ログインボタンは、Facebookログイン処理をウェブサイトまたはウェブアプリでトリガーする簡単な方法です。

まだアプリにログインしていないユーザーには、このボタンが表示されます。ボタンをクリックすると[ログイン]ダイアログが開かれ、ログインフローが始まります。すでにログイン済みのユーザーにはボタンは表示されませんが、ログアウトボタンを表示するようにすることもできます。

ユーザーがログインボタンを使用してログアウトすると、アプリとFacebookの両方からログアウトします。

ログインボタンは、必ずJavaScript SDKと連携して機能するように設計されています。モバイルアプリを構築している場合や、JavaScript SDKを使用できない場合は、代わりに該当するアプリのログインフローガイドに従ってください。

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

プラグイン設定ツール

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

[{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で続行]または[Facebookログイン]ボタンのいずれかを、次のように指定します。ボタンタイプを指定しない場合、新しいSmallサイズのボタンとして表示されます。このサイズは、旧式のボタンのMediumサイズに相当します。x-largeの場合、やや小さくなります。button_typeパラメーターを指定した場合、ボタンは指定どおりに表示されます。

できるだけ早くJavaScript SDKを開始すれば、ボタンの読み込みは早くなります。ただし、ウェブページとJavaScriptの読み込みが完了するまでシステムはボタンを読み込めません。ウェブページと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はauthResponseオブジェクトにFB.getLoginStatus()を使用してアクセスできるようになります。この関数を使用して応答オブジェクトをサーバー側のコードに渡し、そこで行われるすべての登録を完了することができます。

ログインボタンを使用して、ユーザーに却下されたアクセス許可を再度リクエストすることはできますか。

ログインボタンは、却下されたアクセス許可の再送信をサポートしていません。却下されたアクセス許可を求めることは、ログインボタンの目的に適さないためです。アクセス許可を再度リクエスト必要がある場合は、カスタムボタンを設定して、ウェブ用Facebookログインに関するドキュメントで説明されているとおりにFB.login()を使用してください。

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

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