Skip to content
  • +1 (857) 366-6800
  • [email protected]
Facebook-f Linkedin-in Instagram Youtube
MENUMENU
  • About Us
  • Our Services
    • Digital Marketing

      • Search Engine Optimization
      • Social Media Marketing
      • Pay Per Click Management

      Web Development Service

      • Logo Design
      • Custom Website Design and Development
      • Shopify Web Design and Development
      • Domain and Hosting

      WordPress Development Service

      • Ecommerce Web Development
      • Web Design and Development
      • WordPress Development
      At Websensepro, we follow a structured process to create Lottie animations that are tailored to our client’s specific needs. Our process includes the following steps:

      Animation

      • Lottie Animation
  • Portfolio
  • Blog
  • Start Now
  • Contact Us
  • About Us
  • Our Services
  • Portfolio
  • Blog
  • Start Now
  • Contact Us
Menu
  • About Us
  • Our Services
  • Portfolio
  • Blog
  • Start Now
  • Contact Us

How to Add Facebook and Google Login to WordPress Website

Video Tutorial:

For those who don’t want to watch the video, you can continue reading the article below.

  • How to Add Facebook and Google Login to WordPress Website

Add Facebook and Google login to WordPress website in just a couple of easy steps. So let’s get started!

  • Adding Google Login in WordPress 

Step 1: Install and activate the plugin Super Socializer.

Step 2: Go to Super socializer > Social login then find master control after that click on enable social login.

Step 3: You will see this and click on save changes.

Step 4: Now we are going to make Google login for this select social networks and make check on Google as given below.

Step 5: We need Google Client ID and Google Client Secret by using Developer Console, go to Google developer console.

Step 6: Once you open the developer console there will be new project option we gonna create new project lets name it as  social login  then create the project.

Step 7: Our new project is ready now go to OAuth Consent Screen and then we select External click on create.

Step 8: 

  1. Add an Application Name such as: Social Login.
  2. Leave the Application Logo empty.
  3. Add your support email address.
  4. Add Authorized Domain such as: websensepro.com.
  5. Hit Save.

Step 9: Goto Credentials and now click on Create Credentials and then OAuth Client ID.

Step 10: Application type is > Web Application and then go to direct Authorized redirect URLs add your Website URL then click Create.

Step 11: Now we have Client ID and Client Secret  Key Copy them. 

Step 12: And then paste here and click on save changes.

Once Setting Saved now try to login to your WordPress website using Google Sign in  

  • Enabling in Product page

Let’s Enable Google login button to your checkout page .

Step 1: Go to Super Socializer > social login and then Advanced Configuration and then Enabled Social Login for WooCommerce when  once done click on Save Changes Button.

After all of this you will see Google Login Button on your Checkout Page.

Now we are Done with Google Login 

  • Adding Facebook Login in WordPress

Step 1: Now go to Social Login and Enabled Facebook and then click on Save Changes.

Step 2: Please make sure you already login to your Facebook Account.

Step 3: Now open Facebook Developer Console, its developers.facebook.com.

Step 4: Click on My Apps > Add a New App > Click on For Everything Else

Step 5: After that Fill the given field , App Display Name, App Contact Email then click on Create App ID.

Step 6: Once you done you will see the Dashboard of Facebook for Developers.

Step 7: We are gonna click on Facebook Login Setup 

Step 8: And then we are gonna select Web

Step 9: Now we will add our site URL and hit save, once save go to settings > then Basic, add  privacy policy page URL and then You can see our App Id and App Secret let’s copy .

Step 10: Now  pasted to you’re in   plugin settings click Save Changes.

Step 11: You will get an error message on the top you have to copy a URL.

Step 12: And pasted in Facebook Login > Setting Valid OAuth redirect URLs  in as given below.

Step 13: Once it’s done click on In Development and hit on Switch Mode.

And here we go our Facebook App is Live. Now we gonna test Facebook login like to  Google login , Once when you go to your Login Page  you can see the Facebook login button.

If you are not tech savvy and looking to get some tech help for your website, contact us here.

5/5 - (24 votes)
Tags
business custom website design desiger elementor elementor fix elementor tutorial google google adwords grow sales hire a designer hire designer importance of alt tag Listify login marketing plugins podcast product design product page customization responsive websites Search engine optimization search engine optimizaton SEO seo affects and risks seo benefits shape divider shopify shopify shopify customization shopify taste theme shopify theme customization small business social login taste theme customization tech theme sections tutorial web design agency web designing web development website-redesign website design why build a website why business need a website why hire a designer wordpress

About

admin

admin

Leave a Comment Cancel Reply

Your email address will not be published. Required fields are marked *

OUR SERVICES

  • Shopify Design and Development
  • Web Design and Development
  • WordPress Development
  • Ecommerce Web Development
  • Search Engine Optimization
  • Logo Design

CONTACT INFO

  • WebSensePro
  • Office #6-A, K.D.A Appartments, Block A, North Nazimabad, Karachi, Pakistan
  • +1 (857) 366-6800
  • [email protected]
  • https://websensepro.com

FOLLOW US ON

Facebook-f Linkedin-in Instagram Youtube
Member of PASHA

Copyright All Rights Reserved © 2023

  • Refund Policy
  • Terms and Conditions