CED COMMERCE. ALL RIGHTS RESERVED. SUPPORT@CEDCOMMERCE.COM [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.
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. iv. Figure 20- Step 3- Copy API credential Copy the Api Key and Secret Key and paste them to the magento SocialLogin configuration. 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- <div class="ced_sociallogin"> </div> <?php echo $this->getchildhtml("ced_sociallogin_login");?> 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.
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 II. 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. 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 III. 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. 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 support@cedcommerce.com Team Ced Commerce