How to make Nextend Social Login compatible with WPML?

Nextend Social Login Documentation

Table of contents

What does the compatibility with WPML mean?

In our case the compatibility can mean two things:

  1. The visitors can use Nextend Social Login on the sub-domains and sub-folders that WPML uses for the translated versions of the pages.
  2. You can translate the texts and button label of our register flow page. The register flow page is displayed if you enabled the Terms and conditions in our Privacy tab or your ask extra information before the registration with social login.

Must have configurations in WPML

Configuring WPML when Nextend Social Login uses the wp-login.php page?

By default Nextend Social Login uses the WordPress default login page ( /wp-login.php ) to handle the OAuth flow and the Register flow.
If you see the /wp-login.php in the suggested redirect URLs in the Getting Started section of the providers, that means Nextend Social Login currently uses that page to handle its codes.
To allow WPML to translate our texts and labels in the register form, you need to go to:

  • WPML -> Settings

and enable the Login and registration pages – Allow translating the login and registration pages setting:
WPML Translate login page

Configuring WPML when Nextend Social Login uses the “OAuth redirect uri proxy page” setting?

When you need to use our OAuth redirect uri proxy page for some reason e.g.:

  • your /wp-login.php page is not available
  • or you would like to change the /wp-login.php URL and you don’t want Nextend Social Login to expose it

then you need to create translated versions from the selected page. For this you need to go to:

  • Nextend Social Login -> Global Settings -> General tab

switch to “All languages” mode in WPML and inspect the name of the page that you selected as OAuth redirect uri proxy page:
Finding the selected OAuth redirect uri proxy page

then you should go to:

  • WordPress -> Pages -> All pages

find this page and for each language you should create a new page by clicking the + icon under the flags, marked with number 1:
Create translation for OAuth redirect uri proxy page
If you have a translation for the page, you should see an edit icon instead, marked with number 2.
The translated page should be a completely empty page.

Configuring WPML when Nextend Social Login uses the “Page for register flow” setting?

When you need to use our Page for register flow setting for some reason e.g.:

  • your /wp-login.php page is not available
  • or you would like to change the /wp-login.php URL and you don’t want Nextend Social Login to expose it
  • or you would like to ask the extra information in a page of your theme
  • maybe you would like to translate the texts in our register flow

then you need to create translated versions from the selected page. For this you need to go to:

  • Nextend Social Login -> Global Settings -> General tab

switch to “All languages” mode in WPML and inspect the name of the page that you selected as Page for register flow:
Finding the selected register flow page
then you should go to:

  • WordPress -> Pages -> All pages

find this page and for each language you should create a new page by clicking the + icon under the flags, marked with number 1:
Create translation for the selected register flow page
If you have a translation for the page, you should see an edit icon instead, marked with number 2.
For each of the translated pages, you should add the shortcode that the setting suggests:
[nextend_social_login_register_flow]

Must have configurations in Nextend Social Login

If you use the:

  • Different languages in directories
  • A different domain per language

options in WPML for the Language URL format:
WPML Language url format
then you will also need to add a redirect URL in your social media App, that is associated with each of the languages.
In the Getting Started section of Nextend Social Login we will give you suggestions for the different versions of the redirect URLs ( the url that usually contains the ?loginSocial= GET parameter ).
For better understanding of the way it actually works, here are some examples:

Use case 1:

Settings:

  • Nextend Social Login uses the “Oauth redirect uri proxy” page setting
  • Currently configured provider: Google
  • WPML uses the “Different languages in directories” language url format
  • Default language is English:
  • Two extra languages: German, Hungarian

Configuration:
In this case if your default language is not a sub-domain, then our redirect URL would normally look something like this:

  • https://example.com/nsl-oauth/?loginSocial=google

But for the extra languages, you need the two other variants as well. Since WPML uses the “Different languages in directories” language url format, the other two variants will container the sub-folders of the associated languages, e.g.:
For the German version:

  • https://example.com/de/nsl-oauth/?loginSocial=google

For the Hungarian version:

  • https://example.com/hu/nsl-oauth/?loginSocial=google

So in total you will need to add 3 redirect urls to your Google App, one for each language:

  • https://example.com/nsl-oauth/?loginSocial=google
  • https://example.com/de/nsl-oauth/?loginSocial=google
  • https://example.com/hu/nsl-oauth/?loginSocial=google

Note: When you use the “Oauth redirect uri proxy” page setting, then if the translated version of the pages have different slugs, then the URLs associated with the extra languages will contain a different page slug as well. In the example above the translated versions share the same slug ( nsl-oauth ) as the original one.

Use case 2:

Settings:
Same as in Use case 1, except:

  • WPML uses the “A different domain per language” language url format

Configuration:
Same as in Use case 1, except the URLs associated with the extra languages will rather container the sub-domain, instead of the sub-folder. So your URLs will rather look like this:

  • https://example.com/nsl-oauth/?loginSocial=google
  • https://de.example.com/nsl-oauth/?loginSocial=google
  • https://hu.example.com/nsl-oauth/?loginSocial=google
Use case 3:

Settings:

  • Nextend Social Login uses the /wp-login.php page
  • Currently configured provider: Facebook
  • WPML uses the “Different languages in directories” language url format
  • Default language is English:
  • Two extra languages: German, Hungarian

Configuration:
The URLs will point to the /wp-login.php page, and the URLs associated with the extra languages will contain the sub-folder of the language, too. So your URLs will look something like this:

  • https://example.com/wp-login.php?loginSocial=facebook
  • https://example.com/de/wp-login.php?loginSocial=facebook
  • https://example.com/hu/wp-login.php?loginSocial=facebook
Use case 4:

Settings:
Same as in Use case 3, except:

  • WPML uses the “A different domain per language” language url format

Configuration:
The URLs associated with the extra languages will rather container the sub-domain, instead of the sub-folder. So your URLs will rather look like this:

  • https://example.com/wp-login.php?loginSocial=facebook
  • https://de.example.com/wp-login.php?loginSocial=facebook
  • https://hu.example.com/wp-login.php?loginSocial=facebook

If you follow the Getting Started section, then you don’t really need to worry about these URLs, as we give you all the URLs that you need to add to your Apps. So you just need to copy and paste them!