Tombol Login adalah cara sederhana untuk memicu proses Facebook Login di situs web atau aplikasi web Anda.
Jika seseorang belum login ke aplikasi Anda, maka orang tersebut akan melihat tombol ini, dan dialog Login akan menyembul saat orang tersebut mengkliknya, sehingga mengawali alur login. Orang yang sudah login tidak akan melihat tombol apa pun, atau Anda juga dapat memilih menampilkan tombol logout untuk mereka.
Jika Anda menampilkan tombol logout, ketika orang menggunakannya untuk logout, maka mereka logout dari aplikasi Anda dan dari Facebook.
Tombol Login hanya dirancang untuk berfungsi dengan SDK JavaScript - jika Anda membangun aplikasi seluler atau tidak dapat menggunakan SDK JavaScript kami, maka sebaiknya Anda mengikuti panduan alur login untuk jenis aplikasi itu.
Tombol Lanjutkan dengan Facebook menggantikan tombol Login versi sebelumnya. Untuk informasi selengkapnya, lihat Migrasi.
Tombol Lanjutkan sebagai {Name} memiliki teks "Lanjutkan sebagai {persons' name}" dan secara opsional menyertakan foto profil Facebook orang tersebut jika login ke Facebook di browser yang sama. Untuk menggunakan tombol Lanjutkan sebagai {Name}, Anda harus memuat SDK JavaScript terlebih dahulu. Untuk petunjuk mengenai penyiapan SDK JavaScript, buka Tutorial Singkat SDK JavaScript. Aktifkan Lanjutkan sebagai {Name} dengan menambahkan data-use-continue-as="true" ke pengaturan tombol Anda.
Tinggi tombol Lanjutkan sebagai {Name} tidak dapat disesuaikan.
| Ukuran Tombol | Tinggi | Lebar | Sesuaikan Lebar? |
|---|---|---|---|
Kecil | 20 piksel | 200 piksel | Tidak |
Sedang | 28 piksel | 200 - 320 piksel | Ya |
Besar | 40 piksel | 240 - 400 piksel | Ya |
Jika Anda memilih ukuran yang melebihi parameter maksimal, tombol akan diatur secara default ke lebar maksimal.
Tombol Lanjutkan Sebagai {Name} dapat menjadi cara terbaik untuk meningkatkan jumlah klik dan interaksi. Dengan ini, pengguna dapat melihat foto profil dan namanya di tombol Login dan membantu membuat aplikasi Anda terasa lebih personal.
Akibatnya, ini juga bisa membingungkan jika pengguna tidak mengira nama dan foto profilnya akan muncul dalam konteks ini. Harap pertimbangkan hal-hal berikut untuk menilai apakah Lanjutkan Sebagai sesuai untuk aplikasi Anda.
Meskipun Lanjutkan Sebagai {Name} tidak sesuai untuk aplikasi Anda, Anda masih dapat mencoba tombol SDK JavaScript baru yang bertuliskan "Lanjutkan Dengan Facebook".
Kami menyajikan basis pengguna global dan setiap wilayah memiliki ekspektasi pengguna yang berbeda. Perhatikan ekspektasi tersebut saat menggunakan tombol ini.
Aplikasi Anda bersifat sosial:
Saat menggunakan aplikasi sosial, orang berharap untuk menjalin hubungan dengan orang lain. Kami telah melihat Lanjutkan Sebagai {Name} berkinerja baik dalam kasus seperti ini.
Orang-orang di pangsa pasar target menggunakan ponsel secara berkelompok:
Saat dua orang atau lebih menggunakan ponsel yang sama, Lanjutkan Sebagai {Name} dapat memastikan bahwa mereka menggunakan akun yang benar.
Aplikasi Anda baru:
Jika aplikasi Anda masih baru di pasar, pengguna Anda akan lebih mungkin bingung saat melihat nama dan foto profilnya yang otomatis ditampilkan, dibandingkan dengan aplikasi lain yang biasa dia gunakan.
Orang-orang di pasar target mengkhawatirkan privasi:
Di banyak negara, foto profil dianggap sebagai sesuatu yang sifatnya sangat pribadi. Anda mungkin ingin menghindari penggunaan Lanjutkan Sebagai {Name} dalam kasus ini, karena ini akan menampilkan foto profil orang yang akan login.
Harap ikuti Praktik Terbaik untuk menggunakan Facebook Login. Sangat penting untuk mengikuti dua praktik terbaik ini ketika menggunakan Lanjutkan Sebagai {Name}:
Praktik terbaik lainnya yang memungkinkan:
<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>Selain pengaturan di atas, Anda juga dapat mengubah berikut ini:
| Pengaturan | Atribut HTML5 | Keterangan | Opsi |
|---|---|---|---|
|
| Jika diaktifkan, tombol tersebut akan berubah menjadi tombol logout saat pengguna login. |
|
|
| Fungsi JavaScript yang harus dipicu saat proses login selesai. |
|
|
| Daftar izin yang akan diminta selama login. |
|
|
| Pilih salah satu opsi ukuran untuk tombolnya. |
|
|
| Menentukan pemirsa mana yang akan dipilih secara default, saat meminta izin tulis. |
|
Tombol lama akan dimigrasikan ke tombol baru. Tabel berikut menampilkan pemetaannya.
| Tombol Lama | Tinggi Lama | Tombol Baru | Tinggi Baru |
|---|---|---|---|
Ikon | 18 piksel | Penghentian layanan | Penghentian layanan |
Kecil | 18 piksel | Kecil | 20 piksel |
Sedang | 22 piksel | Kecil | 20 piksel |
Besar | 25 piksel | Kecil | 20 piksel |
Ekstra Besar | 39 piksel | Kecil | 20 piksel |
Tombol Lanjutkan sebagai {Name} baru memiliki parameter yang disebut button_type, yang tidak diperlukan oleh tombol lama. Ini adalah cara Anda menentukan tombol Lanjutkan dengan Facebook atau Login dengan Facebook. Jika Anda tidak menentukan jenis tombol, maka tombol akan dirender sebagai tombol baru berukuran kecil. Ukuran ini adalah ukuran sedang dibandingkan dengan tombol lama. Untuk kasus x-large, tombolnya akan sedikit lebih kecil. Jika Anda menentukan parameter button_type, tombol Anda akan muncul sebagaimana ditentukan.
Anda dapat membuat tombol dimuat lebih cepat dengan meluncurkan SDK JavaScript sesegera mungkin. Akan tetapi, sistem tidak dapat memuat tombol tersebut sebelum halaman web dan JavaScript telah selesai dimuat, dan kemudian sistem membuat iframe dan memuat sumber daya yang diperlukan untuk menampilkan 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>
}Diperlukan SDK JavaScript untuk memuat tombol dalam lokale yang berbeda. Untuk informasi selengkapnya tentang pelokalan SDK JavaScript, lihat Pelokalan dengan Plugin Sosial dan SDK JavaScript.
Setelah seseorang mengklik tombol Login dan menerima dialog login — menyelesaikan alur Login — aplikasi Anda kini dapat menggunakan SDK Facebook untuk JavaScript untuk membuat panggilan API mewakili orang tersebut.
Anda tidak memerlukan penyiapan tambahan setelah ini, tetapi Anda dapat menggunakan pengaturan onlogin di tombol tersebut untuk memicu fungsi JavaScript Anda sendiri yang akan dijalankan saat login.
Ya, tetapi Anda masih harus menggunakan sebagian SDK JavaScript. Setelah proses login yang dimulai dengan mengklik 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 masih ada di sana.
Tombol Login tidak mendukung permintaan ulang karena tindakan meminta izin yang sebelumnya telah ditolak tidak sesuai dengan kata-kata pada tombol tersebut. Jika Anda harus meminta ulang izin, siapkan tombol khusus dan gunakan FB.login() seperti yang dijelaskan di dokumentasi Facebook Login untuk Web.
Tag <div> diubah menjadi tombol yang ditampilkan menggunakan teknologi bernama XFBML, yang memanfaatkan JavaScript di dalam SDK untuk mem-parsing halaman dan melakukan penggantian. Jika Anda secara dinamis memodifikasi konten halaman untuk menambahkan div setelah metode SDK init berjalan, (mis. dalam sebuah dialog yang dikonstruksi secara dinamis), Anda perlu memanggil FB.XFBML.parse() lagi agar perubahan berlaku.
