View Product Page

Shortcode & widget

If you want to show the social login buttons on other pages of your site, you can use the shortcode [yith_wc_social_login] or add the widget YITH WooCommerce Social Login.

Social login widget

Settings

General settings

You can choose the page where users will be redirected after they log in. The option is available in the tab Settings > General settings of the plugin panel.

This is where you will find the option After login, redirect users to which allows you to choose from:

  • Auto: users will be redirected to the same page where they were when logging in;
  • Cart page: users will be redirected to the Cart page;
  • Checkout page: users will be redirected to the Checkout page;
  • My Account: users will be redirected to their My Account page;
  • Shop: users will be redirected to the Shop page;
  • Custom URL: users will be redirected to the page that you will specify in the field below.
Custom URL redirect

Now, let’s configure the other options:

General settings options
  • Label: enter the text to show above the social login buttons;
  • Description in checkout page: enter the text to show as a description on the Checkout page;
  • Social connections: click on the Settings button to enable and configure the social network you want to show.

Please note: PayPal login has been deprecated and is no longer possible to enable it. It is currently available for backward compatibility purposes only.

Callback URL & log
  • Callback URL: select the callback URL by choosing from the domain root and the library URL. Please note – if you change the callback URL, you will need to change all social callback URLs too.
  • Enable log: enable to view the log details.

Show login buttons in:

In this section, you can choose where to show the social login buttons from:

Show login buttons
  • Checkout
  • My Account login form
  • My Account registration form
  • Before post comments
  • After comments form
  • WordPress login

My Account options

My Account options

Finally, in the section My Account options, you can decide whether and where to show the social connection list:

  • None: select this option if you don’t want to show the social connection list;
  • Before recent orders: select this option if you want to show the list before recent orders;
  • At the end of page: select this option if you want to show the list at the bottom of My Account page.

Facebook configuration settings

To display the button you must absolutely enable it using the option Enable Facebook Login.
Now, you are asked to enter Facebook App ID and Facebook Secret to allow your users to log in via Facebook.Facebook settings

To recover this information, you have to create a new application on the page https://developers.facebook.com/apps.
Create a new application by clicking on Create App.

Facebook settings

Choose Consumer as app type.

Facebook settings

Now, you’ll see a screen like the following. Set the app name and contact email to associate to the app.

Facebook settings

Select Set Up in Facebook Login.

Facebook settings

Select Web option.

Set your Site URL.

Site url

Skip all other steps of the process.

Skip other steps

Please, note: when you register this app, you DO NOT need to request the ‘App Review’, as this is not necessary.

Open Settings and set in the option Valid OAuth redirect URIs the URL that you will find in the Facebook tab of the plugin settings then click on Save changes.

Facebook settings

If you see this banner, click on the link Get Advanced Access.

Facebook settingsOn the page that will open, search for email and public_profile then click on the Get advanced access button.

Facebook settings

You might be prompted to Update Privacy Policy URL or Data Deletion Information: proceed as requested.

Now, skip to Settings > Basic to get App ID and App Secret.

Facebook settings

If you have followed the procedure step by step and you have inserted App ID and App Secret in the plugin settings, you have completed the configuration for the login through Facebook.
You are now ready to use it.

Note: if you see a notice like the one shown in the image below, don’t worry!
This message shows only when logging in with the same email address used to create the Facebook app.

Alert facebook social login

On WPEngine hosted sites you should also ask WPEngine to exclude from caching the path wp-content/plugins/yith-woocommerce-social-login-premium/includes/hybridauth/ and the cookie ywsl_wp_session and add the following line in the wp-config.php file:

define( ‘YWSL_FINAL_SLASH’, true );

Twitter configuration settings

To display the Twitter login button, you have to check the option Enable Twitter Login.

Twitter settings

To enter the Twitter Key and Twitter Secret, which are required in the plugin, go to this page and create a new application.

twitter dev settings

Fill out the application registration form by inserting the following information:

  • application name.
  • application description.
  • url of the site on which it will be used.
  • enable Sign in with Twitter.
  • callback url: this value is available within the plugin settings dashboard.
  • Copy and paste it in the Twitter page that you are currently visiting.

callback urls

Than complete the other fields.

terms of service url

Go to the section Permissions, and make sure that the “Request email address from users” option is checked:

Permissions

If the data has been entered successfully, go to section Keys and Tokens: you will see a screen like the following:

Twitter dev settings

Copy the values you find in Consumer Key and Consumer Secret and paste them in the corresponding fields in the plugin option panel.

The configuration for Twitter login is now complete.

Google configuration settings

1. Visit the following page: https://console.cloud.google.com/projectselector2

2. Click on Create Project.

Create page

3. Give a name to the project and click on “Create”.

Name the project

4. Click on the hamburger menu on the left, then, on “APIs & Services” and finally on “Credentials”.

Credentials

5. Click on “Configure Consent Screen”.

Configure Consent Screen

6. Choose “External” and click on “Create”.

OAuth consent > External

