hey everyone welcome to my youtube
channel today we are learning about how
we can add
social login to our wordpress website
and before we proceed with the tutorial
please subscribe my channel like and
comment
okay let's proceed with the tutorial now
so first we will
go to the dashboard assuming you are
already logged in
now we will add a new plugin
plugin name as super socializer
that's the plugin which you'll be
installing install the plugin
okay let's activate the plugin now
now we will go to social login
and enable the social login here
once enable hit save changes
and now we will start with the google
let's
select the google hit save changes
and now as you can see that is asking
for the secret keys
now we will generate the google client
id
and google client secret by using
the developer console let's go to that
so once you open the developer console
you will see
the new project option we're going to
create new project
let's name it social login and
create the project
here we have our new project ready now
we're gonna go to
oauth screen
and from there on we will select
external
click on create let's
add an application name as social login
no need for logo at the moment on
authorized domain we will add
our website url
so here's the domain hit save
and then we'll go to credentials
and now we will click create credentials
and then oauth client id
now application type is web application
because we are using it
on our web
on authorized redirect uris we will add
our
url
and we have our url let's hit create
okay we have our client id and client
secret
now we have to update it here let's copy
it
now let's do the same for client secret
i hit save changes
okay after saving the changes
we will check it on incognito window to
see if we are seeing the login option
let's copy the url open the incognito
window
okay now we'll go to the back end to
check if you're seeing the login option
here we have our login with google
now let's try logging in
okay i'm gonna log in using this id
okay i'm successfully logged in
here we go i'm successfully logged in
now
let's check out the email to see if i
have received a new user email
so i'm gonna go to my gmail
okay as you can see
it it crea it created the new user
with the social login okay now uh let's
check it on our product page
if the login with google is showing up
there or not
let's go to the shop
i have added a dummy product here for
you guys to show
let's click on that
add this product to cart
view card
let's go to the checkout
okay here we will see login with google
so i'm gonna enable the setting on the
plugin for that
let's go to the dashboard and plug in
setting plugin settings
super socializer social login
and then advanced configuration
now i'm gonna enable it for woocommerce
enable at woocommerce checkout page hit
save changes
now let's go to the checkout page again
and see if it's
visible here
and now we can see here we can see login
with our
social id let's click on that
now after logging in with social login
you can see it automatically pull up
my email address now what i'm gonna do
i'm i'm gonna complete the profile from
the backend to see if it's pulling up
all the details
now let's go to the backend and fill up
the profile details
i'm gonna add to the users
and here's the user we just created now
let's add it and fill up all the details
here
let's add first name last name is
already there
let's add the website
as test.com
company name test company
test address 1 test address
2
test city the postal code
phone number let's put a dummy phone
number for now
copy all the billing details from the
above
now hit update user
now let's go back to this to the
checkout page
and hit refresh
there we go it pulled up all of the
details
which were required cool we are done
with the google login
now we will proceed with the facebook
social login
let's go to the plugin settings
social login
and uh we will enable the facebook
hit save changes
and now it's asking for the secret key
similar to the google
now we will go to the facebook developer
it's developers.facebook.com just
navigate to that
i'm already logged into facebook you
will have to log in you will see the
login button here i'm seeing my apps so
after logging in you will see
there's a screen where you will see the
apps
and then you will create add a new app
click on for everything else
and just add in my email address
app display name we can set it as social
login
create app id
here we see the type of facebook app
which we need to create
we're gonna click on facebook login
setup
click here
and then we will select web
now here we will add our site url
hit save
unsafe we'll go to settings then basic
here we have our app id and app secret
let's copy that to our plugin settings
app id
secret show
hit submit and now we can see our app
secret
let's copy it paste it to the plugin
settings
hit save changes
and now it shows that we need to add
this url
to well it oauth redirect urls
let's copy that
we will go to facebook login click
settings
and paste the url here
there we go now hit save changes
and click here to
now it's giving and when we added in the
production mode it's showing up that
we have an invalid policy url we're
going to go to basic settings and add in
our privacy policy page
i've already created the privacy policy
page
and we're gonna just put the url for
that page
from here it's in the draft mode so
let's publish it first
okay let's publish the page
i'll copy this url and paste it
on the facebook privacy policy url here
once done hit save changes
choose a category here i'm gonna select
shopping for now hit save changes again
now select for production
switch more
and here we go our facebook app is live
now
now we're gonna test the facebook login
similar
how we did the google login test let's
go back to the incognito window
okay let's go back to the back end again
and from here we can see login with the
facebook now click on that
now it's asking me to log in let's log
in to the facebook
oops let's try log in again
i have to step two factor authentication
enable let me
accept it from my mobile device
and
i just tap the yes from my mobile now
it's proceeding
let's continue as below
okay we are successfully logged in
let's go to the shop and see if we have
any information showing up there
ebook
add to card
card proceed to check out
here we go it's pulling up my name
and my email
and that's it for the tutorial i hope
you guys
like it let me know in the comments if
you have any difficulty integrating
facebook
and google login thank you have a great
day
you
