Guide for WordPress Social Login

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

By leveraging this plugin, users can bypass the tedious process of creating new accounts and remembering additional passwords.

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

WordPress Social Login plugin is also integrated with Gravity Forms, Contact Form 7, and BuddyPress.

We provide a production version of the plugin. If you want a development version then you can get it at an additional cost. Please contact support@webkul.com for it.

• 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 icon.
• 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.

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

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.

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.

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.

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

Now, when the WordPress Social Login 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.

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 plugin connections, the admin must flush the permalink under Settings > Permalinks .

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.

Step 2

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

Step 3

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

Step 4

To proceed, the admin should select “Other”.

Step 5

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

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”.

Step 7

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

Step 8

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

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.

• 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.”

Step 10

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

On clicking My Project, a pop-up will appear. Click “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.

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 

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

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

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

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

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

**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.

Steps to Create a Twitter API:

1. Click on “Create New App”

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

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. 

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

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

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

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

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.

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

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

**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.

You can use these keys while configuring the module. 

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

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.

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

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

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.

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

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.

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

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

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.

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.

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.

Then click on Settings

After that, click on developer settings:

After that you have to click on New GitHub App

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

• 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.

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.

After the successful installation of the WordPress Social Login plugin 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.

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.

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

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.

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.

Forms -Settings

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

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.

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

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.

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.

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.

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

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 icon option on a BuddyPress site, as well as choose a specific page layout style.

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

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.

Then paste the shortcode in the form tab:

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

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

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

Then select the webkul social login

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

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

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

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

WordPress:

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

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

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

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

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

WooCommerce My Account Section

Comment

Contact form 7

Gravity Form

BuddyPress

That’s all for the WordPress Social Login Plugin. In case of any query, you can create a ticket at webkul.uvdesk.com

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

If you need custom WordPress Plugin Development services then feel free to reach us and also explore our exclusive range of WordPress WooCommerce Extensions.