Social Login (Facebook, google, twitter, LinkedIn)
  • TMD OpenCart Social Login Module

    ============================================

    It adds a social login option to your website. Website Customer can login using a social account to register or login to the website. It will help the customer to overcome the headache of the password. Social Login for Opencart gets real email id of a customer as email id is already verified on the social website.

Installation of Social Login Module 4.x.x

    • Step 1: Zip Folder
      Step 2
      Go To Admin Panel > Extensions > Installer > Click Blue Button
      Step 3: Upload TMD Social Login Module Zip
      Step 4: After zip Upload Click Green Install Button
      Step 5: After Click Show Message (Success: The extension has been installed!)
      Step 6
      Go To Admin Panel > Extensions > Extensions > Select Module > Click Green Install Button
      After Install Click Edit Button > First Generate License key
      Setting Tab
      FaceBook Tab Setting > First For Genrate new app click Here
      Step 7: Goggle Tab > First For Genrate API KEY and SECRET KEY Click Here
      Step 8: Twitter Tab > First For Genrate API KEY and SECRET KEY Click Here
      Step 9: Linkdin Tab > First For Genrate API KEY and SECRET KEY Click Here

Installation of Social Login Module 3.x.x

    • Step 1: Zip Folder
      Step 2
      Go To Admin Panel > Extensions > Installer > Click On Upload Button
      Step 3: Upload TMD Social Login Module Zip
      Step 4: After Zip Upload Success Message
      Step 5
      Go To Admin Panel > Extensions > Modifications > Click On Refresh Button
      Step 6
      Go To Admin Panel > Extensions > Extensions > Select Module Click On Tmd Social Login Green Install Button
      Step 7: After That Click On Edit Button
      Step 8: Setting Tab
      FaceBook Tab

      Twitter Tab

      Twitter Apps Creation:


      * At first go to the https://apps.twitter.com/app/new and login at your Twitter developer account.

      * Create new apps with the following details.

      1.Name: Your application Name. This is shown to the user while authorizing.

      2.Description: Your application Description. This is shown to user while authorizing.

      3.Website: Your application website.

      4.Callback URL(*): After authorization, this URL is called with oauth_token

      * Now change the apps permission to Read and Write or Read, Write and Access direct messages. For change the apps permission, you need to add mobile number to your twitter account. If you are not able to add mobile number from the web, then please follow the below steps.

      * In order to use this process, you need to have a smart phone and install the Twitter mobile application. By this process you will be able to switch to Twitter application write access, although the Twitter websites doesn’t accept your phone number.

      * After installing the Twitter mobile application, go to the tab on the right, it’s the screen showing your user details. Hit the wheel (it’s shown under the amount of tweets) and click Settings.

      * After clicking on Settings, another view opens where you have to click on your account.

      * The following view shows the options for your Account – scroll all the way down and click Security.

      * After hitting the Security option, the application will ask you to add a phone.

      * After clicking Add phone, the mobile browser will open and require you to insert your phone number.

      * After adding the phone number and pressing save, wait a few minutes. Twitter will send you a link to the phone number you just added to verify it. After clicking the link in the SMS the phone number is approved and you should be able to switch the application access to write.

      * After the apps creation you have to click on Test OAuth. Also you should login with your twitter account for test OAuth. After that you would be redirected to the OAuth Settings page. At the OAuth Settings page you can see the Consumer key and Consumer secret

      * Congratulation! your apps creation has completed.

      Google Tab

      Google Project Creation:


      * Go to the Google Developers Console https://console.developers.google.com/

      * Select an existing project, or create a new project by clicking Create Project:

      1.In the Project name field, type in a name for your new project.

      2.In the Project ID field, the console has created project ID. Optionally you can type in a project ID for your project. But project ID must be unique world-wide.
      3.Click on the Create button and the project to be created within some seconds. Once the project is created successfully, the project name would be appearing at the top of the left sidebar.

      * In the left sidebar, select APIs under the APIs & auth section. A list of Google APIs appears.

      * Find the Google+ API service and set its status to Enable.

      * In the sidebar, select Credentials under the APIs & auth section.

      * In the OAuth section of the page, select Create New Client ID.

      1.Create Client ID dialog box would be appearing for choosing application type.

      2.In the Application type section of the dialog, select Web application and click on the Configure consent screen button.

      3.Choose Email address, enter Product name and save the form.

      4.In the Authorized JavaScript origins field, enter your app origin. If you want to allow your app to run on different protocols, domains, or subdomains, then you can enter multiple origins.

      5.In the Authorized redirect URI field, enter the redirect URL.

      6.Click on Create Client ID.

      * Now you can see the Client ID for web application section. Note the Client ID and Client secret that will need to use to access the APIs.

      Linkdin Tab

      LinkedIn App Creation:


      * Go to the Apps page at LinkedIn Developer Network and login with your LinkedIn account credentials https://www.linkedin.com/secure/developer

      * Click on the Add New Application link for create new App.
      * Enter the new application details into the app registration form.

      * Company Info: If you already have not any company page, select “New Company” and enter your company name.

      * Application Info: Enter all the application details and select “Live” option as “Live Status”.

      * Contact Info: Enter your contact details.

      * Select the LinkedIn API Terms of Use checkbox.

      * Click on the Add Application button.

      * Once the application is created successfully, application details would be displayed.

      * Keep the API Key and Secret Key for later use.

      Step 8
      Go To Admin Panel > Desgin > Layouts > Select Login Page Position
      Step 9: Login Page
      Step 10: Checkout Page Layout Position
      Step 11: Checkout Login

