Social Login Pro app

Get Facebook API key pair

Step 1: Open Facebook for Developers page https://developers.facebook.com/ then click “Get Started”.

We’ll start registering a Facebook developer account. Just click on “Continue” button to move into the next step.

Confirm your email address. Click on “Confirm email” button to continue.

Select the role you like. Click “Complete registration” button to complete.

Step 2:

(1) Click on “Create App” button to create a new Facebook app.

(2) On the “Select an app type” popup, select “None” option then click on “Continue” button.

(3) Enter the app name, app contact email then click “Create App” button.

Complete the security check then click “Submit”.

(4) Now we will be navigated to “Add a product” page. Find “Facebook Login” then click on “Set up” button.

Step 3:

(1) From the Quickstart screen, choose “Web” platform for your app.

(2) Enter your site URL > Click “Save” > Click “Continue”.

Click “Next” to get through the next steps.

Step 4:

(1) Navigate to “Settings > Basic” page.

Enter the namespace for your app. It should be less than 32 characters, should not contain space between words.
App domains: enter your website URL here
Privacy policy URL: enter the URL to your website’s privacy policy.
Terms of Service URL: enter the URL to your website’s terms of service.
App icon: you should upload an icon (should be your website logo) to gain trust of social login users.
Category: select a category for your app.
App purpose: select “Yourself or your own business” option.

Finally, click on “Save changes” button.

(2) Navigate to “Facebook Login > Settings” page.

At “Valid OAuth Redirect URIs” field, enter the “Redirect URI” you get from Social Login Pro app configuration page then click “Save changes”.

(3) Click on “In development” switch to make your Facebook app go live.

Step 5: Navigate to “Settings > Basic” page. Copy your “App ID“, then click on “Show” button on “App Secret” field.

Complete the security check to display your “App Secret“.

Get Google API key pair

Step 1: Open Google page and log in with your Google account. Then navigate to Google console page: https://console.developers.google.com

By default, there is a pre-made project named “My project“. We will create a new one.

Step 2:

(1) Click on “My Project” link on the header to open “Select a project” popup. Click on “New project” link.

(2) Enter your project name > select parent organization or folder (optional). Click on “Create” button.

(3) A notification will appear. Click on “Select project” to open your newly created project.

Step 3:

(1) Open the menu of project page. Select “APIs & Services” > “Credentials“.

(2) Click on “Configure consent screen” button.

(3) Select “External” option then click “Create”.

(3) Enter the required information on “OAuth consent screen” page:

App name: enter your app name
App logo: upload an image to set it as the app logo.
App domain: enter your website URL into “Application home page” field.

Privacy policy and Terms of service link: enter your website’s privacy policy and terms of service link into respective fields.

After you enter the links, Google console will auto-detect your domain(s) as a missing domain. Click on “Add domain” button.

Type your domain then click on “Save and continue” button to complete. You can add multiple domains for an app.

NOTE: please add “social-login.pro” domain into your Google app. This domain is required so that the Redirect URIs can work later.

Step 4:

(1) Click on “Add or remove scopes” button.

(2) Select the following scopes:

…/auth/userinfo.email
…/auth/userinfo.profile
openid

Then scroll down and click on “Update” button.

(3) Click on “Save and continue” button.

(4) Click on “Save and continue” button again.

(5) Review all the information. If you want to change any info, click on “Edit” link.

Step 5:

(1) Navigate to “Credentials” page. Click on “Create credentials” button.

(2) Select “OAuth client ID” option.

(3) Select “Web application” for “Application type” field.

(4) We will need to enter “Authorized JavaScript origins” and “Authorized redirect URIs“. Click on “Add URI” button and:

Enter your website URL for “Authorized JavaScript origins“
Enter the redirect URI provided by Social Login Pro app for “Authorized redirect URIs“

Finally, click on “Create” button to finish.

(5) Copy the client ID and client Secret then paste them in Social Login Pro app setting.

Step 6: Finish Step 5, your app is only available for test users. To publish your app to all users, you will need to verify your domain.

(1) Navigate to “Domain verification” page > Click on “Add domain” button.

(2) Enter your domain then click on “Add domain” button.

(3) Click on “Take me there” button.

(4) You will be navigated to “Webmaster Central” page. Click on “Add a property” button then enter your domain > Click on “Continue” button.

(5) Follow the instruction of “Recommended method” or “Alternate methods” to verify your domain.

Social Login Pro is a simple but comprehensive solution to let your customers log in or register a new account on your Shopify website with their social network account such as Facebook, Google, Twitter, Amazon, etc. This app gives your storefront a convenient social login section on “Login form”, “Create new account form” or anywhere you want using embedded code.

By default, this app will create social login buttons on your online store “Login form” and “Create new account form”:

But if you want to display the social login buttons to another position on your online store, “Embedded code” is useful for you.

In this section, we will guide you on how to customize social login buttons and how to use embedded code to display social login buttons on your Shopify online store.

A. Position setting

From Social Login Pro configuration page, navigate to “Positions” tab. You can select where to display social login buttons by turn on the respective position.

Login popup: You can allow customers to log in through a login popup and saving their time. Customers won’t have to navigate to the Login page to enter their account info.

You may select how the login popup appears: when customers hover the mouse pointer over “Account” button or when customers click on “Account” button.

B. Customize social login buttons

On the middle column of “Positions” page, you can customize how social login buttons will be displayed on the storefront.

On the right column is “Preview social login buttons” area, you can see every change applied without opening your storefront. You can drag and drop the social icons to change their display order.

C. Display social login buttons anywhere you want with embedded code

In order to display social login buttons on your online store, normally you should select “Login form” and “Create account form“. In case you want to display social login buttons to another position on your online store, “Embedded code” is useful for you.

How to get embedded code

On “Positions” page, enable “Display social login buttons anywhere using embedded code” option then customize how social login buttons will appear.
Click on “Generate code” button to get embedded code.
Copy and paste the embedded code to the blog page, product description, template .liquid files, etc. where you want to display social login buttons.

How to use your embedded code

After getting the embedded code for social login buttons as instructed above, you can paste it into any template .liquid file you want to display social login buttons. Here are some examples of using embedded code on the product description area and on a .liquid file:

Embed code on the product description area

STEP 1: On your Shopify admin, navigate to “Products” page. Click on a product you want to display social login buttons in the product description area.

STEP 2: On “Description” field, click on “Show HTML” button. Paste the embed code on “Description” field. Click on “Save” button.

STEP 3: And we’re done! Open your product detail page and see the change!

To remove social login buttons out of the product description area, just delete the embedded code on “Description” field.

Embed code on a .liquid file

STEP 1: Navigate to “Online store” > “Themes” page. Click on “Actions” dropdown menu. Select “Edit code“.

STEP 2: Scroll down and select any .liquid file you want. For example, we’re selecting “cart.liquid” file. Paste the embedded code. Click on “Save” button.

STEP 3: Open the cart page and see the change.

If you want to remove social login buttons from your web page, just delete the embed code on .liquid file.

A. Position setting

B. Customize social login buttons

C. Display social login buttons anywhere you want with embedded code

A. Text and translation

B. Multipass login

C. GDPR text