Facebook Tutorial: Facebook Connect Zen Cart Integration in less than 5 minutes - Part1
Even if I wrote in a previous article that Facebook Connect has not only advantages, a friend asked me to do it for is website. Indeed, unlike WordPress, there still is no solution to easily integrate Facebook Connect with eCommerce websites.
I will show you in this first “Facebook Connect ZenCart Integration” tutorial how to add, in less than 5 minutes, a functional Facebook Connect login button within your great shopping cart software “Zen Car”.
You just need:
- Zen Cart v1.3.8 installed,
- a shell or ftp access to your host, you can get a nice one here (half price promo code: CHRYSTAL 
), to your Zen cart server and
- your Facebook API credential.
First of all, insert the following code (between the stars) into the file ZEN_CART_ROOT_DIR/includes/templates/template_default/templates/tpl_login_default.php:
*********************
<h1> Facebook User: </h1>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<fb:login-button></fb:login-button>
<script type="text/javascript">
FB.init("YOUR_API_KEY“, “xd_receiver.htm”);
</script>
<h1> Non Facebook User: </h1>
*********************
Where you have to replace YOUR_API_KEY with your API key given by Facebook (I will explain you how to e bit further).
In my example, I did put the code just below the following line:
************<h1 id="loginDefaultHeading"><?php echo HEADING_TITLE; ?></h1>***********
The login/register page on your shopping website should now look like:
If you want, you can replace your ‘tpl_login_default.php’ file (don’t forget to backup it before) with the following one: pl_login_default.php
The only thing left to do is to get your own API key and to replace it in your ‘tpl_login_default.php’ file.
Getting you Facebook Platform API key:
- Go to http://www.facebook.com/developers/createapp.php to create a new application.
- Enter a name for your application in the Application Name field.
- Accept the Developer Terms of Service, then click Save Changes.
- On the Basic tab, keep all of the defaults, except enter a Callback URL. This URL should point to the top-level directory of the site which will be implementing Facebook Connect (this is usually your domain, e.g. http://www.example.com, but could also be a subdirectory).
- Take note of the API Key, you’ll need this shortly.
- Click the Connect tab. You should include a logo that appears on the Facebook Connect dialog. Next to Facebook Connect Logo, click Change your Facebook Connect logo and browse to an image file. The logo can be up to 99 pixels wide by 22 pixels tall, and must be in JPG, GIF, or PNG format.
- If your site is going to implement Facebook Connect across a number of subdomains of your site (for example, foo.example.com and bar.example.com), you need to enter a Base Domain (which would be example.com in this case). Specifying a base domain allows you to make calls using the PHP and JavaScript client libraries as well as get and store session information for any subdomain of the base domain. For more information about subdomains, see Supporting Subdomains In Facebook Connect.
- Click Save Changes.
And just replace the YOUR_API_KEY previously mentioned in your ‘tpl_login_default.php’ file and that’s it.
When you click now on your newly created login button you should get something like this:
You can see the result on: http://www.steganart.com/index.php?main_page=login
Next time, I will show you in”Facebook Connect Zen Cart Integration in 5 minutes - Part2″ how to integrate the profile picture of your Facebook visitors within you Shopping Cart website.
Tags: access, applications, code, create, development, example, facebook, platform, tutorial, Tutorials
Related Post
4 Comments
Comments RSS TrackBack Identifier URI
Leave a comment
Hey,
Good job but it would call javascript to act correctly. I don’t see the facebook button when I install no-script add-on with my FF3.
Anyhow, thanks for your idea
[…] Look hereTools 4 Facebook […]
Hello
I’ve enjoyed part 1 very much but I can’t find part 2 anywhere.
can you point me to the rest of the tutorial?
thanks!
m
I am curious…What is the benefit of having Facebook Connect on the Login page? It doesn’t seem to do anything for me….