Tombol Login

Tombol Login adalah cara mudah untuk memicu proses Facebook Login di situs web atau aplikasi web Anda.

Jika seseorang belum masuk ke aplikasi Anda, mereka akan melihat tombol ini, dan mengekliknya akan membuka dialog Login, memulai alur login. Orang yang sudah login tidak akan melihat tombol apa pun, atau Anda juga dapat memilih untuk menampilkan tombol logout kepada mereka.

Jika Anda menunjukkan tombol logout, ketika orang menggunakannya untuk logout, mereka akan logout, baik dari aplikasi Anda maupun dari Facebook.

Tombol Login hanya dirancang untuk bekerja sehubungan dengan JavaScript SDK — jika Anda sedang membuat aplikasi seluler atau tidak dapat menggunakan JavaScript SDK kami, Anda harus mengikuti alur login untuk jenis aplikasi itu.

Tombol Lanjutkan dengan Facebook menggantikan tombol Login versi sebelumnya. Untuk informasi selengkapnya, lihat Migrasi.

Konfigurator Plugin

Tombol Lanjutkan sebagai {Name}

Tombol Lanjutkan sebagai {Name} memiliki teks "Lanjutkan sebagai {persons' name}" dan secara opsional mencakup foto profil Facebook orang tersebut jika mereka masuk ke Facebook di browser yang sama. Untuk menggunakan tombol Lanjutkan sebagai {Name}, Anda harus terlebih dahulu memuat JavaScript SDK. Untuk petunjuk tentang menyiapkan JavaScript SDK, lihat Memulai Cepat JavaScript SDK. Aktifkan Lanjutkan sebagai {Name} dengan menambahkan data-use-continue-as="true" ke pengaturan untuk tombol Anda.

Tinggi tombol Lanjutkan sebagai {Name} tidak dapat disesuaikan.

Jika Anda memilih ukuran di luar parameter maksimum, default tombol akan menjadi lebar maksimum.

Praktik Terbaik untuk Tombol Lanjutkan sebagai {Name}

Tombol Lanjutkan sebagai {Name} bisa menjadi cara yang bagus untuk meningkatkan klik dan interaksi. Ini memungkinkan pengguna melihat foto profil dan nama mereka di tombol Login kami dan dapat membantu membuat aplikasi Anda terasa lebih personal.

Akibatnya, ini juga bisa membingungkan jika pengguna tidak mengharapkan untuk melihat nama dan foto profil mereka dalam konteks ini. Mohon pertimbangkan hal berikut untuk melihat apakah Lanjutkan sebagai adalah yang terbaik untuk aplikasi Anda.

Bahkan jika Lanjutkan sebagai {Name} tidak tepat untuk aplikasi Anda, Anda masih dapat mencoba tombol JavaScript SDK baru yang mengatakan "Lanjutkan dengan Facebook".

Kasus Penggunaan yang Disarankan

Kami melayani basis pengguna global dan wilayah yang berbeda memiliki ekspektasi pengguna yang berbeda. Hormati ekspektasi tersebut saat menggunakan tombol ini.

Terbaik saat

• Aplikasi Anda sosial:
  Ketika orang menggunakan aplikasi sosial, mereka berharap untuk terhubung dengan orang lain. Kami telah melihat Lanjutkan sebagai {Name} berkinerja baik dalam kasus ini.

• Orang-orang dalam ponsel pangsa pasar target:
  Ketika beberapa orang menggunakan ponsel yang sama, Lanjutkan sebagai {Name} dapat memberikan jaminan bahwa mereka menggunakan akun yang benar.

Hindari saat

• Aplikasi Anda baru:
  Jika aplikasi Anda baru di pasar, pengguna Anda mungkin lebih mungkin bingung tentang mengapa nama dan foto profil mereka ditampilkan secara otomatis, versus aplikasi yang sudah mapan atau familier yang pengguna berencana akan menggunakannya secara teratur.

• Orang-orang di pasar target khawatir tentang privasi:
  Di banyak negara, gambar profil dianggap sangat pribadi. Anda mungkin ingin menghindari penggunaan Lanjutkan sebagai {Name} dalam hal ini karena akan menampilkan gambar profil orang yang login.

