Post on 01-Sep-2019
support@magestore.com
sales@magestore.com
Phone: +1-415-954-7137
SOCIAL LOGIN
USER GUIDE
Version 1.0
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 2
Table of Contents
1. INTRODUCTION ............................................................................... 3
2. HOW TO USE ..................................................................................... 4
2.1. Show Social Login buttons at many positions in front-end ............................. 4
2.2. Customer can login to web-shop by many social network accounts............... 6
3. HOW TO CONFIGURE .................................................................. 11
3.1. General configuration ...................................................................................19
3.2. Specified configuration ..................................................................................19
3.3. Show the Social Login buttons in the different positions ..............................55
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 3
1. INTRODUCTION
The fact that a lot of information is required when creating a new account can discourage
Customers from doing so on your site. However, most of them already have social
accounts such as Facebook, Google, Yahoo, Twitter, LinkedIn, etc. Why don’t you
enable them to use such accounts to log in by using our Social Login extension?
Customers just need to click on the account button they like, and then enter their
username and password!
FEATURES FULL LIST
For Customers
Able to choose one among up to 18 types of social accounts to log in. Just need to
enter their usernames and passwords to log in. No other information is required.
If Customers already signed in their social account, System will automatically use
the information from their social account to log in.
A new password will be sent to customers to use as a separate account for the site
after they sign in by social accounts.
Able to choose to register a new account as normal
For Admin
Able to change the order of social login buttons in frontend.
Put the Social Login bar in different positions.
Others
Responsive Magento Social Login extension
Social Login is 100% open-source
License Certificate valid for 1 live Magento installation and unlimited test
Magento installations (No license key required)
Easy to install and configure
User-friendly interface
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 4
2. HOW TO USE
2.1. Show Social Login buttons at many positions in front-end
Show the Social Login buttons in the Header
Show the Social Login buttons below Customer login form
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 5
Show the Social Login buttons below Customer registration form
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 6
2.2. Customer can log in to web-shop by many social network accounts
Log in using Facebook account
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 7
Log in using Instagram account
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 8
Log in using Twitter account
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 9
Log in using Amazon account
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 10
Log in using Google account
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 11
Log in using Yahoo account
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 12
Log in using LinkedIn account
Log in using MyOpenId account
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 14
Log in using LiveJournal account
Log in using AOL account
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 15
Log in using WordPress account
Log in using Clavid account
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 16
Log in using Orange account
Log in using FoursQuare account
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 18
Log in using StackExchange account
Log in using Vk account
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 19
3. HOW TO CONFIGURE
3.1. General configuration
Go to System > Configuration
Select Social Login tab
Select General Configuration section
The configuration fields are listed as follows
No Field Sample Description
1 Active Yes Activate/ Deactivate extension
2 Shown Position Header Position of Social Login buttons in
frontend
3 Shown
Direction
Left to Right Direction of Social Login buttons in
frontend
4 Number of
visible buttons
4 The number of button visible, others will
be shown only when customer hovers
“Other login”
After filling data into the configuration fields, click on the Save Config button to save
your work.
3.2. Specified configuration
3.2.1. Facebook Login Configuration
Go to Social Login > Settings
Select Facebook Login Configuration section
The configuration fields are listed as follows
No Field Sample Description
1 Active Yes Show/ Hide Facebook Login button
2 Application ID 124951910915 Facebook application ID (*)
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 20
…
3 Application Secret c04561f15ce948
94...
Facebook application secret (*)
4 Send Password To
Customer
Yes Send account info to customer after
logging in by using Facebook Login
5 Sort order 1 The order of buttons displaying in the
list
After filling data into the configuration fields, click on the Save Config button to save
your work.
(*) How do I get the Facebook application ID and application secret?
You can get Facebook Application ID and Application Secret by following these steps
below.
Click on the Register link at the Facebook Login Configuration section to
register your Facebook Application. You will be redirected to the Facebook
Application page.
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 21
Fill in the required fields and click on the Create App button.
Facebook provides you with the Application ID, Application Secret.
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 22
Get the Application ID, App Secret and fill them into the fields of Facebook
Login Configuration section.
3.2.2 Instagram Login Configuration
Go to System > Configuration
Select Social Login tab
Select Instagram Login Configuration section
The configuration fields are listed as follows
No Field Sample Description
1 Active Yes Show/Hide Instagram Login
button
2 Client ID d2b4b9adbbb0… Instagram application ID (*)
3 Client Secret f506f959f736460… Instagram application Secret (*)
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 23
4 Redirect Url http://demo.magestore.com
/social-
login/dev/index.php/admin/
sociallogin/Instagramlogin/
login/
Use this link for redirect url field
when registering with Instagram
API
5 Sort Order 3 The order of buttons displaying
in the list
After filling data into the configuration fields, click on Save Config button
(*) How do I get Instagram Client Id and Client Secret?
Click on the Register link in the Instagram Login Configuration section to
register your application on Instagram
Click on the Register Your Application button if you have already logged in. If
not, you have to login to Instagram first.
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 24
Then, click on the Register a New Client button
Fill in your Application information, then click on the Register button.
Website: your website
OAuth redirec_url: use this link for redirect url field when registering
with Instagram API
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 25
Get Client ID and Client Secret to fill in corresponding fields in Instagram
Login Configuration section
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 26
3.2.3. Twitter Login Configuration
Go to Social Login > Settings
Select Twitter Login Configuration section
The configuration fields are listed as follows
No Field Sample Description
1 Active Yes Show/ Hide Twitter Login button
2 Client ID hCDOZSI5J5RAe7… Twitter Consumer Key (*)
3 Client Secret UbJRjdzf5mGfIWI… Twitter Consumer Secret (*)
4 Login Notice If you have an
account on {{store}},
please login,
otherwise register a
new account to
connect to Twitter
Message displayed after customers log
in by Twitter account
5 Sort Order 2 The order of buttons displaying in the
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 27
list
After filling data into the configuration fields, click on the Save Config button
(*) How do I get the Twitter Consumer ID and Application Secret?
Click on the Register link in the Twitter Login configuration section to register
your Twitter application. You will be redirected to the Twitter application page.
Fill your web-shop info into the required fields and click on the Create your
Twitter application button.
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 29
Twitter provides you with the API Key and API Secret.
Get the API key and API secret to fill into the corresponding fields of the Twitter
Login configuration section.
3.2.4. Amazon Login Configuration
Go to System > Configuration
Select Social Login tab
Select Amazon Login Configuration section
The configuration fields are listed as follows
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 30
No Field Sample Description
1 Active Yes Show/Hide Amazon Login
button
2 Client ID amzn1.application… Amazon application ID (*)
3 Client Secret 7aa4a8c4f5bed1e6c Amazon application Secret
(*)
4 Allowed Return
URLs
https://demo.magestore.co
m
Use this link for Allowed
Return URLs field when
registering with Amazon
API
5 Send Password To
Customer
Yes Allow sending password to
customer after successful
register
6 Sort Order 4 The order of buttons
displaying in the list
After filling data into the configuration fields, click on the Save Config button
(*) How do I get Amazon Client Id and Client Secret?
Click on the Register link in the Amazon Login Configuration section to
register your application on Amazon
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 31
You will be redirected to an Amazon guide page. In this guide you will be shown
how to add Login with Amazon to your website or web service. After completing
this guide you should have a working Login with Amazon button on your website
to allow users to log in with their Amazon credentials.
3.2.5. Google Login Configuration
Go to Social Login > Settings
Select Google Login Configuration section
The configuration fields are listed as follows
No Field Sample Description
1 Active Yes Show/ Hide Google
Login button
2 Client ID bMDKA5J5RAe7… Google Client ID (*)
3 Redirect URL http://demo-
extension.magestore.com/san
Please use this link for
redirect url field when
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 32
dbox/social-
login/index.php/sociallogin/g
ologin/user/
registering with Google
API
4 Client Secret 7Db82kVbLEKav2… Google Client Secret (*)
5 Send Password To
Customer
Yes Send account info to
customers after logging
in by using Google
account
6 Sort Order 3 The order of buttons
displaying in the list
After filling data into the configuration fields, click on the Save Config button to save
your work.
(*) How do I get the Google Consumer Key and Consumer Secret?
Click on the Register link in the Google Login configuration section to register
your web-shop on Google. You will be redirected to the Google registration page.
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 33
After creating a project successfully, click on the project link. In the Project
Dashboard, go to APIS & AUTH > Credentials > Create New Client ID. Then,
fill your web-shop information in.
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 34
Get Client ID and Client Secret to fill in corresponding fields in Google Login
Configuration section
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 35
3.2.6. LinkedIn Login Configuration
Go to Social Login > Settings
Select LinkedIn Login Configuration section
The configuration fields are listed as follows
No Field Sample Description
1 Active Yes Show/ Hide Linkedin Login button
2 Client API 7gxz5hdq4h8e LinkedIn Consumer Key (*)
3 Client Secret KF2zb7tzMvXIv
cu8
LinkedIn Consumer Secret (*)
4 Send Password To
Customer
Yes Send account info to customer after
logging in by using LinkedIn account
5 Confirm password No Require password to be confirmed or not
6 Sort Order 4 The order of buttons displaying in the
list
After filling data into the configuration fields, click on the Save Config button
(*) How do I get the LinkedIn Consumer Key and Consumer Secret?
Click on the Register link in the LinkedIn Login configuration section to register
your application on LinkedIn
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 36
Fill your web-shop info into the fields and click on the Join LinkedIn button
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 37
After successful registration, you will be redirected to the page below
Click on the Add New Application link. Enter your web-shop information and get Client
API and Client Secret to fill in the corresponding fields in LinkedIn Login
Configuration section.
3.2.7. Yahoo Login Configuration
Go to Social Login > Settings
Select Yahoo Login Configuration section
The configuration fields are listed as follows
No Field Sample Description
1 Active Yes Show/ Hide Yahoo Login button
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 38
2 Application ID CbMx… Yahoo application ID (*)
3 Send Password
To Customer
Yes Send account info to customer after
logging in by using Yahoo account
4 Consumer Key bMDKA5J5RAe7… Yahoo Consumer Key (*)
5 Consumer
Secret
7Db82kVbLEKav2… Yahoo Consumer Secret (*)
6 Sort Order 6 The order of buttons displaying in the
list
After filling data into the configuration fields, click on the Save Config button.
(*) How do I get the Yahoo Application ID, Consumer Key and Consumer Secret?
Click on the Register link in the Yahoo Login configuration section to register
your application on Yahoo.
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 39
Fill your web-shop info into the fields and click on Get API Key button.
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 40
In the Permissions section, change Social Directory (Profiles) option from None
to Read/Write Public and Private and click on the Save and Change Consumer
Key button.
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 41
Yahoo provides you with the Application ID, Consumer Key and Consumer
Secret.
Get the Application ID, Consumer Key and Consumer Secret to fill into the fields
of the Yahoo Login configuration section.
3.2.8. AOL Login Configuration
Go to Social Login > Settings
Select AOL Login Configuration section
The configuration fields are listed as follows
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 42
No Field Sample Description
1 Active Yes Show/Hide AOL Login button
2 Send Password
To Customer
Yes Send account info to customer after logging
in by using AOL account
3 Sort Order 6 The order of buttons displaying in the list
After filling data into the configuration fields, click on the Save Config button.
3.2.9. WordPress Login Configuration
Go to Social Login > Settings
Select WordPress Login Configuration section
The configuration fields are listed as follows
No Field Sample Description
1 Active Yes Show/Hide WordPress Login button
2 Send Password Yes Send password info to customer after logging
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 43
To Customer in by using AOL account
3 Sort Order 7 The order of buttons displaying in the list
After filling data into the configuration fields, click on the Save Config button.
3.2.10. MyOpenId Login Configuration
Go to Social Login > Settings
Select MyOpenId Login Configuration section
The configuration fields are listed as following
No Field Sample Description
1 Active Yes Show/Hide MyOpenId Login button
2 Send Password
To Customer
Yes Send password info to customer after logging
in by using MyOpenId account
3 Sort Order 7 The order of buttons displaying in the list
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 44
After filling data into the configuration fields, click on the Save Config button.
3.2.11. Livejournal Login Configuration
Go to Social Login > Settings
Select Livejournal Login Configuration section
The configuration fields are listed as following
No Field Sample Description
1 Active Yes Show/Hide Livejournal Login button
2 Send Password
To Customer
Yes Send account info to customer after logging
in by using Livejournal account
3 Sort Order 7 The order of buttons displaying in the list
After filling data into the configuration fields, click on the Save Config button.
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 45
3.2.12. Clavid Login Configuration
Go to Social Login > Settings
Select Clavid Login Configuration section
The configuration fields are listed as follows
No Field Sample Description
1 Active Yes Show/Hide Clavid Login button
2 Send Password
To Customer
Yes Send account info to customer after logging
in by using Clavid account
3 Sort Order 10 The order of buttons displaying in the list
After filling data into the configuration fields, click on the Save Config button.
3.2.13. Orange Login Configuration
Go to Social Login > Settings
Select Orange Login Configuration section
The configuration fields are listed as follows
No Field Sample Description
1 Active Yes Show/Hide Orange Login button
2 Send Password
To Customer
Yes Send account info to customer after logging
in by using Orange account
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 46
3 Sort Order 11 The order of buttons displaying in the list
After filling data into the configuration fields, click on the Save Config button.
3.2.14. FoursQuare Login Configuration
Go to Social Login > Settings
Select FoursQuare Login Configuration section
The configuration fields are listed as following
No Field Sample Description
1
Active Yes Show/Hide FoursQuare Login
button
2 Client Key bMDKA5J5R
Ae7…
FoursQuare Client Key (*)
3 Client Secret 7Db82kVbLE
Kav2…
FoursQuare Client Secret (*)
4 Send
Password To
Customer
Yes Send account info to customer after
logging in by using AOL account
5 Sort Order 12 The order of buttons displaying in
the list
After filling data into the configuration fields, click on the Save Config button.
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 47
(*) How do I get the FoursQuare Client Key and Client Secret?
Click on the Register link in the FoursQuare Login Configuration section to
register your application on FoursQuare
Fill your web-shop info into the fields and click on the Save Changes button.
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 48
FoursQuare provides you with the Client Key and Client Secret. Get them and fill
in corresponding fields in FoursQuare Login Configuration.
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 49
3.2.15. Windows Live Login Configuration
Go to Social Login > Settings
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 50
Select Windows Login Configuration section
The configuration fields are listed as follows
No Field Sample Description
1 Active Yes Show/Hide Windows Live Login
button
2 Client Key bMDKA5J5RAe7… Windows Live Client Key (*)
3 Client Secret 7Db82kVbLEKav2… Windows Live Client Secret (*)
5 Sort Order 13 The order of buttons displaying in
the list
After filling data into the configuration fields, click on the Save Config button
(*) How do I get the Windows Live Client Key and Client Secret?
Click on the Register link in the Windows Live Login configuration section to
register your application on Windows Live.
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 51
Then, you click on the My apps link
Next, enter Application name.
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 52
Windows Live provides you with the Client Key and Client Secret. Here you need
to enter redirect domain on the Redirect domain box
Get the Client ID and Client secret to fill in corresponding fields in Windows Live
Login Configuration.
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 53
3.2.16. Persona Login Configuration
Go to Social Login > Settings
Select Persona Login Configuration section
The configuration fields are listed as following
No Field Sample Description
1 Active Yes Show/Hide Persona Login button
2 Send Password
To Customer
Yes Send password info to customer after
logging in by using Persona Login
3 Sort Order 15 The order of buttons displaying in the list
After filling data into the configuration fields, click on the Save Config button.
3.2.17. Stack Exchange Login Configuration
Go to Social Login > Settings
Select Stack Exchange Login Configuration section
The configuration fields are listed as follows
No Field Sample Description
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 54
1 Active Yes Show/Hide Stack Exchange Login button
2 Send Password
To Customer
Yes Send account info to customer after logging
in by using Stack Exchange Login
3 Sort Order 15 The order of buttons displaying in the list
After filling data into the configuration fields, click on the Save Config button.
3.2.18. Vk Login Configuration
Go to Social Login > Settings
Select Vk Login Configuration section
The configuration fields are listed as follows
No Field Sample Description
1 Active Yes Show/Hide Windows Live
Login button
2 App ID 4125434 Vk application Key (*)
3 Secure Key VGqJFZ0Uozvmjpq
RthyS
Vk secure Key (*)
4 Send Password To
Customer
Yes Send password info to customer
after logging in by using Vk
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 55
Login
5 Sort Order 20 The order of buttons displaying
in the list
After filling data into the configuration fields, click on the Save Config button.
(*) How do I get the Vk App ID and Secure Key?
Click on the Register link in the Vk Login Configuration section to register your
application on Vk.
Fill your web-shop information, then click on the Connect Application button
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 56
Get Application ID and Secure Key to fill in corresponding fields in Vk Login
Configuration section
3.3. Show the Social Login buttons in the different positions
The extension allows you to choose among 5 positions to show the Social Login
buttons as following.
Copyright (c) 2009-2016 www.magestore.com
Social Login v1.0 User Guide 57
Header
Above customer login form
Below customer login form
Above customer registration form
Below customer registration form
Also, you can show the Social Login buttons in other positions by following these
steps below.
Open the file .phtml which contains the position that you want to show login
buttons.
Insert the code below into that file.
<?php echo $this->getLayout()-
>createBlock("Magestore\Sociallogin\Block\Buttons")-
>setTemplate("Magestore_Sociallogin::buttons.phtml")-
>setNumberButtonShow(4)->toHtml(); ?>
Another way
In back-end, open the CMS page which contains the position that you want to
show login buttons.
You can put a social login button block on a CMS page. Here is an example
that we put a login block with 4 buttons. Replace "4" in this code with the
number of buttons you want to show.
{{block class="Magestore\Sociallogin\Block\Buttons"
name="buttons.sociallogin"
template="Magestore_Sociallogin::buttons.phtml" number_button_show="4"}}
After finishing your configuration, click on the Save Config button to save your work.
-------------------------------------------------THE END--------------------------------------------