Back to Top

Opencart Social Login

Updated 26 July 2024

  • A lot of information required to create a new account may discourage the customer from signup. So using Opencart Social Login module user can signup on to your site with the help of social networks.

This module allows the users to sign up for the Opencart site using social networks like Facebook, Twitter, Google, LinkedIn. The admin can manage settings for social networks on the back end such as App ID, secret key etc.

Social Commerce – Learn how to promote, influence purchase decision and sell products directly on social media channels.

Note: 

  • The site should be on secure server to use the google login.
  • The user has to use their credentials to check the Demo.

Watch the below video tutorial to understand the extension workflow:

bqsaSmj_eW8

Features

  • Allows the users to sign up using social networks.
  • Customer select one of their preferred social network to sign up on the site.
  • Customer can choose one among the various social account to login.
  • Admin can enable or disable the customer to login into their site using social networks.
  • Admin can manage settings for social networks on the backend such as App ID, secret key etc.
  • Increase Conversion Rate.
  • No need to create a new account manually, the customer can directly login through Social Network.
  • The code is fully open & you can customize it according to your need.

Installation & Configuration

Opencart Social Login module installation is super easy you need to move admin, catalog, system & image folder in Opencart root directory that’s it as per the screenshot.

Searching for an experienced
Opencart Company ?
Find out More

installation

You can also install the Opencart Social Login module by uploading the admin & catalog files through extension installer.

Extension Installer

Now admin will go to Extensions > Modifications and then click on refresh button like the image below.

Modification

Now, under Extension > Modules, Install the Opencart Social Login module like this way.

Edit Module

When the admin will click on edit button, a new page will open where the admin can enable or disable the module and enter Client Id / Consumer Key and Consumer Secret / Secret Key for various Social Media.

Module Configuration

Front-end

After configuration setting, Customer can find various social networks at the login page and also sign up into their site using social networks like Facebook, Twitter, Google, LinkedIn. There is no need to fill various fields for sign up.

Frontend View Customer

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

Social Login By LinkedIn

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

Google Login

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

Twitter Login

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

FaceBook Login

How to set-up Application for Google

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

1. After clicking on above link, go to the Create Project.

Application for Google 1

2. Now go to “Manage Project” and click on the name of the Project Name.

Application for Google 2

3. Now, the user will search the Gmail API from the search box and then click on the Gmail link.

Gmail Application
4. Now enable the API.

Enable The API

5. Now, click on Gmail API and you will have the below screen where you have to select credentials for your project.

Check Credentials

6. After clicking on “What Credentials do i need”, a new page will open where you have to enter Origin URL & path.

Google API Console

7. Now enter the product name which will appear on the screen.

Add Credentials 3

8. You can see the client Id after entering the product name.

Add Credentials 4

9. At last you will receive your Client Id And Client Secret.

ClienT ID and Secret Received

How to set-up Application for Twitter

You can create a Twitter application using this link https://apps.twitter.com/

1. Click on “Create New App”

Twitter Create App 1

2. Now fill out the form to Create a New Twitter Application.

Twitter Create App 2

3. After creating an app go to the Settings and Click on Update Setting.

Twitter Create App 3

4. Receive your Consumer Key and Secret under Keys And Access Tokens

Twitter Create App 4

Note:

Twitter don’t send Email Id of the customer at the time of Login. It sends only Screen Name. So kindly update your Email Id and Password after sign up with Twitter.

How to set-up Application for Facebook

You can create a Facebook application by following the steps below –

1. Go to this link https://developers.facebook.com/ and click on the Login Button.
FaceBook App 1

2. Now, enter your Facebook Username and Password and click the Login button.
FaceBook App 2

3. After login, go to the My Apps menu option and then click Add a New App.
FaceBook App 3

4. Enter the Display Name for your app and the Contact email and click the Create App ID button.
FaceBook App 4

5. Clicking Create App Id will bring up a pop-up, enter the text in the box and click Submit.
FaceBook App 5

6. Now, the screen that comes up Navigate to Settings->Basic. Here, you will get the App ID and the Secret Key.
FaceBook App 6

7. Now, navigate to App Review and make the app as public.
FaceBook App 7

8. After that, you needs to add a product Facebook Login.

Add product

9. Once, the product get added then you need to select the platform for it.

platform

10. Enter the website URL.

URl of Website

11. After enetring the website URL, the last step is to enter the redirecting URL and then click on the Save button.

Redirecting URL

How to set-up Application for linkedIn

You can create a LinkedIn application using this link https://www.linkedin.com/secure/developer

1. After clicking on above link, click on “Create Application”.

LinkedIN App 1

2. Now fill out the form to register a New Application.

LinkedIN App 2

3. After that, you can receive Application details with your “Client ID” and “Client Secret”.
LinkedIN App 3

4. Now add Redirect URL and update it.

LinkedIN App 4

That’s all for the Opencart Social Login, still have any issues feel free to add a ticket and let us know your views to make the module better at HelpDesk Support.

Current Product Version - 3.3.0.1

Supported Framework Version - 2.x.x.x, 3.x.x.x

. . .

Leave a Comment

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


2 comments

  • Matej Lukac
    • Rajan Dimri (Moderator)
  • 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