Back to Top

Guide for WordPress Social Login

Updated 30 April 2024

WordPress Social Login plugin allows users to sign in to their site using social networks like Facebook, Twitter, Google, Github, and Microsoft.

The admin can also manage social network settings on the back end, such as client ID, secret key, and so on.

This plugin is also integrated with Gravity Forms, Contact Form 7, and BuddyPress.

If WordPress WooCommerce users can register or log in to the WooCommerce Store using WhatsApp OTP Authentication, they can check WooCommerce WhatsApp OTP Login.

Features

  • It allows users to sign into their site via social networks.
  • It works well with popular plugins such as Gravity Forms, Contact Form 7, and BuddyPress.
  • The customer selects one of their preferred social networks to sign up on your site.
  • Among the available social accounts, the customer can select the desired one.
  • The admin on the backend manages social network settings such as client ID, client secret, and redirect URLs.
  • Admin can blacklist the customer using there email address.
  • Select multiple types of button layouts for the social login.
  • Admin can select the theme (dark or light).
  • Select the different form layouts for different pages.
  • Admin can enter a text label for the Sign In and Sign Up buttons for different platforms.

Installation

The user will get a zip file, which he has to upload in the “Add New” menu options in the WordPress admin panel.

Searching for an experienced
Woocommerce Company ?
Find out More

For this, login to the WordPress Admin Panel, and under the Dashboard, hover your mouse over the “Plugins” menu option. This brings out a sub-menu and then selects the “Add New” option.

installation-add-new

After that, you will see an option on the top of your page that is “Upload Plugin.” Click the option to upload the zip file.

Wordpress Installation upload plugin

Then click on the “Upload Plugin” option. Below that, you will see the button “Choose File.” Click on the button to browse for the zip file as per the snapshot below.

installation-choose-file

Post browsing the file, click the “Install Now” button to install the plugin as per the snapshot.

wordpress-social-login-installtion

Now, when the plugin is installed correctly, you will see the success message. Additionally, there is an option to activate the plugin.

Click on “Activate Plugin” to activate the installed plugin.

installation-activate-plugin

Module Translation

Learn how to translate the plugin.