Installation of Social Login Module 2.x_2.2.x_2.3.x

    • Step 1: Zip Extract
      Step 2: Two Folder
      Step 3
      Upload these folder by ftp correct location for example (admin to admin , catalog to catalog) (no core file effect)
      Step 4
      Go To Admin Panel > Extensions > Extensions Installer > Click On Upload Button
      Step 5: Upload TMD Social Login Module XML File
      Step 6
      Go To Admin Panel > Extensions > Modifications > Click On Refresh Button
      Step 7
      Go To Admin Panel > Extensions > Extensions > Select Module Click On Tmd Social Login Green Install Button
      Step 8: After That Click On Edit Button
      Step 9: Setting Tab
      FaceBook Tab

      Twitter Tab

      Twitter Apps Creation:


      * At first go to the https://apps.twitter.com/app/new and login at your Twitter developer account.

      * Create new apps with the following details.

      1.Name: Your application Name. This is shown to the user while authorizing.

      2.Description: Your application Description. This is shown to user while authorizing.

      3.Website: Your application website.

      4.Callback URL(*): After authorization, this URL is called with oauth_token

      * Now change the apps permission to Read and Write or Read, Write and Access direct messages. For change the apps permission, you need to add mobile number to your twitter account. If you are not able to add mobile number from the web, then please follow the below steps.

      * In order to use this process, you need to have a smart phone and install the Twitter mobile application. By this process you will be able to switch to Twitter application write access, although the Twitter websites doesn’t accept your phone number.

      * After installing the Twitter mobile application, go to the tab on the right, it’s the screen showing your user details. Hit the wheel (it’s shown under the amount of tweets) and click Settings.

      * After clicking on Settings, another view opens where you have to click on your account.

      * The following view shows the options for your Account – scroll all the way down and click Security.

      * After hitting the Security option, the application will ask you to add a phone.

      * After clicking Add phone, the mobile browser will open and require you to insert your phone number.

      * After adding the phone number and pressing save, wait a few minutes. Twitter will send you a link to the phone number you just added to verify it. After clicking the link in the SMS the phone number is approved and you should be able to switch the application access to write.

      * After the apps creation you have to click on Test OAuth. Also you should login with your twitter account for test OAuth. After that you would be redirected to the OAuth Settings page. At the OAuth Settings page you can see the Consumer key and Consumer secret

      * Congratulation! your apps creation has completed.

      Google Tab

      Google Project Creation:


      * Go to the Google Developers Console https://console.developers.google.com/

      * Select an existing project, or create a new project by clicking Create Project:

      1.In the Project name field, type in a name for your new project.

      2.In the Project ID field, the console has created project ID. Optionally you can type in a project ID for your project. But project ID must be unique world-wide.
      3.Click on the Create button and the project to be created within some seconds. Once the project is created successfully, the project name would be appearing at the top of the left sidebar.

      * In the left sidebar, select APIs under the APIs & auth section. A list of Google APIs appears.

      * Find the Google+ API service and set its status to Enable.

      * In the sidebar, select Credentials under the APIs & auth section.

      * In the OAuth section of the page, select Create New Client ID.

      1.Create Client ID dialog box would be appearing for choosing application type.

      2.In the Application type section of the dialog, select Web application and click on the Configure consent screen button.

      3.Choose Email address, enter Product name and save the form.

      4.In the Authorized JavaScript origins field, enter your app origin. If you want to allow your app to run on different protocols, domains, or subdomains, then you can enter multiple origins.

      5.In the Authorized redirect URI field, enter the redirect URL.

      6.Click on Create Client ID.

      * Now you can see the Client ID for web application section. Note the Client ID and Client secret that will need to use to access the APIs.

      Linkdin Tab

      LinkedIn App Creation:


      * Go to the Apps page at LinkedIn Developer Network and login with your LinkedIn account credentials https://www.linkedin.com/secure/developer

      * Click on the Add New Application link for create new App.
      * Enter the new application details into the app registration form.

      * Company Info: If you already have not any company page, select “New Company” and enter your company name.

      * Application Info: Enter all the application details and select “Live” option as “Live Status”.

      * Contact Info: Enter your contact details.

      * Select the LinkedIn API Terms of Use checkbox.

      * Click on the Add Application button.

      * Once the application is created successfully, application details would be displayed.

      * Keep the API Key and Secret Key for later use.

      Step 10
      Go To Admin Panel > Desgin > Layouts > Select Login Page Position
      Step 11: Login Page
      Step 12: Checkout Page Layout Position
      Step 13: Checkout Login