7. In the page that will show up, fill all the required fields and click on “Save and Continue”.

8. In the screen that will appear click on “Add or Remove scopes”.

Add or Remove scopes

9. From the list only pick the following items:
…/auth/userinfo.email
…/auth/userinfo.profile
Click on the “Update” button at the bottom of the popup and then on “Save and continue” button.

Select scopes

10. Click “Save and continue” button also in the next step.

11. Click on “Credentials”, then on “Create Credentials” and finally on “OAuth Client ID”.

OAuth Client ID

12. Choose “Web Application”.

Choose web application

13. Click on “Add URI” and paste the URL that you can find in the Google tab in the plugin settings. Then, click on “Create” button.

Add URI

14. A popup will appear with the keys that you will have to copy and paste into the Google tab in the plugin settings.

LinkedIn configuration settings

To show LinkedIn login button, you have to enable the option Enable LinkedIn Login that you can find in plugin option panel.

Show LinkedIn button

Access your LinkedIn account and create a new application from this page

Create application

Fill in the form and be careful you do not neglect required fields.

Registration form

Now, you will get API Key and Secret Key that you can type into plugin panel.

Authentication Keys

Yahoo configuration settings

To display the button for Yahoo login, you have to enable the option Enable Yahoo Login that you can find in the plugin option panel.

Yahoo settings

To get the credentials required by the plugin, you have to create an application. Go to the page developer.apps.yahoo.com using your account or create a new one, in case you haven’t done it yet.

Create Yahoo application

When you create the application, set Contacts as “Read” in section Permissions.

Contacts settings

Insert the value specified in the plugin settings dashboard in “Callback Domain” field.

Callback url

Callback url - Yahoo form

Once you have filled out the form, you will be redirected to the page of your new application to get there Consumer Key and Consumer Secret, that you will be later required in plugin settings.

Authentication information

In case you were not redirected to that page, you can access this information by clicking on YDN Apps in the dropdown menu “My Apps” that you find on top right of the page.

App page

Customise the icon for this social network through the specific option Yahoo Icon that you find in the plugin.

Foursquare configuration settings

To display Foursquare login button, you have to enable the option Enable Foursquare Login that you can find in the plugin option panel.

Foursquare settings

Register at Foursquare and go to https://www.foursquare.com/oauth/ to create the application necessary to enable social login through Foursquare.
Click on “Create new app”.

Foursquare - Create application

Fill out the form with all required data and be careful you do not forget to type the domain that hosts your site in Download / welcome page url.

App information

If the form has been filled out correctly, you will be redirected to the application page, where you will find credentials required in the plugin, that is Consumer Key and Secret Key.

Client ID and Client Secret

In case you were not redirected to the right page, you can find the application just created here.

If you want to customise the social network icon, just upload the image you have chosen through the specifi option, Foursquare Icon, that you can find in the plugin section called “Foursquare”.

Live configuration settings

To show Live social login button, you have to enable the option Enable Live Login, that you can find in the plugin option panel.

Live settings

Access to https://account.live.com, or create a new account in case you did not have one, and create a new application from this page.

Live - New application

Fill in the application registration form by inserting the required fields.
Insert the “Callback Url” value, that you find in the plugin settings dashboard, in “Redirect URIs” entry.

Live - New application

After saving the settings, go to https://apps.dev.microsoft.com/ and select the application just created.

In APP SETTINGS you will find Client ID and Client secret (v1).

Live - Client ID and Client Secret

These informations have to be pasted respectively into the plugin entries “Live Consumer Key” and “Live Consumer Secret”. If you have done everything correctly, your users will be able to login with their Live account.

Instagram configuration settings

Please note: Due to Instagram Legacy API permission (“Basic Permission”) deprecated on June 29, 2020, Instagram authentication has been removed and is no longer available.

To show Instagram login button, you have to activate the option Enable Instagram Login, that you can find in the plugin options panel.

Instagram settings

To connect Instagram to your site, login to Instagram and go to instagram.com/developer/ to create the new application necessary to get “Client ID” and “Client Secret” information required in the plugin.

Instagram - Register Application

If this is the first time you have to add an application, Instagram will ask you the following information.

  • Your website: URL of the website where YITH WooCommerce Social Login plugin has been installed.
  • Phone Number: your telephone number (do not be afraid, no one will call you).
  • What do you want to build with the API?: add here a short text, in which you explain the reason why you are creating the application.

App info

Follow the three steps suggested by the site.
Click on “Register” button and then on “Register new client” entry of the next screen.

Register

Register a new client

Fill in the required fields of the form. Insert the callback URL, that you find in the “Instagram” section of the plugin settings dashboard, in “Valid redirect URIs” entry.

Callback url

Application details

If you have correctly inserted the data, you will be led to the final screen of the application creation process.
Now you have the credentials required by the plugin, that is “Instagram Client ID” and “Instagram Client Secret”

Client ID and Client Secret

Before proceeding any further, go to the Permissions application tab and click on the Start a submission button.

Start a submission