How to integrate your shopping cart with Facebook

Nov 3, 2009 by Qetzal, Product Manager
Posted Nov 3, 2009 by Qetzal, Product Manager
facebook logo

There are more than 300 million active users on Facebook — such a great opportunity to get more customers to your e-store!
Win over more buyers by adding Ecwid to the Facebook ecosystem. It will take you 5-7 minutes at that. No PHP knowledge is required, no code changes or hosting expenses.



Update at 29 Apr, 2010: There is now a better way to add your store to Facebook. It’s even faster! Use our Facebook application to do it: apps.facebook.com/ecwid-shop/
Instruction: kb.ecwid.com/Facebook

Below are the steps to integrate your Ecwid with Facebook:

1. Detect your Ecwid Store ID.

  • Log into the Ecwid Control Panel. (Don’t have an account? Sign up for free!)
  • When you log in, page “Dashboard” with section “Getting Started” will appear.
  • Find the Product Browser Widget Code text-box with HTML/JavaScript code in it. This is the Ecwid integration code.
  • Look through the code lines, find this line:
    src=’http://app.ecwid.com/script.js?1003

1003” is the Store ID.

Note: you will see another number on your page. Use the number from your page as your Store ID.

Check the screen-shot:

2. Then go to Facebook Developer App. (it’s assumed you already have a Facebook account).
You will see the following form. Click the “Allow” button to let the Developer application access your profile.

3. Add a new application by clicking the “Set Up New Application” button.

4. Give your application a name (for example “Super-duper Store”). Accept the Terms of Service and click “Create Application”.

5. Then you should enter some basic information on your application, upload a logo and add a description.
“Contact Information” and “User-Facing URLs” sections are not mandatory. You can fill them in later

6. We are almost done. Click the “Canvas” link on the left side of the page.

7. Now you should specify the required URL’s.

  • Canvas Page URL — The base URL of your store page on Facebook. For example, “my-cool-store”.
  • Canvas Callback URL — a special URL that will show your Ecwid store. Replace pattern %STORE_ID% with your real Store ID which you got at step #1 in this URL: http://app.ecwid.com/jsp/%STORE_ID%/simple-store#?.

For example:
http://app.ecwid.com/jsp/1003/simple-store#? or http://app.ecwid.com/jsp/1234/simple-store#?

Check the screen-shot:

Change width and size of your application. Choose “Full width (760px)” and “Smart size” options in the “Canvas settings” form.
Make sure that your options look like the ones on this screenshot:

Save the changes. You will see the following page:

8. Click the “View Application Profile” link.

9. That’s it. Your store is ready! Press Go to Application to view your Ecwid store.
Any user can now add your Facebook app to his/her profile, use it, purchase items, discuss your store with other users, become its fan, etc.

It was quickly, wasn’t it?

Please, share your experience on how you added your Ecwid store to Facebook in the comments or on Twitter. I’d be glad to learn about your stories and get your feedback : -)

If you have questions, feel free to ask in our forums.