Cara Menambahkan Login Sosial ke Situs Web Direktori Bisnis WordPress Anda

Bisnis berwawasan ke depan selalu mencari cara untuk meningkatkan rasio konversi, jadi mereka peduli dengan pengalaman pengguna di situs web mereka. Itulah mengapa banyak perusahaan menggunakan login sosial, juga dikenal sebagai fitur masuk sosial, di situs web mereka.

Bagi pengunjung situs web, login sosial berarti mereka dapat melewati prosedur pendaftaran yang diperlukan untuk membuat akun baru dan cukup masuk dengan satu klik. Ini adalah alternatif yang benar-benar nyaman untuk formulir pendaftaran tradisional yang meningkatkan UX.

Pada saat yang sama, bagi pemilik situs web, login sosial adalah fitur berguna yang dapat membantu menyederhanakan verifikasi pengguna sekaligus memberikan akses yang lebih andal ke data pengguna untuk personalisasi .

Dalam tutorial singkat ini, kami akan menunjukkan kepada Anda cara mengatur ekstensi Otentikasi HivePress sehingga Anda dapat mengizinkan pengunjung situs web Anda untuk masuk melalui Facebook dan Google. Kami akan menjelaskan langkah demi langkah cara mendapatkan ID Aplikasi Facebook dan ID Klien Google dan mengintegrasikannya dengan benar ke situs web Anda.

Sebelum kita mulai, penting untuk dicatat bahwa ekstensi Otentikasi didasarkan pada HivePress, plugin direktori WordPress gratis, dan hanya dapat digunakan di situs web yang didukung oleh HivePress. Jadi dalam panduan ini, kita akan menggunakan plugin HivePress bersama dengan tema direktori WordPress default, ListingHive.

Mari kita mulai!

Memasang Add-on Otentikasi

Pertama-tama, Anda perlu menginstal ekstensi Otentikasi dengan masuk ke bagian HivePress > Extensions . Kemudian pilih add-on yang diperlukan, instal dan lanjutkan dengan mengaktifkan ekstensi.

Setelah Anda menginstal add-on, Anda harus memilih metode otentikasi untuk situs web Anda. Untuk melakukannya, buka bagian HivePress > Pengaturan > Pengguna dan pilih salah satu metode yang tersedia. Jika Anda ingin mengizinkan pengguna masuk melalui Facebook dan Google, Anda perlu memilih kedua metode dan menyimpan perubahan, seperti yang ditunjukkan pada tangkapan layar di bawah.

Setelah Anda memilih metode otentikasi untuk situs web Anda, Anda dapat melanjutkan ke langkah berikutnya.

Menambahkan Tombol Masuk Facebook

Untuk menambahkan tombol "Masuk dengan Facebook" ke situs web Anda, Anda harus mendapatkan ID Aplikasi unik dari Facebook terlebih dahulu. ID ini menautkan situs web Anda dengan Facebook dan memungkinkan Anda untuk meminta detail profil Facebook (misalnya, alamat email) yang diperlukan untuk memasukkan pengguna.

Jadi, mari kita beralih ke langkah pertama.

Mendaftar di Facebook

Sebelum membuat Aplikasi Facebook, Anda harus mendaftarkan akun Pengembang Facebook. Untuk melakukannya, navigasikan ke halaman Facebook untuk Pengembang dan klik tombol Masuk atau Mulai . Kemudian, Anda harus masuk dengan akun FB Anda untuk melanjutkan. Setelah Anda memverifikasi akun Anda, Anda dapat melanjutkan ke langkah berikutnya.

Membuat Aplikasi

Setelah Anda menyelesaikan pendaftaran, Anda dapat pergi ke Dasbor Aplikasi untuk membuat aplikasi pertama Anda. Cukup klik tombol Buat Aplikasi .

Kemudian Anda harus memilih jenis aplikasi Anda. Jenis aplikasi menentukan API Facebook mana yang tersedia untuk aplikasi Anda. Cukup dengan mengatakan itu mendefinisikan fitur apa yang dapat Anda tambahkan di Dasbor Aplikasi Anda. Karena Anda ingin mengaktifkan fitur "Login Sosial" dalam kasus yang ada, Anda harus menggunakan jenis aplikasi "Konsumen".

Selanjutnya, Anda perlu mengatur nama aplikasi (misalnya, nama situs web Anda) dan memasukkan email yang valid karena semua pemberitahuan pengembang akan dikirim ke sana. Anda tidak perlu menyebutkan akun Pengelola Bisnis jika tidak memilikinya. Terakhir, klik tombol Buat Aplikasi .

Setelah membuat aplikasi, Anda akan diarahkan ke Dasbor Aplikasi. Di sini Anda perlu memilih fitur apa yang ingin Anda tambahkan ke aplikasi Anda. Cukup klik tombol Set Up di bagian Facebook Login , dan di halaman berikutnya, pilih platform “Web”.

Kemudian, Anda akan melihat formulir penyiapan, tempat Anda dapat memasukkan detail situs web Anda. Agar pengguna dapat masuk ke situs web Anda melalui Facebook, cukup mengisi kolom URL Situs saja. Tetapi jika Anda adalah pengguna yang lebih berpengalaman, Anda juga dapat mengisi kolom lainnya.