How To Social Login Module Journal3 Layout Setting

    • Step 1
      Go To Admin Panel > Journal > Layouts > Click On Account Edit Icon
      Step 2
      Click Content Top > Click Add Row Button > and Select Module
      Step 3: Click Opencart
      Step 4: Select TMD Social Login Module
      Step 5: Click Save Button And Clear Cache Button
      Step 6: Click Login Popup

      Step 7
      Go To Admin Panel > Journal > Layouts > Click On Checkout Edit Icon
      Step 8
      Click Content Top > Click Add Row Button > and Select Module
      Step 9: Click Opencart and Select TMD Social Login Module

      Step 10: Click Save Button And Clear Cache Button


      Step 11: Checkout Page

How To Make Facebook Application

    • Step 1: Please open this url
      https://developers.facebook.com/apps
      Step 2: Click on Add New app as per screen shoot
      Step 3: Click on Business and click Next Button
      Step 4: Add app name and Click Create App Button
      Step 5: After feel information you can see bottom screen shoot select facebook login
      Step 6: Now select web
      Step 7: Now put your website url like:https://www.yourwebsite.com Make sure its will match with your config HTTP_SERVER if you are using SSL then HTTPS_SERVER
      Step 8: After Save > Go To Setting > Basic > Add App domains Link and click save Button and copy App ID , App secret
      Step 9: Go To admin Social Login Module > Add Facebook App ID, Facebook App Secret Enable Status and save It
      Step 10: Go To FaceBook Login > Setting Add Valid OAuth Redirect URIs and save it
      Step 11: Click Live Button
      Step 12: Click Basic Setting
      Step 13: Add Privacy Policy URL Then Click Save
      Step 14: Click Live Then Show Live Button
      Step 15: Click Get Advanced Access
      Step 16: Click public_profile, email

      Step 17: Add Password Click Submit

      Step 18: Click FaceBook Icon > Now Working Fine

How To Make Twitter Apps Creation:

    • Step 1: Please open this url
      https://apps.twitter.com/app/new
      Step 2: Add Email and Click Next Button
      Step 3: Add password and Click Login Button
      Step 4: After Login Account > Click Again For Genrate API KEY and SECRET KEY Click Here > Click Create App Button
      Step 5: Add App Name and Then Click Next Button
      Step 6: Copy API Key, API Key Secret and Then Click App Setting Button
      Step 7: Go To Admin > Twitter Tab > Add Keys and Save It
      Step 8: After App Setting Showing This Page > Now Click Setup Button
      Step 9: Select App permissions, Type of App, Add Callback URI / Redirect URL, Website URL, Terms of service, Privacy policy and Then Click Save Button
      Step 10: After Save Showing This Page
      Step 11: Click Twitter Icon > Now Working Fine

How To Google Developers Console

  • Step 1: Please open this url
    https://console.developers.google.com/
    Step 2: Click Icon
    Step 3: Click New Project
    Step 4: Add Project Name and Click Create Button
    Step 5: After Create Showing Message
    Step 6: Click Enable API Button
    Step 7: Select Project , Search Google and after Search Show Google+API
    Step 8: Click Google+API > Click Enable Button
    Step 9: After Enable Show THis Page > Click Credentials
    Step 10: Click Configure consent screen Button
    Step 11: Click Create Button
    Step 12: Add App information, App domain, Developer contact information and click Save Button
    Step 13: Credentials > Click Create > Click OAuth client ID
    Step 14: Select Application type, Add Name, Add Authorized redirect URIs Click Create Button
    Step 15: After Create Show Keys
    Step 16: Add Keys and save It
    Step 17: Click Google Icon > Now Working Fine

How To LinkedIn Developers

    • Step 1: Please open this url
      https://developer.linkedin.com/
      Step 2: Click Create App Button
      Step 3: Add Login Information and Click Signin
      Step 4: Add App Information Then Click Create App Button
      Step 5: Sign In with LinkedIn > Click Request Access Button
      Step 6: Tick and Click Request Access Button

      Step 7: Go Setting Tab Click Edit Button
      Step 8: Add Domain Name and click update Button

      Step 9: Click Auth Copy Client ID: Client Secret: Add redirect URLs and Click Update
      Step 10: Add Client ID: Client Secret: Add Save It
      Step 11: Click Linkdin Icon > Now Working Fine

icon

Contact Us

If you have question which is beyond this knowledgebase Kindly contact us

Write to Us Now