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!