As we know, most of users have Facebook account. So, it’s effective to let them login into your store just with their Facebook username and password. I think this will definitely boost the user experience of your online store. In this article, I will teach you how to integrate Facebook login functionality into your store. Whenever you are using default or bootstrap template, it will work smoothly.
Facebook loin in bootstrap template:
Facebook login in glass gray template:
Step 1. Go to https://developers.facebook.com/apps/ to create a new app with your Facebook account.
Step 2. Go to Settings tab to select website platform to enter site url and then enter the App domains.
Note: Don’t add http://and www. for App Domains field.
Step 3. Download facebook_login.zip from dropbox.
Step 4. Unzip it and copy following three folds into your tomatocart root directory.
- admin
- includes
- templates
If you are using glass gray template:
Step 5. Find templates/glass_gray/index.php and open it with your favorite text editor:
— Find following code:
<?php echo osc_link_object(osc_href_link(FILENAME_ACCOUNT, 'logoff', 'SSL'), $osC_Language->get('logoff')); ?>>
— Replace it with:
<?php echo osc_link_object(osc_href_link(FILENAME_ACCOUNT, 'logoff', 'SSL'), $osC_Language->get('logoff'), 'id="fbLogout"'); ?>
— Find following code:
<?php if ($osC_Services->isStarted('debug') && defined('SERVICE_DEBUG_SHOW_CSS_JAVASCRIPT') && SERVICE_DEBUG_SHOW_CSS_JAVASCRIPT == 1) { ?> <script type="text/javascript" src="includes/javascript/pop_dialog.js"></script> <script type="text/javascript" src="ext/autocompleter/Autocompleter.js"></script> <script type="text/javascript" src="ext/autocompleter/Autocompleter.Request.js"></script> <script type="text/javascript" src="ext/autocompleter/Observer.js"></script> <script type="text/javascript" src="includes/javascript/auto_completer.js"></script> <script type="text/javascript" src="includes/javascript/popup_cart.js"></script> <script type="text/javascript" src="includes/javascript/bookmark.js"></script> <?php }else { ?> <script type="text/javascript" src="templates/<?php echo $osC_Template->getCode(); ?>/javascript/all.min.js"></script> <?php }?>
— Add following code after it:
<!-- Facebook Login --> <?php if (defined('SERVICE_FACEBOOK_LOGIN_STATUS') && SERVICE_FACEBOOK_LOGIN_STATUS == 1): ?> <script> var fbLoginConfig = { appId: '<?php echo SERVICE_FACEBOOK_LOGIN_APPID; ?>', tplCode: '<?php echo $osC_Template->getCode(); ?>' }; </script> <script type="text/javascript" src="includes/javascript/fb_login.js"></script> <?php endif; ?> <!-- Facebook Login -->
If you are using bootstrap template:
Step 5. Find templates/bootstrap/index.php and open it with your favourite text editor:
— Find following code:
<li><?php echo osc_link_object(osc_href_link(FILENAME_ACCOUNT, 'logoff', 'SSL'), $osC_Language->get('logoff')?></li>
— Replace it with:
<li><?php echo osc_link_object(osc_href_link(FILENAME_ACCOUNT, 'logoff', 'SSL'), $osC_Language->get('logoff'), 'id="fbLogout"'); ?></li>
— Find following code:
<?php if ($osC_Services->isStarted('debug') && defined('SERVICE_DEBUG_SHOW_CSS_JAVASCRIPT') && SERVICE_DEBUG_SHOW_CSS_JAVASCRIPT == 1) { ?> <script type="text/javascript" src="includes/javascript/pop_dialog.js"></script> <script type="text/javascript" src="ext/autocompleter/Autocompleter.js"></script> <script type="text/javascript" src="ext/autocompleter/Autocompleter.Request.js"></script> <script type="text/javascript" src="ext/autocompleter/Observer.js"></script> <script type="text/javascript" src="includes/javascript/auto_completer.js"></script> <script type="text/javascript" src="includes/javascript/popup_cart.js"></script> <script type="text/javascript" src="includes/javascript/bookmark.js"></script> <script type="text/javascript" src="templates/<?php echo $osC_Template->getCode(); ?>/javascript/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="templates/<?php echo $osC_Template->getCode(); ?>/javascript/bootstrap.min.js"></script> <?php }else { ?> <script type="text/javascript" src="templates/<?php echo $osC_Template->getCode(); ?>/javascript/all.min.js"></script> <?php }?>
— Add following code after it:
<!-- Start: Facebook Login --> <?php if (defined('SERVICE_FACEBOOK_LOGIN_STATUS') && SERVICE_FACEBOOK_LOGIN_STATUS == 1): ?> <script> var fbLoginConfig = { appId: '<?php echo SERVICE_FACEBOOK_LOGIN_APPID; ?>', tplCode: '<?php echo $osC_Template->getCode(); ?>' }; </script> <script type="text/javascript" src="includes/javascript/fb_login.js"></script> <?php endif; ?> <!-- End: Facebook Login -->
Step 6. Go to admin panel > Start Menu > Definitions > Languages > Edit Module.
— Add following language definition into account group.
login_with_facebook: Login with Facebook
Step 7. Go to admin panel > Start Menu > Modules > Services.
— Install Facebook login
— Set status to True and enter your Facebook APP ID
That’s it. I provide free technical support service for Arvixe user. If you need any technical support, don’t hesitate to contact me.
Looking for quality TomatoCart Hosting? Look no further than Arvixe Web Hosting!
Jack, it’s great feature! Thanks. Just idea: it will be better to implement UNIVERSAL module for most popular social networks
also would be better to have login process in same window as if any one wants to make app out of their site they cant use the fb login module. in their app. using webview on andriod or ios . is there a way to make it not use the popup and open on the same window for auth. this would be more sensible and versatile for the login and make it use wider then just normal web use
what is the correct
redirect_uri
that yo have it using as i think i have found the way to do it but i need to knwo the right redirect_uri to use
also i belive using display=page instead of display=popup will give the same effect
all good rewrote it in php to use same window and it works fine now in wbeview for any app. thanks anyway
Hi Jack
Please login using Yahoo Mail also be taught
Thanks
Hi just read this article and wanted to say it was well written. You have a new fan :).
Thanks
Hi.. i have integrated this cod but i am not getting user details in my db.. But i dont know how the user get logged in.. only password is being inserted in toc_customers.. Please help me out..
Regards,
Chirag
Hi,
Please send your host, username and password information to my email: waring3yin@icloud.com. I will have a look for you as soon as possible.