How to integrate your shopping cart with Facebook
Posted 3 November, 2009 by Qetzal. Posted in How to
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 
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.
^Eugene
26 Comments
3 Trackbacks
- Tweets that mention How to integrate your shopping cart with Facebook | Ecwid: E-Commerce Widgets -- Topsy.com
- uberVU - social comments
- How to add your shopping cart to MySpace | Ecwid: E-Commerce Widgets
Sorry, the comment form is closed at this time.
It would be nice if this could somehow be directly integrated with our business pages as a separate tab. Maybe there is a way, if so - feel free to share.
P.S) I have already marked that it is available for pages to add, and "added" it to my company page, but it's still not showing up. Also, the shopping back is stuck over part of my different products for sale, and it won't move. Any ideas?
> It would be nice if this could somehow be directly integrated with our business pages as a
> separate tab. Maybe there is a way, if so - feel free to share.
I agree, that it would be nice.
Unfortunately there is not easy way to do it, FaceBook doesn't allow iframes in the profile tabs. However it is possible to add a tab with a link to your Facebook store and e.g. some featured products. It will require some coding though.
> Any ideas?
Please post your questions on our forums(www.ecwid.com/forums) and include the URL to your FaceBook store. I will look into it.
I love it... I will be trying it in my facebook... Let you know the feedback... Thanks ecwid team~
Oops it me again... I got a error as shown below:
" Error
Internal Server Error
We are sorry, but this page is temporarily unavailable."
Ok, I've created the app for my store and I can see it when I go to 'Go to Application' but how do I actually include it in my profile or on my page?
This is how I linked my application from my fan page:
You can see an example of it here - the tab "Buy Our Prints".
http://www.facebook.com/home.php#/pages/Elevated-Aspects-Aerial-Photography/69078172793?ref=search&sid=1242130785.363855823..1)
# Log into Facebook and access the Fan Page you want to add your application to.
# Click the “Edit Page” link to the right of the Fan Page image. Note that you need to be an Admin of the Fan Page to add the application.
# On the “Edit” page scroll down to the bottom of the “Applications” section to the “More Applications (Browser More)” link and click the link.
# On the “Application Directory” page type “Static fbml” into the search box and press enter.
# The result page will include the “Static FBML” application.
If this application has not been added to you page before, click on the “Static FBML” link.
# On the “Static FBML” application page you will need to click the “Add to Page” button to add this application to you Fan Page.
# Once you click the “Add to Page” button you will be presented with an option to pick the Fan Page you want to add “Static FBML”. Note, be sure to select the Fan Page you want this application added to and not any of your application pages, which you may have.
# Once you click the “Add Static FML” you will return to the Fan Page where the application was added.
# Again, click the “Edit Page” link to the right of the Fan Page image. On the “Edit” page scroll down to the “Applications” section where you will now see the “Static FBML” application listed.
# Now we need to edit the application to insert the code for your application. Click the “(Edit)” link next to “Static FBML” to insert your code.
# On the “Edit FBML” page you will need to provide the “Box Title”. This should be the application name (In my case "Buy Our Prints")
# In the “FBML” section you will need to add the HTML to link to your Facebook application (the canvas URL).
# Once you have added the title and code click the “Save Changes” button. The application will be added to you Fan Page.
# If you want to add another application to your Fan Page you simply need to click the “Add another FBML box” at the bottom of the “Edit FBML” page we just completed. Once the new box is added below it will be listed below the name of the application you just added. Click the “edit” link to add the code for the next application.
# Good luck!
Emily,
> We are sorry, but this page is temporarily unavailable."
Do you still get this error?
Easy. Thanks!
qetzal,
Everything is alright. I have reset the programme and reinstall the whole thing. Now everything is alright.
Thanks a lot~ I love it.
I have got the following message as well
Error
Internal Server Error
We are sorry, but this page is temporarily unavailable
I have retried many times already, where could have I done wrong?
> I have retried many times already, where could have I done wrong?
Usually such an error appears when an incorrect Canvas Callback URL is used.
Please create a new thread on our forums(http://www.ecwid.com/forums) and post the link to your
Facebook store. I will look into the issue.
Got the basic Sorsdahl art gallery up, going to crash for a bit and then get this added as a link to my fan page as well following Elevated Aspects advice. But for now nice to see a product or two listed...cool! I think my wife knows how to set up a fan page, i'll ask her when she wakes up.
Looks great! Except - the shopping bag is blocking the categories. On my website, the bag only shows up if it has something in it. And then, you're able to move the shopping bag around. Not on facebook. any suggestions.
> Not on facebook. any suggestions.
If you want hide the shopping bag from your Facebook App, it's necessary to update your Canvas Callback URL with a custom path.
Please create a new theme in our forum(http://www.ecwid.com/forums) and I'd be glad to provide you with the instructions.
I've just followed your procedures and it worked fine with my facebook account. My problem is that the
application tabs are too long. It is taking the whole name of the category. How can we shorten it or
make a title alias?
> My problem is that the application tabs are too long. It is taking the whole name of the category.
> How can we shorten it or make a title alias?
Please create a new thread on our forums and we will investigate this issue.
what code are these instructions referring to implement the FMBL store to a tab on a fan page?
i get it... FBML is a shorthand facebook html. get it. i can google.
now everytime i put in something in the FBML section )not box title, im not dumb) the url or an fb:tags-almighty all i see is the text. i have tried switching my store app from iframe to fbml.
just type the freaking code out so we can get on with this.
hi eugene,
is it possible to add the ecwid shopping cart - app as fbml, like 'notes', 'discussion', 'board' etc?
I would like to have it on my fanpage...
thanx
Claudia,
You can add a new tab with a link to your app on your fan page.
Please refer to this article for details: http://kb.ecwid.com/Facebook
(The instruction is at the article's end)
what is the general fbml code? and once i click "open store" do you have a code to link back to the home page of the fan page?
ok i get it- the fbml code part.. but do you have the code to link back to the home page? or a code for the cart to be in the fbml tab so that the buyers wouldn't have to leave the fan page itself?
*for the store i mean not cart..
> do you have a code to link back to the home page
Hi, glad to know that you have set up the page tab.
The link back to the home page from the app is a very nice idea. We will add it in the next Ecwid version.
hi. i keep getting the "Our store is temporarily unavailable, please try later. Store ID is incorrect or not specified" message on my store page's products tab. Any suggestions?
http://www.facebook.com/pages/Shakedown-Gallery/231407369230?ref=ts
shakedowngallery, I see you fixed this problem already.