Hey guys my name is Niloy and once again I am back with one of my new articles where I’m gonna show you how we can integrate the Facebook login into your WooCommerce based WordPress website. So anyone can simply click on the Facebook login button and they can log in into your boo commerce website with the help of a Facebook account. so let’s get started to integrate the social login into your vu commerce website we need to use a plugin so you need to simply go to WP is crashed or calm and you can get this social login plug-in at a very huge discounted price here you need to type MOOC immerse social login here we go. so we can see the first plug-in is vu commerce social login let’s click on it so this plugin is at a huge discounted price if you can check the original price of this plug-in on the WooCommerce website it cost around $79 every year. but if you buy it from here then you can get it for just 10 bucks and you will also be getting one year free updates so simply click on add to cart and download this plug-in in dot zip form 8 I have already bought this plug-in
WooCommerce Facebook Login
so let’s go back to my book hummer’s website and here I’m just going to the plugins and then click on add new so I will be uploading the WooCommerce social login plug-in into my book homer’s website simply go to upload plug-in then choose a file. so this is the plug-in I have WooCommerce social login in dot zip format lets open or you can upload it if you are on the Windows PC here we need to click on Install. Now this will take a couple of seconds to get installed into your Vous commerce website, at last, we can activate this plugin so this was the first step to buy the plug-in install onto your website now second step is which is of course the last step set up an app on Facebook so that there will be a synchronization between the Facebook Developer console and your website now let’s go to the WooCommerce and then click on settings so this is the WooCommerce settings page.
We can see the last tab social login let’s click on it now here we can see the Settings tab and the first tab is Facebook let’s click on it so that we can enable the Facebook login into our WooCommerce website now before enabling it this app ID and app secret is needed by default it took my username of this WordPress website so let’s remove it from here we need to generate the app ID and app secret from the Facebook
Developers console so before enabling the Facebook login just empty these two boxes and here we need to copy this redirect URI because this we’ll be needing in order to set up the Facebook app for our WooCommerce website so just copy it from here and then click on Save Changes. now let’s open a Facebook Developer console website so simply type developers dot facebook.com so this is the Facebook developers page from where we can create the login app for our WooCommerce website so simply click on this login menu and you can log in with your existing Facebook account. so I’m just going to log in with my account alright now once you will log in into the Facebook developers account then at the top right corner you can see my apps so let’s click on it and then we need to click on create app so this model box will open.
now here we need to give it a name for example carbon claps you can type any name over here but I recommend you to just type the name of your website I’m not talking about the domain name now next thing is contact email so in this box you need to enter your working email address, at last, we need to click on create app ID now this is a security check just complete this CAPTCHA and then click on submit ok so now the developer console has been opened you will be seeing this type of a screen now the first option is Facebook login let’s click on setup now as we are going to integrate the Facebook login into our website so you need to select this web the triple W so in this box you need to enter your website address.
you need to include the HTTP protocol as well so that is HTTP colon slash carbon claps dot-com so the domain format would be something like this and then click on save so on this webpage that’s all you have to do now let’s go back to these settings and here you need to click on basic now this will ask you few information about your app that you are going to create the first is display name so this will be the carbon claps or you can put any name that’s up to you namespace you can put a short name of your website so I’m just going to put like carbon claps there should be at least seven to eight characters long app domain in this box you need to enter the domain name of your website so firstly I’m just going to type HTTP colon slash carbon claps comm then select from the drop-down so it will appear.
now here you need to set the icon for your social login app so let’s click on edit and we can upload an icon of this size 1024 pixel width and the same would be height so in this folder I have this icon ready let’s upload it okay and here we can select provide services to other businesses now in the category you can select the category. of your business as carbon glass is the online shopping site for the demonstration so I am just selecting shopping from here that’s all you have to do and at the very bottom you would be getting these type of messages just ignore all of these messages they will not affect any of the things and here just to double-check in this section web site site URL this should be your website. URL it will be auto filled let’s click on Save Changes we are almost done now at the very top you would be seeing this app ID so this is the app ID that we need to paste into our Bou Commerce website and right now the app is in development mode so firstly click on this toggle button so the app will be in the live mode now let’s click on switch mode alright so the app is in live mode now this is the app ID and this is the app secret these are the two details that we need to copy and paste into our WooCommerce website so firstly let’s copy this app ID and we can go back to the WooCommerce settings page so again you need to go to the WooCommerce then settings and at last social login so here we are on the Facebook settings page enable it and in the app ID you need to paste that app ID that we have copied from the Facebook Developer console in the same way we need to paste the app secret so let’s go back to the Facebook click on this show it will ask you for the password.
so let’s enter it okay now let’s copy it from here and we can paste it in this box that’s all you had to do now this is very important
redirect URI you need to just copy this complete URL from here now go back to the carbon claps Facebook Developer console under the facebook login you need to click on settings so this is the last step that we are going to do and here valid oath redirect URI just paste it over here select from this drop-down and then click on Save Changes that’s all you have to do and your facebook login has been properly set up with your vous commerce store it’s done now let’s go back to the WooCommerce website and here we need to check this checkbox at last click on Save Changes so it’s done and now blue commerce website has the facebook login functionality it’s time to test so let’s copy this URL from here or let’s lowered from the admin account now I’m just going to open carbon claps comm /my account so this is the default WooCommerce login page let’s uh scroll down here we have the log in with Facebook option I am also going to log out from the Facebook account otherwise it will auto login okay now let’s click on log in with Facebook here we go so let me enter my password and now you can see this is the pop-up window that’s the icon that’s the website name which I have set up in the Facebook Developer console let’s click on continue with Saddam that’s my name and here you go so the Facebook log in has been
successfully worked and that’s my name which is auto fetched from the Facebook account I have also got a confirmation email let me show you so that is the confirmation email I have received from the WooCommerce website so this is how you can set up the Facebook login into your vu commerce based WordPress website if you would have any question just drop your comments thank you very much