Praktik Terbaik Tombol Login

Silakan ikuti Praktik Terbaik umum untuk menggunakan Facebook Login. Mengikuti dua praktik terbaik ini sangatlah penting ketika menggunakan Lanjutkan sebagai {Name}:

• Menyediakan cara untuk keluar (diperlukan oleh kebijakan)
• Uji dan Ukur — Identifikasikan apa dampak ini terhadap persepsi dan konversi pengguna

Beberapa kemungkinan praktik terbaik lainnya:

• Jelaskan tentang apa yang Dilakukan Proses Login
• Gunakan placeholder/pemutar saat tombol Login sedang dimuat dan hapuslah saat tombol telah dimuat. Contoh kode tersebut:

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

Pengaturan

Selain pengaturan di atas, Anda juga dapat mengubah berikut ini:

Migrasi

Tombol lama akan dimigrasi ke tombol baru. Tabel berikut menunjukkan pemetaan.

Tombol Lanjutkan sebagai {Name} yang baru memiliki parameter button_type, yang tidak diperlukan oleh tombol lama. Inilah cara Anda menentukan tombol Lanjutkan dengan Facebook atau Login dengan Facebook. Jika Anda tidak menentukan jenis tombol, tombol tersebut akan di-render sebagai tombol kecil yang baru. Ukuran ini sedang dibandingkan tombol lama. Untuk kasus x-large, tombol akan agak menciut. Jika Anda menentukan parameter button_type, tombol Anda akan muncul seperti yang ditentukan.

Anda dapat menyebabkan tombol dimuat lebih cepat dengan meluncurkan JavaScript SDK sesegera mungkin. Namun, sistem tidak dapat memuat tombol sampai halaman web dan JavaScript selesai dimuat, maka dapat membuat iframe dan memuat sumber daya untuk me-render tombol.

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

Pelokalan:

Memuat tombol di locale yang berbeda membutuhkan JavaScript SDK agar locale itu dimuat. Untuk informasi selengkapnya tentang pelokalan JavaScript SDK, lihat Pelokalan dengan Plugin Sosial dan JavaScript SDK.

Pertanyaan Umum

Bagaimana cara menggunakan ini agar pengguna bisa login?

Setelah seseorang mengeklik tombol Login, dan menerima dialog login — melengkapi alur Login — aplikasi Anda sekarang dapat menggunakan Facebook SDK untuk JavaScript guna membuat panggilan API atas nama orang itu.

Tidak ada pengaturan tambahan yang diperlukan di sini, namun Anda dapat menggunakan pengaturan onlogin di tombol untuk memicu fungsi JavaScript Anda sendiri yang akan berjalan saat login.

Bisakah saya menggunakan tombol Login dengan kode pendaftaran sisi server?

Anda bisa, namun Anda masih perlu menggunakan JavaScript SDK sebagian. Setelah proses login dimulai dengan mengeklik tombol selesai, SDK akan memiliki akses ke objek authResponse menggunakan FB.getLoginStatus(). Anda dapat menggunakan fungsi ini untuk meneruskan objek tanggapan ke kode sisi server Anda untuk menyelesaikan pendaftaran yang ada di sana.

Bisakah saya menggunakan tombol Login untuk meminta kembali izin yang telah ditolak seseorang?

Tombol Login tidak mendukung permintaan ulang karena meminta izin yang ditolak tidak sesuai dengan kata kerja pada tombol. Jika Anda perlu meminta izin lagi, atur tombol khusus dan gunakan FB.login() seperti yang dijelaskan dalam dokumentasi Facebook Login untuk Web.

Tombol tidak di-render.

Tanda <div> diubah menjadi tombol yang di-render menggunakan teknologi yang kami sebut XFBML, yang mengandalkan JavaScript di SDK untuk parse halaman dan membuat penggantian. Jika Anda secara dinamis mengubah konten halaman untuk menambahkan div ini setelah metode init SDK telah berjalan, (misalnya: dalam dialog yang dibuat secara dinamis) Anda perlu memanggil FB.XFBML.parse() lagi agar transformasi dapat dilakukan.