NOTE: To generate JSON from your translations, save your translation file in the default WordPress languages directory, then run the following command in the same directory: Note `xx_YY` refers to the locale (eg. `en_US`)
“`wp i18n make-json wc_pos-xx_YY.po –no-purge

Flush-rewrite rules

For the correct social login connections, the admin must flush the permalink under Settings > Permalinks.

login

Facebook API Credentials

You can create a Facebook application using this link: https://developers.facebook.com/

  • Facebook requires that you create an external application linking your website to their API.
  • App ID and App Secret (also sometimes referred to as Consumer Key and Secret or Client ID and Secret) are what we call an application credential.
  • Meanwhile, this application will link your website example.com to the Facebook API, and these credentials are needed in order for Facebook users to access your website.

To enable authentication with this provider and register a new Facebook API app, follow these steps:

Step 1
To generate the Facebook credential the admin needs to click this link- https://developers.facebook.com/.

Here, the admin must sign up or log in using their account.

Meta-for-Developers

Step 2

After logging in, the admin needs to click on “My Apps”.

Meta-for-Developers-meta-connect

Step 3

After clicking on My Apps, the admin now needs to click on “Create App.

All-Apps-Meta-for-Developers

Step 4

To proceed, the admin should select “Other”.

Create-an-app-Meta-for-Developers

Step 5

The admin needs to select “None” and then “Next” in order to continue.

App-creation-Meta-for-Developers

Step 6

Next, add some details, like:

  • Add an App Name: In this section, the admin must specify the app name.
  • App Contact Email:The admin can enter their email address here.

After filling out both of the options, the admin needs to click on “Create App”.

App-creation-Meta-for-Developers-1

Step 7

Click the “Set Up” button of “Facebook Login” here.

Social-Login-Add-Product-Meta-for-Developers

Step 8

Follow the left-side menu and select “Setting.”.

1-Social-Login-Facebook-Login-Meta-for-Developers

Step 9

Now needs to enable some client OAuth settings:

  • Client OAuth Login: Enable.
  • Web OAuth login: Enables web-based client OAuth login.
  • Enforce HTTPS: Enable.
1-Social-Login-Facebook-Login-Meta-for-Developers-1-1
  • Deauthorize callback URL: Here, the admin needs to enter their Page URL.
  • Data Deletion Request URL: Same, the admin needs to enter their Page URL.

After filling in all the details, the admin needs to click on “Save Changes.

social -login-1

Step 10

To get the app ID and app secret, the admin needs to follow “App Setting>Basic.

Social-Login-App-settings-Meta-for-Developers-1

Google API Credentials

On clicking My Project, a pop-up will appearClick “New Project” link.

2. Enter the name for your project so that you can identify your project. Please note that you should not include any Google word for your project name.

Wordpress 2 Social signup

You can create a Google application using this link https://console.developers.google.com/project

Steps to create an application:

1.  Go to your API & Services ->Library 

wordpress-social-login-26


2. Meanwhile, go to the Credentials menu option and then click on Create credentials.

Wordpress 2 Social signup-2

3. After that, click to create the OAuth client ID.

Wordpress 2 Social signup-3

4.  To configure the consent screen, click the “Configure consent screen” button.

Wordpres-social-login-31

5. Enter the product name that is to be shown to the users and then click the Save button.

wordpress-social-login-30

6. Select the Application type and enter the Authorized JavaScript origins and the Authorized redirect URLs. Click the Create button.

Wordpress 2 Social signup-6

**Note:
Set the OAuth Redirect URL like this – www.example.com/socialsignup/google/connect/

7. Finally, after clicking the Create button in the above step, you will get the Client Id and Client Secret.

Wordpress 2 Social signup-7

Twitter API Credentials

Steps to Create a Twitter API:

1. Click on “Create New App”

Twitter-Developers

2. If you dont have a developer account for Twitter then a popup will display for the same.

Twitter-Developers-1

3. Click on the Apply button, and here you have to select the plan for the developer account or choose a free account for sign up. 

Twitter login

4. Once you choose the option it will navigate to the policy page to fill in some details.

Wordpress 2 Social signup-8

5. Once you submit the info it will display the dashboard. Here, you can create a New Twitter Application.

X-Developers-1

6. Enter the app name and click on the next button. 

X-Developers-2

7.  In the key & token, you will receive your Consumer Key and Secret under Keys And Access Tokens

X-Developers-3

Note:

Twitter doesn’t send the Email ID of the customer at the time of Logi-n. It sends only Screen Name. So kindly update your Email ID and Password after signing up with Twitter.

8. Once the app is created a project will show in the project list.

X-Developers-4

9. Click on the setup button a new page will open.

X-Developers-6

10. After selecting the permission, you need to add app information with the required details, like the callback URL and web URL.

X-Developers-5

**Note:
Set the Callback URL as – www.example.com/socialsignup/twitter/connect/

11. Once click on save, it will show the client ID and secret key.

Wordpress 2 Social signup-9

You can use these keys while configuring the module. 

Microsoft API Credentials

Navigate to the Microsoft Azure login section, and tap on the Sign In option in the top right-hand corner.

Azure

This brings the section to sign in with the Microsoft account. Here, enter the details and tap the next button. After that, enter your password and tap the Sign in button.

Wordpress 2 Social signup-10

After signing in, go to all services and tap the Active Directory option.

Wordpress 2 Social signup-11

This brings up the below section. Here tap on the App registrations option on the side panel.

Wordpress 2 Social signup-12

After that, tap the New Registration option to register a new app. Now, enter the app name choose the supported account types, and tap the Register button after that.

Wordpress 2 Social signup-13

Thereafter, you can see the credentials being generated for the application that we created.

Wordpress 2 Social signup-14

Now here, you will get the –

  • Client ID

How to get the Client Secret:

Now, in the same side panel section, go to Certificates & Secrets and tap the New Client Secret option.

Wordpress 2 Social signup-15

This brings the section to add a description for the Client secret, enter the same, and tap the Add button after that.

Wordpress 2 Social signup-16

After tapping the Add button, the Client’s secret key will be generated.

Wordpress 2 Social signup-17

Note: You need to copy the Value for the secret key. This is displayed only once, so copy it somewhere safe for use at a later time in the extension configuration part.

Configure Platform & Set Redirect URL:

Now, on the side panel for the app, go to Authentication->add a platform->web.

Wordpress 2 Social signup-18

After tapping on the Web, you have to enter the redirect URL. Enter the base URL of your website like www.example.com/, give the permissions, and tap the Configure button for the app.

Wordpress 2 Social signup-19

Github API Credentials

You can create a Github api by navigating to https://github.com/settings/developers/

First If you are not logged in, log in using your GitHub credentials.

Wordpress 2 Social signup-20

Then click on Settings

Wordpress 2 Social signup-21

After that, click on developer settings:

Wordpress 2 Social signup-22

After that you have to click on New GitHub App

Wordpress 2 Social signup-23

To create a new GitHub app, select the “OAuth Apps” tab and click the “New GitHub App” button:

Developer-applications
  • Then enter a name into the Application name field. Users will see this name, when they authorize your app at the OAuth consent screen!
  • Fill Homepage URL with the URL of your homepage.
  • In the Description field, you should explain what this App will be used for.
  • Add the URL to the Authorization callback URL field, that Social Login suggests in the 7th step.
New-OAuth-Application

After entering the details, click the Register application button.

Find the Client ID and Client Secret in the middle of the page. These will be required in the plugin’s settings.

wordpress-socail-login-41

WordPress Social Login – Configuration

After the successful installation of the WordPress Social Login admin will be able to view the plugin configuration settings under Webkul WC Addon > Webkul Social Login.

Here you will find all of the provider lists, which you can enable and manage based on your requirements. To manage settings, click the setting icon.

Webkul-Social-Login-‹-Wordpress-Social-Login-—-WordPress

Once you click on setting icon, a pop-up will appear, and you have to enter detail in the tabs

Settings: In this, you have to mention the platform client ID, Client Secert key and Redirecy URL of each platform.

Webkul-Social-Login-‹-Wordpress-Social-Login-—-WordPress-2

Button: In this, you have to enter the Text label for Sign In button and Text label for Sign up button.

Webkul-Social-Login-‹-Wordpress-Social-Login-—-WordPress-3

General Settings:

In this general setting, admin can select the following details:

  • Theme mode: can select the toggle between light and dark themes
  • Blacklisted user emails: Customer mail ID added to the blacklist for the particular customer.
  • Default Style Settings: You can select the default button layout.

Note:This default icon style will be automatically applied to all forms. In the event that no specific button layout style is selected, this default setting will take precedence.

Webkul-Social-Login-‹-Wordpress-Social-Login-—-WordPress-4

Privacy:

  • Enable Privacy Settings: The specified page’s privacy policy is displayed when this setting is enabled.
  • Privacy Policy Content: Information about how we handle user data can be found in our privacy policy.
Webkul-Social-Login-‹-Wordpress-Social-Login-—-WordPress-5

Forms -Settings

Here you will see all the forms where the social login option will be visible:

WordPress Form Settings

In a WordPress form, you can enable or disable the social login option for login form, and you can select a specific layout for the page.

Wordpress 2 Social signup-24

Same admin can enable or disable the social login option for the registration form, and you can select a specific layout for the page.

Webkul-Social-Login-‹-Wordpress-Social-Login-—-WordPress-6

Comment Settings

In the comment section, you can enable or disable the social login option for the login button, and you can select a specific layout for the comment section.

Webkul-Social-Login-‹-Wordpress-Social-Login-—-WordPress-7

WooCommerce Settings:

Note: When Enable WooCommerce is enabled in form settings, you must disable the BuddyPress plugin so that the social login button appears in login, register, and other related WooCommerce forms.

You can enable or disable the social login option in a Woocommerce form, as well as select a specific page layout style.

Webkul-Social-Login-‹-Wordpress-Social-Login-—-WordPress-8

Also, you can enable or disable the social login option for the registration and billing pages in a WooCommerce form, as well as specify a page layout.

Webkul-Social-Login-‹-Wordpress-Social-Login-—-WordPress-10

Buddy Press Settings

For BuddyPress, you have to install the addon and enable two options: user group and site tracking:

BuddyPress-Components-‹-Wordpress-Social-Login-—-WordPress-1

Note:When BuddyPress is enabled in form settings, you must first disable Woocommerce. The social login button will appear in login, registration, and other related forms.

If you’re using the BuddyPress addon, you can enable or disable the social login option on a BuddyPress site, as well as choose a specific page layout style.

Webkul-Social-Login-‹-Wordpress-Social-Login-—-WordPress-11

Furthermore, you may enable or disable the social login option for registration pages in BuddyPress, as well as set a page style.

Webkul-Social-Login-‹-Wordpress-Social-Login-—-WordPress-12

Contact Form 7 Settings

To add the plugin to Contact Form 7, you have to navigate to Contact>> Contact Form.

Then click on the contact form, where you will see the Webkul Social Tab copy shortcode.

Edit-Contact-Form-‹-Wordpress-Social-Login-—-WordPress

Then paste the shortcode in the form tab:

Edit-Contact-Form-‹-Wordpress-Social-Login-—-WordPress-1

If you’re using Contact Form 7, you can enable or disable social login and select a page layout style.

Webkul-Social-Login-‹-Wordpress-Social-Login-—-WordPress-13

Gravity Forms:

To add the plugin to Gravity Form, you have to navigate to Forms. Then click on Add New.

Forms-Gravity-Forms-‹-Wordpress-Social-Login-—-WordPress

Next, select the template. After that, enter your name and description.

Forms-Gravity-Forms-‹-Wordpress-Social-Login-—-WordPress-2

Then select the webkul social login

Forms-Gravity-Forms-‹-Wordpress-Social-Login-—-WordPress-4

After that, drag the option and copy the short code to paste it on the preferred pages.

Forms-Gravity-Forms-‹-Wordpress-Social-Login-—-WordPress-5

After that, you can enable the Gravity Social Login option and choose a layout.

Webkul-Social-Login-‹-Wordpress-Social-Login-—-WordPress-14

Front-End

After configuration, customers are able to find multiple social media platforms on the login page and sign up for their site using social networks.

Signing up does not require you to fill out a number of fields

WordPress:

Log-In-‹-Wordpress-Social-Login-—-WordPress

When you click the Google login button, the page below will pop up for login.

Sign-in-Google-Accounts

Once you click the Github login button, the page below will pop up for login.

Sign-in-to-GitHub-·-GitHub

After clicking on the Microsoft login button, the below page will be open for login.

Sign-in-to-your-Microsoft-account

The page below will open for login after you click the Twitter login button.

screenshot_from_2024_02_27_12_24_52-1

After going to the Facebook login button, the login screen below will appear.

Log-in-to-Facebook-Facebook

WooCommerce My Account Section

Screenshot-from-2024-02-27-11-49-47

Comment

comment

Contact form 7

Contact-Form-7-–-WordPress-Social-Login

Gravity Form

BuddyPress

Screenshot-from-2024-02-27-11-56-42

That’s all for the WordPress Social Login Plugin. In case of any query, you can create a ticket at webkul.uvdesk.com or contact us at store.webkul.com/contacts/ and let us know your views to make the plugin better.

Current Product Version - 1.0.0

Supported Framework Version - WordPress 6.4.3 and WooCommerce 8.6.1

. . .

Leave a Comment

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


Be the first to comment.

Back to Top

Message Sent!

If you have more details or questions, you can reply to the received confirmation email.

Back to Home

Table of Content