Social Login User Manual by CedCommerce

© CED COMMERCE. ALL RIGHTS RESERVED.

[email protected]

[SocialLogin] SocialLogin extension is very useful extension for the magento ecommerce platform. It provides your store the feature to login / Register on magento without filling all the details about yourself. It provides four very popular social networking site login feature.

© Ced Commerce. All Rights Reserved.

2

SocialLogin Admin User Manual

VER-1.0


3

Contents I. Overview ....................................................................................................................................4

II. Configure SocialLogin ..................................................................................................................4

i. Google Options .......................................................................................................................6

ii. Facebook Options .................................................................................................................. 10

iii. Twitter Options ..................................................................................................................... 15

iv. LinkedIn Options ................................................................................................................... 18

III. Frontend Login / Register Panel .............................................................................................. 21

IV. Customize Position of Login Buttons ....................................................................................... 22

V. Customer Account Pages ........................................................................................................... 24

I. Google SocialLogin................................................................................................................. 24

II. Facebook SocialLogin ............................................................................................................. 26

III. Twitter SocialLogin............................................................................................................. 27

IV. LinkedIn SocialLogin ........................................................................................................... 28

VI. Support................................................................................................................................. 29


4

I. Overview The CedCommerce SocialLogin extension is basically a magento extension to login on

ecommerce store without filling all the details of email address and other required

fields. It provides you one click login features to the store. Currently it provides four

type of social networking site login feature. Facebook, Google, Twitter and LinkedIn

login feature to the store.

Admin can follow this user manual guide to configure the login on the magento store.

The entire social login can be separately disabled by the admin site. It saves much time

of the customer to fill the entries of the login detail and login or register to the system.

II. Configure SocialLogin The website admin can manage the SocialLogin extension configuration by going to the

System -> Configuration menu in admin site.


5

Figure 1- Social Login Configuration

When you click on the above configuration link you will see the following fields. It will show

total four social login configuration fieldset. When you enable the particular social login

configuration then only the setting field will come and show you the api credential filling area.


6

Figure 2- Configuration Settings

SocialLogin settings information:-

i. Google Options The Google is one of the very well-known sites over the web. Generally most of

the users have the account for the Google so they can do login very easily on the

magento store by just one click Google click button.

To get the credential for the API details of the Google admin need to create a

GoogleProject for the Google developer console. Admin can reach to the

developer console by following link.

https://console.developers.google.com/

Click on the above link if you do not have account then you can signup or if you

have account then can do login and proceed to the creation of the Google

Project.


7

Click on the link create project link it will show a popup to create a new project

with the project name and all details.

Figure 3 - Step 1- Create Project

The popup will show and ask for the project name Just fill the name and click

create button. It will take few seconds and it will show you the next screen.

Figure 4- Step 2- Name Project

On the next screen you need to expand the left section “API &auth” under this

you will see the “Credentials” link and create a new Client Id.


8

Figure 5- Step 3- Create new Client Id

Then you need to select the project type information, you need to select the

“Web Application” type. You need to enter the name of the project and select

the email id for the next step. After then the following screen will show to you.

You need to enter the Domain base url of the site. Here it is filled

https://www.example.com and the callback url you need to enter here that is as

following https://www.example.com/index.php/cedsociallogin/google/connect/ this

means the example.com is your domain of the magento installation then after

that you need to append the url “index.php/cedsociallogin/google/connect/” and

fill in the Google Project section. Then after that click on the “Create Client Id” button.


9

Figure 6- Step 4- Set Call back url

After filling all these entries your configuration is ready. As per the following

screen you will get the credential you need the “Client Id” and “Secret Key” and

paste it in the configuration section. Now your magento store is ready with the

login with the Google link.


10

Figure 7- Step 5- Copy Api Credentials

Copy the credential for the client if and secret key then paste it on the magento

configuration panel.

Figure 8- Step 6- Paste Api Credentials

ii. Facebook Options Facebook is one of the most popular social networking site over the web. It is

having more than 1 billion active users on the facebook site. So if any customer

wants to place order with the login of the Facebook connect he can do easily by

clicking on the facebook button one click.

To enable this feature admin need to do the following settings to get the App Id

and Secret Key. Admin need to create a new facebook application to make it

working he can create new application by the following link. Admin can go to the

link https://developers.facebook.com/ visit to this link and click on the “Add new

App” link under the “My App” menu.


11

Figure 9- Step1 - Create Facebook App

It will open up a popup to ask for the app type select he web app and click continue.

Figure 10- Step 2- Select Website type


12

On the next popup you will see it will ask for the name of the app. Enter the

name and click continue.

Figure 11- Step 3- Create new Facebook App Id

It will show the below popup select the application type and there category.

Then click on the create app id.

Figure 12 - Step 4- Create App Id


13

On the main setting configuration page of the app please go to the settings tab

and enter the following details.

Figure 13- Step 5 - Set web url and email

You can enter the site url, your content email and click on the save changes

button.


14

Figure 14- Step 6 - Set support email

On the app details tab enter the support email address.

Figure 15- Step 7- turn live app


15

Now to make app live go to the “Status and Review” tab and click on the “yes” make it

live button.

Figure 16- Step 8- Copy Api credential

Go to the “Dashboard” link and copy the app id and secret key.

Paste the information in the magento SocialLogin Facebook Options fieldset.

Figure 17- Step 9- Paste api credential

Now it will show on the frontend the facebook login button on the frontend.

iii. Twitter Options Twitter is also a very popular social networking site over the web. To enable the

login functionality with the twitter admin need to create a twitter app. He can

create a new app by the following link https://apps.twitter.com/ and click on the