Langkah selanjutnya adalah menavigasi ke bagian Pengaturan > Dasar di bilah sisi kiri.

Pada halaman pengaturan, Anda harus:

• Masukkan domain situs web Anda.
• Tunjukkan URL Kebijakan Privasi, sehingga pengguna dapat membacanya sebelum masuk.
• Tentukan Petunjuk Penghapusan Data (halaman dengan info tentang bagaimana pengunjung situs web Anda dapat menghapus data mereka) .
• Terakhir, pilih kategori tempat situs web Anda berada.

Setelah Anda menambahkan semua detail yang diperlukan, simpan perubahan.

Mengaktifkan Login Sosial

Oke, Anda baru saja membuat aplikasi. Sekarang Anda perlu mengubah mode Aplikasi Anda ke "Langsung" dan menyalin ID Aplikasi.

Terakhir, buka situs web Anda, navigasikan ke Dasbor WP > HivePress > Pengaturan > Integrasi , tempel ID Aplikasi Facebook Anda di bidang ID Aplikasi , dan simpan perubahan.

Itu dia! Sekarang seharusnya ada tombol Facebook di formulir masuk Anda yang memungkinkan pengguna masuk ke situs web Anda melalui akun Facebook mereka. Namun, Anda mungkin harus menunggu beberapa menit sebelum perubahan akan dilakukan.

Sekarang mari kita beralih ke bagian selanjutnya dari tutorial ini untuk membuat dan menambahkan tombol Google Login.

Menambahkan Tombol Masuk Google

Jika Anda ingin menambahkan tombol "Masuk dengan Google" ke situs web Anda yang didukung oleh HivePress, Anda perlu mendapatkan ID Klien unik dari Google yang akan menautkan situs web Anda dengan API autentikasi Google. Jadi, ayo lakukan!

Membuat Proyek Baru

Langkah pertama adalah membuat proyek Google API baru (Anda dapat menggunakan proyek yang sudah ada jika Anda sudah memilikinya). Untuk melakukannya, buka Google API Console dan klik tombol Create Project . Kemudian Anda perlu memasukkan nama proyek Anda dan klik tombol Buat .

Sekarang Anda harus pergi ke bagian layar persetujuan OAuth dan pilih opsi layar persetujuan OAuth (internal atau eksternal) sesuai dengan persyaratan situs web Anda. Demi tutorial ini, kita akan memilih opsi Eksternal .

Kemudian Anda akan diarahkan ke formulir Pendaftaran Aplikasi. Dalam formulir ini, Anda perlu:

• Tetapkan nama Aplikasi (mis., nama situs web Anda) .
• Tunjukkan email dukungan pengguna dan email pengembang sehingga Google dapat memberi tahu Anda tentang perubahan apa pun pada proyek Anda.
• Tentukan tautan ke beranda Anda, halaman kebijakan privasi, dan tautan ke halaman persyaratan layanan Anda.
• Terakhir, tambahkan domain situs web Anda.

Setelah selesai, klik tombol Simpan . Anda dapat melewati langkah-langkah lain dalam formulir pendaftaran dan kembali ke Dasbor Anda.

Langkah selanjutnya adalah membuat kredensial API, yaitu – OAuth Client ID. Anda dapat melakukannya dengan membuka bagian Kredensial > Buat Kredensial > ID Klien OAuth .

Dalam bagian ini, Anda harus mengisi bidang nama dan memasukkan URL situs web Anda di bidang "Asal JavaScript yang Diotorisasi". Secara opsional, Anda dapat mengisi bidang "URL pengalihan resmi" jika Anda ingin menentukan jalur di mana pengguna akan diarahkan setelah mereka masuk dengan Google.

Setelah selesai, klik tombol Simpan .

Mengaktifkan Login Sosial

Akhirnya, Anda mendapatkan ID klien yang unik. Sekarang Anda perlu menyalin dan menempelkannya di bagian Dasbor WP > HivePress > Pengaturan > Integrasi > ID Klien . Jangan lupa untuk menyimpan perubahan.

Kesimpulan

Itu dia! Dengan mengikuti langkah-langkah di atas, Anda dapat dengan mudah mengatur ekstensi Otentikasi dan memungkinkan pengguna Anda untuk masuk melalui layanan pihak ketiga seperti Facebook dan Google. Setelah Anda menyelesaikan semua langkah, Anda akan memiliki tombol Facebook dan Google yang sama di formulir login, seperti yang ditunjukkan pada gambar di bawah.

Jika Anda mengalami masalah saat menambahkan tombol login sosial, coba nonaktifkan plugin pihak ketiga (mungkin ada masalah caching atau konflik dengan plugin pihak ketiga) . Juga, pastikan Anda mengaktifkan metode otentikasi di bagian HivePress > Pengaturan > Pengguna dan menyimpan perubahan.

Selain itu, jika Anda ingin mengoptimalkan situs web Anda, kami sarankan untuk memeriksa tutorial kami tentang cara mempercepat situs web yang dibuat oleh HivePress.