-
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.
Social Login (Facebook, google, twitter, LinkedIn)
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 withoauth_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 theConsumer key
andConsumer 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 withoauth_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 theConsumer key
andConsumer 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/appsStep 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/newStep 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

Contact Us
If you have question which is beyond this knowledgebase Kindly contact us
Write to Us Now