Cara Menambahkan Login Sosial ke Situs Web Direktori WordPress Anda

Bisnis berwawasan ke depan selalu mencari cara untuk meningkatkan rasio konversi, jadi mereka peduli dengan pengalaman pengguna di situs web mereka. Itu sebabnya 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 sekali klik. Ini adalah alternatif yang sangat 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 cara menyiapkan ekstensi HivePress Social Login 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 situs web Anda dengan benar.

Sebelum kita mulai, penting untuk dicatat bahwa ekstensi Social Login 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 WordPress serbaguna standarnya, ListingHive.

Mari kita mulai!

Menginstal Add-on Login Sosial

Pertama-tama, Anda perlu menginstal ekstensi Social Login dengan masuk ke WP Dashboard > Plugins > Add New > Upload Plugin . Kemudian pilih file ZIP ekstensi, instal dan lanjutkan dengan mengaktifkan ekstensi.

Setelah Anda menginstal add-on, Anda harus memilih metode otentikasi untuk situs web Anda. Untuk melakukannya, buka WP Dashboard > HivePress > Settings > Users 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 autentikasi untuk situs web Anda, Anda dapat melanjutkan ke langkah berikutnya.

Menambahkan Tombol Login Facebook

Untuk menambahkan tombol "Masuk dengan Facebook" ke situs web Anda, Anda perlu mendapatkan ID Aplikasi unik dari Facebook terlebih dahulu. ID ini menautkan situs web Anda dengan Facebook dan memungkinkan Anda untuk meminta detail profil Facebook (mis., alamat email) yang diperlukan untuk login 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 for Developers dan klik tombol Log In atau Get Started . Kemudian, Anda harus masuk dengan akun FB Anda untuk melanjutkan. Setelah Anda memverifikasi akun Anda, Anda dapat pindah 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 menentukan fitur apa yang dapat Anda tambahkan di Dasbor Aplikasi Anda. Karena Anda ingin mengaktifkan fitur "Masuk Sosial" dalam kasus yang ada, Anda perlu menggunakan jenis aplikasi "Konsumen".

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

Setelah membuat aplikasi, Anda akan dialihkan 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 bidang 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 sidebar 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 datanya) .
• Terakhir, pilih kategori yang dimiliki situs web Anda.

Setelah Anda menambahkan semua detail yang diperlukan, simpan perubahan.

Mengaktifkan Login Sosial

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

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

Itu dia! Sekarang harus 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 dilakukan.

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

Menambahkan Tombol Masuk Google

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

Membuat Proyek Baru

Langkah pertama adalah membuat proyek Google API baru (Anda dapat menggunakan proyek yang sudah ada jika 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 memilih opsi layar persetujuan OAuth (internal atau eksternal) sesuai dengan persyaratan situs web Anda. Demi tutorial ini, kami 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 agar 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 – ID Klien OAuth. Anda dapat melakukannya dengan membuka bagian Kredensial > Buat Kredensial > ID Klien OAuth .

Di 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 ke mana pengguna akan dialihkan setelah mereka masuk dengan Google.

Setelah selesai, klik tombol Simpan .

Mengaktifkan Login Sosial

Akhirnya, Anda mendapatkan ID klien unik. Sekarang Anda perlu menyalin dan menempelkannya di WP Dashboard > HivePress > Settings > Integrations > Client ID . Jangan lupa untuk menyimpan perubahan.

Kesimpulan

Itu dia! Dengan mengikuti langkah-langkah di atas, Anda dapat dengan mudah mengatur ekstensi Social Login dan mengizinkan 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 kesulitan menambahkan tombol login sosial, coba nonaktifkan plugin pihak ketiga (mungkin ada masalah caching atau konflik dengan plugin pihak ketiga) . Selain itu, pastikan Anda mengaktifkan metode autentikasi di WP Dashboard > HivePress > Settings > bagian Users dan simpan perubahannya.

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

Anda mungkin juga ingin memeriksa beberapa artikel kami yang lain:

• Daftar plugin direktori WordPress terbaik;
• Daftar tema direktori WordPress gratis paling populer.