button “Create New App”. It will show a full form to enter the information

regarding the app.


16

Figure 18- Step 1- Create app

When you click on the “Create new App” button you will be able to see the

following form enter the entire required field.


17

Figure 19- Step 2- Fill infomration


18

Here in the above information the callback url field is important where you need

to give stress http://example.com/index.php/cedsociallogin/twitter/connect/

the call back url should be append “cedsociallogin/twitter/connect/” further to

the magento base url. Accept the agreement and click on the “Create your

Twitter application” button.

Now go to the “Key and Access Token” and copy the api credential.

Figure 20- Step 3- Copy API credential

Copy the Api Key and Secret Key and paste them to the magento SocialLogin

configuration.

iv. LinkedIn Options LinkedIn is one of the very popular social networking site for the professionals.

Admin can easily show the login option with the LinkedIn on the site. He need to

create an application for the linkedin. This can be created by the following

urlhttps://www.linkedin.com/developer/apps here click on the “Create Application”

button.


19

Figure 21- Step 1- Create App

Click on the “Create new app” button it will show the form for the application form. Fill the

fields agree the terms and condition and submit.


20

On the next step it will ask you for the access permission you can select the “r_basicprofile”,

“r_emailaddress” permission for the accessing the account related information. After then you

need Authorized redirect url register. It will be something like

http://example.com/index.php/cedsociallogin/linkedin/connect/ your magento base url will be

appended by the “cedsociallogin/linkedin/connect/” url key.

Figure 22- Step 2- Set permission

Now copy the details of the API key and Secret Key paste it on magento configuration panel for

linkedin.


21

Figure 23- Step 3- Paste API credential

After doing all the configuration setting you can see on the frontend the login buttons will be

visible properly and any customer can login on the magento store by the clicking the social login

button.

III. Frontend Login / Register Panel Customer can see the SocialLogin icons for the login on the magneto customer login

page and customer register page. If the customer is not registered with the social

login registered email id then it will create a new account to the magento store with

social login email id.

Figure 24- Frontend Login Panel

Login page will show as the above on the screen you can get the entire social

login icon to login on the magneto store. The same way customer account

register page also show


22

the social login buttons on the account register page.

Figure 25- Registration Panel

Customer can register/ login by the login page or the account registration pages.

IV. Customize Position of Login Buttons There are different ways by using them the developed can customize the position of the

Login buttons on any page. Suppose We want to put the login buttons on the

customer/account/login page. Means on the login page the social login button should

come. We already customize it. But some time the merchant have different theme on

the website in that case the merchant need to do few scripting and buttons will show on

their required position.


23

a) Add login buttons on customer login page.

First of all you need to add the following xml tags in your layout file.

app\design\frontend\[your package]\[your theme]\layout\persistent.xml

find the handle –

<customer_account_login>

<reference name="head">

<action method="addItem">

<type>skin_css</type>

<name>ced_sociallogin/css/styles.css</name>

</action>

</reference>

<reference name="customer_form_login">

<action method="setTemplate">

<template>persistent/customer/form/login.phtml</template>

</action>

<block type="persistent/form_remember"

name="persistent.remember.me" template="persistent/remember_me.phtml" />

<block type="core/template" name="persistent.remember.me.tooltip"

template="persistent/remember_me_tooltip.phtml" />

<block type="sociallogin/login" name="ced_sociallogin_login">

<block type="sociallogin/google_button"

name="ced_google_login_button" />

<block type="sociallogin/facebook_button"

name="ced_facebook_login_button" />

<block type="sociallogin/twitter_button"

name="ced_twitter_login_button" />

<block type="sociallogin/linkedin_button"

name="ced_linkedin_login_button" />

</block>

</reference>

</customer_account_login>


24

Add the above green lines where you want to show the login buttons.

After then go to the phtml template file and call the following code-

After doing this the login button will appear on the login panel.

V. Customer Account Pages

Here customer gets the features to connect the magento account store with the

social login accounts.

I. Google SocialLogin

Here on the customer account section there customer will get the link for the “Google

SocialLogin” link to see the account of the Google and at any time he can disconnect the

account details Google Social Login.

<div class="ced_sociallogin">

<?php echo $this->getChildHtml("ced_sociallogin_login"); ?>

</div>


25

Figure 26- Google Account page

Above shown the Google account is not connected with the magento customer can

connect his Google account anytime with the magento store.


26

Figure 27- Google Connected page

When your account is properly connected with the Google then it will show the

abovepage. If any profile pic is available then show else the email id and Google account

id will be show on the page.

II. Facebook SocialLogin The same way the Google account is connected with the magneto store in the same way we can

connect the Facebook account and after the connection a disconnect button will show on the

top right customer can any time disconnect the facebook login from the magneto store.


27

Figure 28- Facebook Account page

Above shown the facebook connected page. Any time the customer can click on the disconnect

button and remove account from the magento store.

III. Twitter SocialLogin Twitter social login account page is same as the Google and Facebook account pages. The

twitter account register does not register with its original email id because twitter does not

return the correct email id of the customer to create account. So custome r need to manually

change there and make the email id change with his correct email id.


28

Figure 29- Twitter Acount page

IV. LinkedIn SocialLogin LinkedIn is one of the very popular social networking site for the professionals. It also works

at the same as Google, Facebook, twitter account can be created any time by going to the

link “LinkedIn Social Login” and any time can disconnect the account from the magento.


29

Figure 30- LinkedinAcount page

VI. Support For any queries or reporting any bugs or issues please contact us at

[email protected]

Team Ced Commerce

Social Login User Manual by CedCommerce

Software

Transcript of Social Login User Manual by CedCommerce