This guide will help you install SP Social Login.
1COMPATIBLE WITH PRESTASHOP
This module is fully compatible with Prestashop Community Edition version 1.7.2.x
To install this module you must have a working version of Prestashop already installed. If you need help installing Prestashop, follow below sites and tutorials from Prestashop.com, hope everything that you need are there.
- System Requirements – Required system credentials for your prestashop installation.
- Installation Guide – Installation guide that describes how to install prestashop.
- Online prestashop guide – Online prestashop documentation that describes about prestashop in detail.
- Prestashop Forum – Prestashop forum site.
- stackoverflow.com – You can also get some useful articles from stackoverflow.
- Firstly, you must install Prestashop version 1.7.2.x.
- Secondly, prepare for installing the SP Social Login Module. The installation contains 4 steps as following:
Step 1: Login to your Prestashop admin panel and Go to Improve >> Modules >> Modules Services. At the top of the page, click the Upload a Module button.
Step 2: Click “Select File” to select your module .zip file “spsociallogin.zip” that you have downloaded.
Step 3: The uploading process will be started. You will see the message that “Module installed”.
Step 4: Finally, the new module will be located in the modules list. Search the name of module and Click on the Configure button to configure the module.
4.1 Layout Demo
You could see the appearance of SP Social Login module as following:
Note: We used the images of module’s installtion on Prestashop 1.7.2.x to illustrate
In the Administrator Page, navigate to Improve -> Modules -> Module Services and find SP Social Login to configure.
Let’s look at the parameter in detail:
Facebook, Google, Twitter, LinkedIn, Instagram, Yahoo.
4.3 How to configuration social button.
4.3.1 How do I get the Facebook application ID and application secret?
Step 1: Go to page: https://developers.facebook.com/apps and then choose “Add a New app”. After that, you need to fill in your display name and contact email. Remember to click “Create App ID”.
Step 2: At the bottom of the left hand menu click “Add Product link”.
Step 3: Click button “Setup”.
Step 4: Select “Web”.
Step 5: Enter your Site URL and hit save. Hit Continue then keep clicking Next, ignoring all the code, until you get to Step 5.
Step 6: In the left hand menu you should now see Login to Facebook, click the “Settings” menu item underneath it.
Step 7: In this step, go to “Review the application”, select “public” to Your app is live and available to everyone..
Step 8: Now, go to “Installation >> Basic Information” to get App ID and App Secret
Step 9: After finishing, let’s come back to Admin page to enter your App ID and App Secret.
4.3.2 How do I get the Google client ID and client Secret?
Step 1: Go to page: https://code.google.com/apis/console/ and then click “Create Project”.
After that, fill in your Project Name and then click Create:
Step 2: Come to Dashboard and click “Enable APIS And Servies”.
Step 3: Click “Credentials” tab and you will see 3 subtitles as demonstrated below. Please click “OAuth consent screen” tab on which you need to fill in your Product name shown to users and then click Save.
Step 4: Back to the “Credential” tab, after clicking “add credentials” button, you will see several choices. Please Choose “OAuth client ID” and “Web application” afterwards.
Then, fill in all information required.
Step 5: Get your Client IP and Client Secret
4.3.3 How do I get the Twitter Consumer Key and Consumer Secret?
Step 1: Go to page: https://dev.twitter.com/apps and then choose “Add a New app”. After that, you need to fill in your name, description, website, calback URL. Remember to click “Create your Twitter application”.
Step 2: Click “Keys and Access Tokens” tab to get Consumer Key and Consumer Secret
4.3.4 How do I get the LinkedIn Client ID and Client Secret?
Step 1: Go to page: https://www.linkedin.com/secure/developer and then choose “Create an application””.
After that, you need to fill in required information. Remember to click “To send”.
Step 2: Get Client ID and Client Secret. You will see some other fields but there’s no need
for you to fill in
4.3.5 How do I get the Yahoo Client ID and Client Secret?
Step 1: Go to page: https://developer.yahoo.com/apps/ and then choose “Create an app””.
After that, you need to fill in required information. Remember to click “Create App”.
Step 2: Step 2: Get your Client ID and Client Secret:
4.3.6 How do I get the Instagram Client ID and Client Secret?
Step 1: Go to page: http://instagram.com/developer/clients/manage/ and then click “Click a New Client””.
Step 2: After that, you need to fill in required information.
Step 3: After finishing these 2 steps, you can get your Client ID. Click “MANAGE” to get Client Secret: